Labs

Icon

Iconography must match the geometry of the surrounding brand. This lab audits candidate icon sets against the mark's 2px corner brackets, assigning stroke weights systematically by role: standard UI workhorses, editorial headers, and featured glow-duotone accents.

Preview

Preview theme

The locked mark

tw-geist.svg — the interlock alone

Tile: 2px stroke corner brackets with signature asymmetric rounding (TR + BL).
Brackets + glow: Signal blue accent with directional top-right radial glow.
Letterform: Primary text color for crisp typographic legibility.
All icon candidates are evaluated against this geometric benchmark for stroke weight and corner character.

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

Systematic stroke weight assignment across UI tiers

Icon stroke weights are assigned systematically by role: Workhorse (regular) for interface navigation and interactive controls, Editorial (light) for spacious section headers, and Hero (duotone) for featured visual moments.

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

Featured duotone icon treatment composited on asymmetric tiles with directional ambient glow and an inline SVG bloom filter. In light mode, luminous glow effects automatically dissolve to preserve contrast.

Tile — ambient background wash

Icon — SVG glow filter

Icon SVG glow filter