Structure
The Icon component renders an inline SVG (<svg>) element that references a symbol from a shared icon sprite sheet. It has no inherent interactivity, keyboard handling, or focus behavior.
ARIA
| Element | Attribute | Description |
|---|---|---|
svg | aria-hidden="true" | Hides the Icon from the accessibility tree. Removed when label is set. |
svg | aria-label | Set to the provided label. |
Color and meaning
In many contexts, color may be used to help communicate a specific meaning to the user. However, color should never be the sole indicator of the intended meaning. Not all sighted users experience color the same way.
When using the Icon, we highly recommend considering strong and effective supplementary or label text. Text and color should work together to communicate the intended meaning.
Decorative and non-decorative icons
Icons are most often used to visually enhance the meaning of any surrounding text and are therefore considered decorative. An image or graphic is considered decorative when it adds no important information to the page. To maintain proper accessibility, decorative elements should be hidden from the accessibility tree.
The Pluma Icon applies aria-hidden="true" by default which allows it to be properly skipped by assistive technology.
However, Icons are considered meaningful when they add additional information or functionality to a page. Non-decorative Icons must have an appropriate label attached, while icon-only Buttons must similarly use an aria-label. The labels provide screen reader users necessary context into what that Icon or Button's purpose is.
Avoid writing Icon label text similar to surrounding text. This prevents redundant announcements in assistive technology that may confuse or disorient users.