Component

Icon

Published on

Description

The Icon component renders an SVG icon from a sprite sheet using the <use> element. Icons are decorative by default with aria-hidden="true". Pass alt to make an icon meaningful: it then renders with role="img" and aria-label set to the alt text.

Use icons alongside text labels to provide visual context. Avoid using icons as the sole means of conveying meaning without an accessible text alternative.

Example

Open in new tab
View HTML markup 
<p><svg class="icon" aria-hidden="true">
    <use href="/img/icons.svg#search"></use>
  </svg> Search</p>
<p><svg class="icon" aria-hidden="true">
    <use href="/img/icons.svg#external"></use>
  </svg> External link</p>
<p><svg class="icon" aria-hidden="true">
    <use href="/img/icons.svg#warning"></use>
  </svg> Warning</p>
<p><svg class="icon" aria-hidden="true">
    <use href="/img/icons.svg#location"></use>
  </svg> Location</p>

Accessibility

  • Icons are set to aria-hidden="true" by default, hiding them from screen readers.
  • Icons with an alt prop get role="img" and an aria-label from the alt text, so screen readers announce them as images.
  • Always pair icons with visible text or provide an accessible label on the parent element.

References

  • Badge — for count or status indicators

Variables

None