Icon

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

• 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.

<div class="number"><vwc-icon name="telephone-line" label="Telephone:"></vwc-icon> 0123 456 7890</div>
<div class="number"><vwc-icon name="fax-line" label="Fax:"></vwc-icon> 0123 456 7890</div>

<style>
  .number {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
  }
</style>

• 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.

<p><vwc-flag code="US"></vwc-flag> United States</p>

• 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.

• WAI Images Tutorial: Decorative vs Informative Icons