Avala Design
← Components/primitives

Icon

Token-aware wrapper around `lucide-react`. Lucide ships ~1500 icons as individual components; each accepts a `size` prop (px). This primitive standardises:

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Icon } from "@avala/design";

<Icon tone="primary">Icon</Icon>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-icon--defaultOpen in Storybook →

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-label on 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/.