Foundations / Icons
Icons
One icon set, vuesax linear (thin line, 1.5 px), in three sizes and always in the color of the text they go with.
Version 1.4 · Oct 20, 2026
Set
Sample of the vuesax linear set, at 24 px and in color-ink. Under each icon, its name in the set.
Sizes
Three sizes; the stroke stays at 1.5 px in all three.
Name (token)
Value
When to use it
icon-set
vuesax linear
The brand's only icon set.
icon-size-sm · md · lg
16 · 24 · 32 px
Above 32 px, use an illustration.
icon-stroke
1.5 px
The same at all sizes.
icon-color
Text color
The icon uses the color of the text it goes with (in code: currentColor).
Color
Icons use the color of the text they go with. If an icon carries information, it needs a contrast of at least 3.
Icon contrast
An icon that carries information needs a contrast of at least 3 (the WCAG accessibility standard asks for it). All text colors and color-action-default meet it on color-white and color-surface-subtle. If an icon has no text, give it a name for screen readers.