C
Storybook
F5Shipped

Iconography

Lucide React is the sole icon library. Size and color follow design tokens — never one-off pixel values in product code.

Library

Import from lucide-react (also a dependency of @charply/design).

import { ArrowRight, Sparkles } from "lucide-react"

<Button>
  Continue <ArrowRight className="size-4" />
</Button>

Sizing

size-3·12px — Micro icons in badges
size-4·16px — Default inside Button / inline
size-5·20px — Standalone icons, StatusBadge
size-6·24px — Section icons
size-8·32px — Empty state / feature icons

Color

Icons inherit currentColor. Set color via text-* utilities.

In context

Learn more

Guidelines

docs/design/foundation/iconography.md

Do

  • ✓Use `lucide-react` for all product icons.
  • ✓Size icons explicitly with `size-*` when they appear outside a Button.
  • ✓Color icons with `text-*` token utilities.

Don't

  • ✗Import SVG files directly — use lucide components for consistency.
  • ✗Mix icon libraries (e.g. Heroicons, Phosphor) on the same surface.
  • ✗Use decorative icons without `aria-hidden="true"` or a paired visible label.
  • ✗---