Icons

Lucide as the icon library, and how icons are sized and coloured.

Library#

The system uses Lucide — an actively maintained fork of Feather with over 1,400 icons.

ISC is one of the most permissive open-source licences available, which is why it was chosen over icon sets with attribution or share-alike terms. See the legal assessment for the clearance detail.

Getting the actual icon#

Every icon in this system is a verbatim Lucide path. The specimens on this page are lucide/shield, copied from the library rather than approximated — including the 1 1 0 0 1 arc segments that give Lucide its corner radius, which is exactly the character a redrawn path loses.

Take the file, do not trace it:

curl -O https://unpkg.com/lucide-static@0.544.0/icons/shield.svg

Pin the version. lucide-static@latest resolves to whatever shipped this morning, which lets an upstream release silently change a committed document. The worked examples pull icons from the Lucide CDN at use time, with the upstream ISC notice beside them.

Inline the <path> and set width, height, and stroke at the use site; keep viewBox="0 0 24 24", fill="none", stroke-width="1.5", and both stroke-linecap and stroke-linejoin at round. Changing any of those five is what makes an icon stop looking like the rest of the set.

Usage#

• Stroke width 1.5px, with round caps and joins. Do not thin or thicken strokes to “match” a layout.
• Size on the 4px grid: 16px inline with text, 20px in buttons, and 24px for navigation and large affordances.
• Colour is semantic. Default icons use slate-11; selected icons use midnight-9; danger icons use the danger token. Do not colour an icon unless the colour carries meaning. Standalone icons carrying meaning take --color-secondary; an icon marking the primary action takes the accent.
• Icons are not decoration. Every icon must carry meaning the label does not already carry, or be marked aria-hidden="true".