Iconography
Hand-rolled Lucide-style strokes. 1.6 px stroke, 24-unit grid, currentColor only. We never use coloured icons — colour comes from the surrounding tile.
Usage
Drop an icon anywhere a data-icon hook is present. The helper script renders SVG inline, inheriting color from its parent.
Sizes
Six canonical sizes. Smaller is better — icons exist to label, not to draw attention.
Color
Icons inherit currentColor. Colour comes from the tile or the parent text; never from the SVG itself.
All icons
91 icons grouped by purpose. Click any name to copy.
Brand
Navigation & chrome
Actions
Status & info
Content
Commerce
Domain
Devices
Modes
Do & don't
Pair an icon with a label whenever possible. Icon-only buttons need an aria-label.
Use emoji in product UI. They render differently per OS and break the visual rhythm.
Keep stroke width consistent at 1.6 px. Don't fill icons — the system is line-art only.
Use colour inside an SVG path. Colour is set by the parent.
Code
<!-- Default 16 px --> <span data-icon="settings"></span> <!-- Larger size --> <span data-icon="chart" data-icon-size="22"></span> <!-- Set color via parent --> <div style="color: var(--brand)"> <span data-icon="plus"></span> </div>