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.
You 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. They are used to enhance the visual appearance of the content.
There is no need to provide the Icon with a label
as the icon's meaning is already described by the visible text. When label
is not provided, the aria-hidden
is set to true
automatically, so there is no need for you to set it.
Icons are non-interactive elements. You cannot use them to trigger actions or place a tooltip on them.
If you need an interactive component, use an icon-only Button instead.