Components / atoms

Icons

A small set of line icons, drawn inline so they work without an icon font.

Usage

When to use it

Use an icon to support a label, not to replace it. Put an icon before or after the text of a button or input. An icon on its own is a button, so use IconButton and give it a label.

02 / examples

See the component in context.

Variant 01

All icons

Every icon in the set, with the name used in code.

arrow_forward
arrow_back
chevron_left
chevron_right
add
close
check
search
person
language
calendar_month
info
check_circle
warning
error

Variant 02

Icon button

An icon on its own is a button with a text label for assistive technology.

03 / contract

Rules the component follows

Icon draws a small line icon as an inline image that takes the colour of the text around it, so it works in light and dark themes without a separate file. The icons are 24px by default and scale with the size set on them. The icon button is the icon-only button, and it always requires a text label.

The set is kept small on purpose. An icon is added only when it supports a label or a state that is used in the system, so that the same meaning is always shown with the same picture.

04 / accessibility

Accessibility information

Icons are decorative and are hidden from assistive technology, so the meaning must always come from text next to them. A control that shows only an icon needs an accessible name, which the icon button provides through its label.

An icon must never be the only sign of a status. A status is shown with an icon together with words, so it is understood by people who cannot see the icon or its colour.