Icons

Usage guidelines

When using an icon, prefer also adding an accessible label and making it discoverable to all users. When an icon’s purpose is clearly conveyed by its accompanying context and will not provide additional benefit to screen reader users, keep it as decorative.

Each icon in our library is meaningful and universal, to ensure users understand them. Icons should not be too detailed, to ensure they’re clear at all sizes.

When using an icon with a button or link, the icon should appear before the text except when the icon indicates direction, e.g. Next or external links.

React component

The Icon component is used to apply our set of universal icons to more complex components of the system.

All icons