Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments.
If the icon appears without text, the Icon requires
accessibilityLabel, a text description for screen readers to announce and communicate the represented Icon, as shown in the first example.
Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: “pins".
If an icon has a visible label that describes what the icon represents,
accessibilityLabel can be an empty string, as shown in the second example.
Legibility and touch area
Ensure that icons use a contrast ratio of 4.5:1 between icon color and background color.
Be sure to localize
These are the guidelines for icon sizes (in px):
Used sparingly in tight spaces. When possible, use a text label next to the icon, as it can be hard to see for visually impaired people.
Used often following body text content any time an icon is needed.
Used often any time an icon is needed. Default icon size.
Used frequently any time an icon is needed.
Used occasionally, on more dense UI.
Should be used sparingly and only in places where the UI is very dense and a larger icon is required.
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is slotted to be built for iOS.
Component is slotted to be built for Android.