Icon

stablev0.1.0

Single entry point for icon rendering in the design system. Resolves a string name against the generated icon registry: 252 Lucide glyphs (named imports — tree-shakeable) plus 27 Filigran custom glyphs (custom/* prefix, currentColor). Decorative by default; semantic with aria-label.

Open in Figma Machine contract (Icon.meta.ts)

Variants

Sizes — 16 / 20 / 24 (token classes size-4/5/6)

Lucide set (sample) — color inherited via currentColor

Custom Filigran glyphs (sample) — custom/* names

Semantic — aria-label + role="img" (inspect the DOM)

Gradient accents (decorative only) — ia / focus

Vocabulary

The complete icon vocabulary of the design system (279 names), generated from the icon registry. Click an icon to copy its name.

Filter by name

Lucide (252/252)

Custom Filigran (27/27)

Missing an icon?

The vocabulary is closed by design — an icon name that is not listed above does not exist. To extend it: 1) search for a candidate glyph on lucide.dev; 2) propose the addition in packages/filigran-design-system/src/assets/icons/icon-mapping.json (or a custom 24×24 SVG in packages/filigran-design-system/src/assets/icons/custom/ when no candidate fits); 3) design arbitration validates it, then pnpm generate:icons adds it to the registry. Never import an icon library directly in a product (AGENTS.md “Icons — mandatory rules”).

Examples

// Decorative (default): hidden from assistive technologies
<Icon name="search" />

// Standalone semantic icon: accessible name + role="img"
<Icon name="circle-alert" aria-label="Warning" />

// Custom Filigran glyph — recolorable through the text color (currentColor)
<span className="text-default-secondary">
  <Icon name="custom/malware" size={16} />
</span>

// Decorative gradient accent (AI feature affordance)
<Icon name="bolt" gradient="ia" />

Props

Prop	Type
`name`	`IconName (required) — icon identifier from the generated vocabulary (ICON_NAMES export). Lucide glyphs use their kebab-case Lucide name (e.g. "chevron-down"); Filigran glyphs use the custom/ prefix (e.g. "custom/malware"). Unknown names throw.`
`size`	`16 \| 20 \| 24 — rendered size in px, mapped to token classes size-4/5/6 (default: 24).`
`gradient`	`"ia" \| "focus" — decorative gradient fill via the bg-gradient-ia / bg-gradient-focus token utilities and an SVG luminance mask. Gradient icons are visual accents: never the sole carrier of meaning.`
`aria-label`	`string — accessible name for a STANDALONE semantic icon; adds role="img" and removes aria-hidden. Omit it (decorative default) when the icon accompanies visible text.`
`aria-hidden`	`boolean — true by default (decorative). Typing forbids aria-hidden={false} without an aria-label.`
`className`	`string — extra token classes (e.g. text-feedback-error-primary to color the icon). Color always flows through currentColor.`

Accessibility

2.1 AAWCAG pass

Criteria: 1.1.1 Non-text Content — decorative by default: aria-hidden='true' unless an aria-label is provided; the props type forbids a semantic icon without an accessible name. 4.1.2 Name, Role, Value — semantic icons render role='img' + aria-label on the SVG (or on the gradient wrapper). 1.4.11 Non-text Contrast — icons inherit currentColor; the declared pairs prove the documented text-color tokens reach ≥ 3:1 on the page background in both modes (computed in CI by check-contrast). Gradient icons (gradient='ia'|'focus') are decorative accents: gradient stops are NOT verified against arbitrary backgrounds, so a gradient icon must never be the sole carrier of meaning — pair it with text or a semantic sibling. 2.1.1 Keyboard — not applicable: Icon renders static, non-interactive SVG (no focusable content, no keyboard test needed); interactive behaviour belongs to the wrapping component (e.g. IconButton). Custom glyphs are generated with fill='currentColor' (hardcoded fills stripped at generation), so light/dark rendering follows the text color tokens. wcagStatus 'pass' basis: axe-core conformity suite reports 0 violations in both modes on the full demo surface (S1), and both declared contrast pairs are computed from tokens in CI (Q2). Automated checks cover ~half of WCAG — human/screen-reader audit cadence still applies per release.