Icons are pictures that show what something means without using words. They can be very helpful
because they can quickly give information.
However, not everyone can understand them easily. When using icons it is very important to consider
the following aspects of accessibility.
## Provide visible labels
Icons are a helpful tool to improve perception, but they aren't a replacement for text.
In most cases, it is probably a good idea to also provide a textual representation of your icon's
function.
## Contrast
Ensure there's enough contrast between the icon and its background so that it's visible to people
with low vision or color vision deficiencies.
We recommend
following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
## Use of color
Avoid relying solely on color to convey meaning in icons, as some users may have color blindness.
Instead, use additional visual cues like shape, shading or text.
## Interactivity
Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when
activated.
In most cases this is easily done by wrapping them in icon buttons.
## Minimum target size
Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it
should have a minimum target size of 44×44 pixels.
In practice, this doesn't necessarily mean that the icon itself should be this large, only its
interactive wrapper element.
## Meaningfulness
Icons should represent concepts or actions in a universally understandable way. Avoid using abstract
or ambiguous, or culture-specific symbols that might confuse some users.
## Consistency
Maintain consistency in icon design and usage across your interface to help users learn and
understand their meanings more easily.
## Text Alternatives
You may have to provide text labels or alternative text descriptions for icons, especially for
screen readers used by people with visual impairments.
However: descriptions should only be provided to standalone icons that aren't purely decorative, as
providing accessible names to non-functional elements only increases clutter when using screen
readers.
### On standalone icons
Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper
element. In most cases they will be part of a badge, button (including icon buttons), navigation
item or other interactive UI element.
::: warning
In case some of your icons stand alone, and they serve a non-decorative function, make sure to
provide the appropriate accessible label for them.
:::
In general try to avoid using functional icons with no interactivity, we recommend that:
1) you either add a visible description next to them, or
2) place them in badges, labels or on buttons, and at least add a tooltip to them.
In any such case, it is preferred that the accessible name be provided for these interactive
elements (badges, buttons, nav items etc.) only, _not_ the icons themselves.
### On buttons
Do not provide an accessible label to icons when used on a button, as this label will be read out by
