Icons

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 copies used by the worked examples are vendored at brand/examples/lucide/ at a pinned version, 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="2", 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 2, matching Lucide’s default. Do not thin or thicken strokes to “match” a layout.
• Size on the 4px grid: 16, 20, 24, 32px. 20px is the default for inline UI.
• Colour follows text. An icon beside a label takes the label’s colour. 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".