Guidelines

The icon library

Our icons are based on Phosphor. The source of truth is the UI Icons Figma library. Browse the full set in the Overview.

Choosing and using icons

• Choose a recognizable icon that matches the action or concept. Reuse the same icon for the same meaning throughout the product.
• Pair unfamiliar or ambiguous icons with visible text rather than relying on users to infer their meaning.
• Do not use colour alone to communicate a status. Include a text label or another clear visual cue so the meaning remains understandable without colour.
• Keep decorative icons separate from accessible labels. Give icon-only controls a label that describes the action; see the accessibility guidance for implementation examples.

Using icons in Figma

Our icons are available as components through the UI Icons Figma library. If the UI Icons library is not available in your design file, enable it in Figma's Libraries panel. To add an icon to your design, insert it as a regular component instance.

Requests and contributions

Contact the Design Systems team with the icon you need or want to contribute and its use case. The team can help create it, publish it in Figma, and release it in the icons package.