Icons are deceptively difficult. Usually, they are loaded from a separate source (sometimes even a separate origin), and can be one of the last elements to appear on a page. When they do finally load, they often cause the interface to resize.
The icon element has two purposes: to give all icons a set width and height (
1em by default) so that the page doesn’t resize when they load, and to ensure that the icon is the correct color (by setting the
If you’re looking for a nice way to display icons in your content, consider using the icon element in conjunction with a shield.
Margins — Icons have no margins by default. (This will make your life easier.) Just remember to set them yourself!
Vertical alignment – By default, icons are vertically aligned with the middle of the text. If the
font-size of the surrounding text is not the same as the icon, you may need to tweak things.
Icons inherit their color from their context using the
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||color||—||sets icon color|
||sets icon width|
||sets icon height|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.