<aside> 💡 Tip: Document the most important information you need to know about how to use icons

</aside>

• Icons should be used to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section.
• Use icons infrequently – if you’re questioning an icon’s use, it probably doesn’t need to be used at all. As a general rule, icons should be used in combination with meaningful text to support users progressing through the product in an accessible manner.
• Avoid using icons solely for decoration or visual interest, as it detracts from their intention elsewhere. Consider the surrounding context of icons too; if icons are cluttered and not spaced well, it can lead to visual noise and confusion.
• Icons can represent a single concept such as + which always represents ‘add’, or be thematic in concept such as ☆ which might represent "favorite", "like", "star" etc. Using an icon appropriately allows our users to create a connection to a concept, so don’t over-extend what an icon represents.

Accessibility

There are very few widely recognized icons, so whenever possible, use a label or supporting text to ensure the icon's meaning is understood. If an icon is used without a visible label, an aria-label must be used for the icon.

However, don't use aria-labels if you are rendering the icon with a visible text label to prevent accessibility label duplication.

Internationalization

Always consider icons from a global perspective. Whenever possible, use an internationally recognized icon in place of a locally recognized icon that may only apply to a specific background or culture such as a local currency symbol, € ¥ £, rather than always using $.

Platform specifics

Our icons can be used across web, iOS, Android, and macOS to represent similar concepts. Some icons, however, are already established conventions on specific platforms. In these cases, follow the conventions for the operating system using the OS-specific guidance.