Every icon in the design system renders through this one component — name looks up the bitmap
in the glyph catalog rather than each icon being its own component. Fixed 16×16 viewBox, size in
three steps, fill inherited from currentColor so an icon always matches its surrounding text.
See the Icons guide for the full catalog.
<Icon name="check" />Examples
Fill always comes from currentColor, so pairing an icon with text just means putting both inside
the same colored wrapper — no separate color prop on Icon itself to keep in sync:
<Text color="strong">
<Icon name="warning" size="s" /> Something went wrong
</Text>Most controls that need an icon (Button, IconButton, Input) take an IconName on their own
icon prop rather than a rendered <Icon> child — reach for <Icon> directly only when there's
no such prop to use, e.g. inline in prose or next to plain text.
Need a glyph that isn't in this catalog? See ExternalIcon for loading one from react-icons (or any similarly-shaped icon set) instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | text | — | — |
| name * | warning | menu | search | circle | filter | chevron-down | chevron-up | chevron-left | chevron-right | close | check | plus | minus | arrow-right | arrow-left | info | eye | eye-off | trash | edit | copy | download | upload | external-link | star | calendar | clock | user | settings | more-horizontal | refresh | lock | maximize | minimize | — | — |
| size | s | m | l | "m" | — |
| style | readonly | — | — |
| title | text | — | Accessible name. Omit for a purely decorative icon (it's hidden from AT). |