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" and focusable="false".

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 use focusable="false" to prevent focus in Internet Explorer and older Edge.
  • Always pair icons with visible text or provide an accessible label on the parent element.

References

  • Badge — for count or status indicators

Variables

None