One set.
Icons are a cross-medium standard. Alix uses one set, Lucide, built on a 24×24 grid with a 2px stroke. Size follows context, colour follows the surrounding text, and labels carry the meaning.
- Set
- Lucide
- Construction
- 24 × 24 grid
- Stroke
- 2px
- Sizes
- 12 / 16 / 20 / 24px
One set
Use Lucide for every icon. One source keeps the stroke, corners, and weight consistent across the whole system. If Lucide lacks the glyph, draw a custom one on the same 24×24 grid and do not add a second visual set.
Anatomy
Every Lucide glyph is drawn inside the same cell: a 24×24 grid, a 2px stroke, rounded caps and joins, and a 2px keyline of padding so nothing touches the edge. That shared construction is why a calendar and a trash can read as the same size and weight even though their shapes share nothing.
- 24 × 24 grid
- Every glyph drawn in the same cell
- 2px stroke
- One weight across the set
- Rounded cap and join
- Lucide's line finish
- 2px keyline
- Padding so nothing touches the edge
The size scale
Choose icon size by context. Use 12px for fine detail, 16px for default actions, 20px for prominent actions, and 24px for standalone glyphs. The surrounding element sets the size so related icons stay consistent.
Meaning and labels
Choose familiar symbols. Pair unfamiliar icons with words. An icon-only action must have an accessible name.
Familiar symbol plus word, so the meaning is immediate.
If the icon stands alone, the control still needs an accessible name.
Custom icons
When Lucide lacks a glyph, draw it on the same 24×24 grid, with a 2px stroke, rounded caps and joins, and the same keyline. Never import a second visual set.
A custom glyph follows the same grid and stroke as the main set.
Do not mix in a second visual set just because one glyph is missing.
Colour and alignment
Icons inherit the surrounding text colour. Pair 12px with fine print, 16px with body text, and 20px with larger labels. Label what is not obvious. An icon-only action must have an accessible name.
Misuse
Iconography fails the moment it stops looking like one set. Keep the source single, choose a named size for the context, and keep the meaning legible.