<span class="icon m-2 ~positive @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>Overview
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 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 color and fill properties).
If you’re looking for a nice way to display icons in your content, consider using the icon element in conjunction with a shield.
Considerations
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.
Variants
Icons inherit their color from their context using the --color-content variable.
Example code
<span class="icon m-2 ~neutral @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>
<span class="icon m-2 ~positive @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>
<span class="icon m-2 ~warning @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>
<span class="icon m-2 ~critical @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>
<span class="icon m-2 ~info @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>
<span class="icon m-2 ~urge @low">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13">
<g stroke-width="2" stroke="currentColor" fill="none">
<path d="M11.29 11.71l-4-4" />
<circle cx="5" cy="5" r="4" />
</g>
</svg>
</span>Accessibility
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 title attribute.
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).
