Icon
One icomoon font, three sizes. The `name` type is generated from the font’s own glyph list, so a typo is a compile error rather than an invisible empty box.
import Icon from '@/components/ui/Icon';Source: src/components/ui/Icon.tsx
Examples
Sizes
sm 16px / md 20px / lg 25px. Inherits colour from its parent.
Beside text
A decorative icon next to a label needs no accessible name — the label is the name. An icon that is the ONLY content needs one, which is why IconButton requires aria-label.
Balance
Pending
Props
<Icon> props
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | (typeof ICON_NAMES)[number] | — | — |
size | 'sm' | 'md' | 'lg' | 'md' | sm 16px / md 20px (default) / lg 25px — the style guide's icon--* sizes. |
Also accepts everything in HTMLAttributes<HTMLSpanElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Browse the full set on the Foundations page — all names are listed there.
Don’t
- Don’t inline an SVG for something the font already has.
- Don’t use grey-200/300 for an icon that carries meaning — those are for decorative glyphs.