Primitives

Icon

A Material Symbols glyph. The font arrives with the token stylesheet, so there is nothing to install and no sprite sheet to keep in sync.

Names

Use name with any Material Symbols name.

searchclosecheckadddeletesettingsexpand_morechevron_rightinfowarningerrormore_horiz

<Icon name="search" size={24} />
<Icon name="close" size={24} />
<Icon name="check" size={24} />
<Icon name="add" size={24} />
<Icon name="delete" size={24} />
<Icon name="settings" size={24} />
<Icon name="expand_more" size={24} />
<Icon name="chevron_right" size={24} />
<Icon name="info" size={24} />
<Icon name="warning" size={24} />
<Icon name="error" size={24} />
<Icon name="more_horiz" size={24} />

Size

Use size to match the text beside it. The five sizes are type steps, so an icon next to 14px text can be told to be 14px.

<Icon name="settings" size={14} />
<Icon name="settings" size={16} />
<Icon name="settings" size={18} />
<Icon name="settings" size={20} />
<Icon name="settings" size={24} />

Without label the icon is hidden from screen readers, which is the right default: most icons sit next to the words they illustrate. Pass label only when the icon is the only thing saying what something is.

Props

Prop	Type	Default	Notes
`name`	`string`	—	Material Symbols name, e.g. chevron_right.
`size`	`14 \| 16 \| 18 \| 20 \| 24`	—	Matches the type scale. Left off, the glyph takes the size its container asked for, which is 20 on a page and 16, 18 or 20 inside a small, medium or large Button.
`color`	`TextColor`	'normal'	Same semantic roles as Text.
`label`	`string`	—	Description for assistive tech. Omit when decorative.