Skip to content
Protocore Design Systemv1.6.9
Foundations

Iconography

The system draws its own imagery as line-art, so icons stay strictly utilitarian: lucide is the app-level icon set — thin, geometric strokes that sit naturally beside a mono label. Icons clarify an action; they never carry meaning alone.

The Icon wrapper

Icon only sets the box and font-size so any lucide glyph aligns to the type scale — sm 14 · md 16 · lg 20 · xl 24. Components inside @protocore/pds never import lucide directly; they accept icon nodes as slots, and the app supplies them.

sm · 14
md · 16
lg · 20
xl · 24

Icons in context

Glyphs ride in component slots — sized to 16px to match the mono label. In a labelled control the icon is decorative and carries aria-hidden; the text carries the meaning.

Icon-only actions

When there is no visible label, meaning must be restored: every icon-only control requires an aria-label. Reach for IconButton, which makes the label non-optional.

Status dots

The one non-lucide mark: StatusDot is a small square, not a circle — the same sharp-corner language as the rest of the system. It tints with a status tone and always sits beside a text label, never encoding state by color alone.

Live Degraded Down