Skip to content
Dark

Icons

1,667 Lucide icons on one box and one stroke variable, so an icon at 16 and an icon at 32 still belong to the same set.

Preview

1,667 icons on one box, one stroke and one pair of end caps. The set is Lucide, a third party open source library under the ISC licence. We did not draw it. We wired it to the tokens.

32 of 1,667, drawn at 24
24 box, stroke 2, round cap, round join

The set is flat, no variant sets, filed under 19 categories on the overview board and named in Lucide's own kebab case: house, chevron-right, message-circle. The layer name is the search term.

Sizes

Four steps for interface work and one for display. The box changes, the drawing inside it does not.

One icon at every step, on a common baseline
16, 20, 24, 32, 96
16 sm
20 md
24 base
32 lg
96 display

Size is set by the component that holds the icon, not bound on the icon itself. In Button the icon sits at 20 beside a label and at 24 when the button is icon only. The five steps are the ramp those components resize to.

Stroke

One variable holds the stroke at 2 while the box changes. Leave it out and the line thickens with the artwork, so a 32 icon reads heavier than the 16 beside it.

The same icon at 16, 20, 24, 32
Read the second line under each glyph. Above it holds at 2, below it drifts
Bound to dimensions/icon/stroke
16stroke 2
20stroke 2
24stroke 2
32stroke 2
Stroke left to scale with the box
16stroke 1.3
20stroke 1.7
24stroke 2
32stroke 2.7

In the file this is not arithmetic. The vector scales with its frame while strokeWeight stays bound to dimensions/icon/stroke, so the line holds at 2 whatever the box does. 1,666 of the 1,667 carry that binding. The exception is circle-check, the one vector drawn on the full 24 box rather than inset.

Colour

An icon has no colour of its own. It takes the foreground role of the text beside it, so a label and its icon never drift apart.

One icon, six foreground roles
The stroke is a variable in every case, never a literal
Primary label
Secondary label
Disabled
Brand action
Destructive
On a filled surface
Token
Light
Dark
Applied to
fg/strong-950
#0E0E0F
#FFFFFF
The default in the library
fg/sub-700
#48484A
#C7C7CC
Neutral outline controls
fg/disabled-400
#AEAEB2
#8E8E93
Disabled states
brand/base
#155DFC
#2B7FFF
Brand outline controls
state/error/base-500
#FB2C36
#FB2C36
Destructive actions

All five were read off icon instances inside Button. On a filled button the icon takes fg/white-0, #FFFFFF light and #0E0E0F dark.

Tokens

Six numbers cover the whole set. Five sizes and one stroke, all in the Foundations collection, one mode.

Token
Value
Used for
dimensions/icon/size/sm
16
Dense rows, inline meta
dimensions/icon/size/md
20
An icon beside a label
dimensions/icon/size/base
24
The default, and the frame itself
dimensions/icon/size/lg
32
The largest interface step
dimensions/icon/size/display
96
Display only, never inside a control
dimensions/icon/stroke
2
strokeWeight on every vector

Sizes are scoped to width and height, the stroke to stroke weight, so each offers itself only where it belongs. Only the stroke is bound on the icon: size comes from the component holding the instance.