.icon { --icon-size: var(--size, 16px); font-size: var(--icon-size); width: 1em; height: 1em; max-width: 1em; flex: 0 0 1em; display: inline-block; background-color: currentColor; // inherits parent text color mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; // Size &--size-xxs { --size: 10px; } &--size-xs { --size: 12px; } &--size-sm { --size: 16px; } &--size-md { --size: 20px; } &--size-lg { --size: 24px; } &--size-xl { --size: 32px; } &--size-auto { --size: 1em; // Inherits parent font-size position: relative; // Fixes vertical alignment top: 0.125em; // Fixes vertical alignment } }