Vivid Logo Vivid

Icon

Displays icons from the Vivid Icons Library using predefined colors and sizes.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

Informative vs Decorative Icons

  • Informative icons
    • Convey information not otherwise present in the page's text.
    • Must set the label attribute on informative icons to provide an accessible name.
  • Decorative icons
    • Duplicate information already present in the text, or are purely aesthetic.
    • Do not require a label.
    • When no label is provided, aria-hidden="true" is automatically applied.

Best Practices

Icons Are Non-Interactive

  • Icons must not be used as interactive elements.
  • Do not use icons to trigger actions or attach tooltips.
  • If you need an interactive icon, use an icon-only Button.

Resources