Icon
Token-aware wrapper around `@carbon/icons-react`. Carbon ships ~2000 icons as individual components, each sized via a `size` prop (16 | 20 | 24 | 32). This primitive standardises:
primitives-icon--defaultOpen all variants →
When to use
- Any place a Carbon icon ships and you want consistent sizing + tone tokens.
- Inside
<IconButton>,<Button leadingIcon>, table cells, and toolbar triggers. - For interactive trigger icons that need an
aria-labelon the host (<IconButton aria-label="Save"><Icon glyph={Save} /></IconButton>).
When not to use
- For non-Carbon glyphs (custom Avala brand glyphs, MCAP/lidar markers) → use the raw SVG with token utilities applied directly. Reach for Icon only when the glyph comes from
@carbon/icons-react. - For animated / interactive illustrations → use the marketing animations under
domain/animations/.