Labs

Icon

A side-by-side comparison, not a decision. Lucide, Tabler and Phosphor (regular + duotone, plus a weight range on a subset) rendered on the locked palette, judged against the actual mark at top. Every glyph here is fetched once from the Iconify API and inlined — no runtime network dependency, fully recolorable via CSS.

Preview

Preview theme

The locked mark

tw-geist.svg — the interlock alone

Tile: 2px stroke corner brackets, round linecap/linejoin. Asymmetric corner — round top-right & bottom-left, sharp top-left & bottom-right (radius.json's asymmetric scale, lg).
Brackets + glow: dark accent #368ef2. Glow = radial gradient, top-right (85%/0%), ~0.14 opacity — a logo accent, distinct from the UI glow token's 9% card-ambient default.
Letterform: dark text #e3e8ef — never the accent. Everything below is judged against this: stroke weight, corner character, and whether a library's "personality" sits comfortably next to it.

Library comparison

20 concepts × Lucide / Tabler / Phosphor (regular) / Phosphor (duotone), 30px, on surface

Phosphor — weight range

thin → light → regular → bold → fill → duotone, on a representative subset

Weight — by role

ADR-018's per-role assignment — settable here, exported to tokens/icon.json

Phosphor's weight is assigned by role, not fixed to one valueworkhorse for the default UI (nav, buttons, tags, inline icons),editorial for larger/illustrative contexts (labs section headers),hero reserved for limited-use featured/hero moments only. Locked defaults below (regular / light /duotone) — re-select and re-export if a role's assignment ever needs to change, rather than editing the ADR.

Workhorse

nav, buttons, tags, inline icons
Workhorse weight

Editorial

labs headers, bigger illustrative use
Editorial weight

Hero

limited-use featured/hero moments
Hero weight

Experimental — glow duotone

Phosphor duotone icons on an asymmetric-corner tile (same TR/BL-round shape as the mark, radius.json's asymmetric scale) with the mark's top-right glow behind them. A possible limited-use treatment — a featured/hero icon, not applied everywhere. Two independent effects here: the tile's ambient background wash (radial gradient, same convention as the mark/card glow) and the icon's own SVG glow filter (dual-radius blur + alpha boost, composited under the sharp glyph — a more literal "neon" read, intentionally more intense than the restrained tile wash). Glow is dark-mode only — same asymmetry as the base glow token and grain (default light = none). Duotone icons themselves render fine in light mode; only the glow accent is gated off. Switch theme above to see both effects drop to zero. Tunable live below; nothing here is locked.

Tile — ambient background wash

Icon — SVG glow filter

Icon SVG glow filter