Icons

Which icons does the file include?

1,667 icons on one box, one pair of end caps and one stroke variable. The set is Lucide, a third party open source library under the ISC license, wired to the tokens.

The set is flat, with no variant sets, filed under 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.

Which icon size should I use?

Use 16 inline with small text, 20 beside a label or in dense rows and compact controls, and 24 as the default. Use 32 for empty states and feature tiles, and 96 for display marks that sit beside a logo, never inside a control.

Size is set by the component that holds the icon, not bound on the icon itself. Button sets 16, 18 or 20 beside a label and 20, 22 or 24 when the button has no label, for its sizes sm, md and lg, so 18 and 22 sit between the token steps.

How thick is the stroke?

Every icon is drawn on a 24 box with a stroke of 2, bound to dimensions/icon/stroke, and an instance at 22 or 24 keeps a stroke of 2. Smaller instances carry a lighter stroke and the 32 step a heavier one, so the line steps with the size.

The values below 22 and at 32 are overrides on the instance, not bound to the variable. Changing dimensions/icon/stroke moves the masters and the bound instances at 24 and leaves the others where they are. A few instances carry another value, so read the stroke off the instance you copy.

All 1,667 masters but circle-check bind strokeWeight to the variable, counted in the Figma file on October 3, 2026.

Which color does an icon take?

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

On a filled Brand or Error button the icon takes static/static-white-0, #FFFFFF in both modes. On a filled Neutral button it takes fg/white-0, #FFFFFF in Light and #0E0E0F in Dark.

Icons are graphics, so WCAG asks 3 to 1 against the ground. On white, strong, sub, brand and error clear it at 19.3, 9.1, 5.2 and 3.8 to 1. The disabled role measures 2.2 to 1, which suits a state that WCAG exempts. In Dark every role in the table is above 5 to 1.

All five were read off icon instances inside Button, on October 2, 2026.

How do I swap an icon without detaching it?

Select the instance and pick another icon in Figma's instance swap menu. Every icon is a component with a built-in safe area, so the new glyph lands in the same 24 box and the layout does not shift.

The icons are strokes without a fill, so recolor one by changing its stroke color to a foreground token from the table above. Painting the fill floods the area inside the path.

In the app, an icon beside a text label is decorative. An icon-only control needs an accessible name for VoiceOver and TalkBack. The touch target stays 44 pt on iOS and 48 dp on Android (platform/min-touch-target) whatever the icon size.

Tokens

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

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.