Icons
Lucide icons — sizing conventions and usage.
We use Lucide — an open-source set of 1,600+ icons drawn on a consistent 24×24 grid with a uniform stroke, so glyphs stay balanced at any size. Each icon is a React component; size it with a Tailwind size-* utility and it inherits the current text color via currentColor, so a semantic text token colors the icon too.
Sizes — Tailwind
size-* utilities (rem-based, so they scale with the root font size)size-312px · dense / inline
size-3.514px · small buttons
size-416px · default
size-520px · large buttons
size-624px · feature / empty state
size-4(16px) is the default — it’s what buttons, menu items, and inputs apply automatically.
Usage
import { Gauge, Zap } from "lucide-react"
// Size with a Tailwind size-* utility; color follows the text token.
<Gauge className="size-4 text-muted-foreground" />
<Zap className="size-5 text-warning" />Installation
lucide-reactis a runtime dependency, not part of the CSS theme. You don’t add it by hand — the shadcn CLI installs it automatically whenever you add an Edgecom component that uses an icon (components.json sets iconLibrary: "lucide"). To use icons on their own, add it directly:
pnpm add lucide-react