--- title: Icons description: 1,667 Lucide icons in Figma for iOS and Android apps: five sizes, a stroke of 2 at 24 that thins at small sizes, and colors from foreground tokens. group: Foundations source: https://www.appetiteui.com/docs/icons dateModified: 2026-10-03 --- # Icons Updated: October 3, 2026. 1,667 Lucide icons on one 24 box and one stroke variable, in five sizes from 16 to 96. The stroke steps with the size, 1.5 at 16, 2 at 24 and 2.25 at 32, so an icon at 16 and an icon at 32 still belong to the same set. ## 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. Specimen: 32 of 1,667, drawn at 24. 24 box, stroke 2, round cap, round join. 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. Specimen: One icon at every step, on a common baseline. 16, 20, 24, 32, 96. 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. Specimen: The same icon at 16, 20, 24, 32. Read the second line under each glyph. Above, stroke 2 at every size. Below, the stroke the components give the instance. | Icon size | Stroke on most instances | | --- | --- | | 16 | 1.5 | | 18 | 1.75 | | 20 | 1.75 | | 22 | 2 | | 24 | 2 | | 32 | 2.25 | 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. Specimen: One icon, six foreground roles. The stroke is a variable in every case, never a literal. | 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 | 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. | Appetite UI | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Lucide, one outline style, stroke 2 at 24 | SF Symbols, which have a weight axis | Material Symbols, which have a wght axis | One outline set serves both platforms. The Apple and Material pages of the file draw their chrome glyphs from the platform's own vectors, not from Lucide. | ## 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 | Inline with small text, dense rows | | `dimensions/icon/size/md` | 20 | An icon beside a label, compact controls | | `dimensions/icon/size/base` | 24 | The default, and the frame itself | | `dimensions/icon/size/lg` | 32 | Empty states and feature tiles | | `dimensions/icon/size/display` | 96 | Display only, never inside a control | | `dimensions/icon/stroke` | 2 | strokeWeight on the icon masters | 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.