Icons

Usage guidelines

When using an icon, always provide a label and accessible name. Don’t use icons without labels because you will confuse some users - even the simplest icons will be new or uncommon to some users.

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