1 stroke · 20px · round · bare
Settings
Hairline icons
Whisper-thin 1px strokes with no frames: quiet, precise and expensive-looking.
Icon styles for React apps
Nothing gives away a generated UI faster than icons at four stroke widths and three sizes. An icon style fixes the stroke, the size, the line ends and how standalone icons are framed. Once it's in your sheet, your agent draws every icon the same way and check_ui flags the ones that drift.
10 styles · Lucide (lucide-react) · apply to your sheet in one click
Icon styles
1.5 stroke · 20px · round · bare
Saved
Regular icons
Balanced 1.5 strokes with no frames, the safe and readable default for product UI.
2.25 stroke · 20px · round · bare
Send
Bold icons
Heavy rounded strokes that hold their own next to bold type and stay friendly and legible at small sizes.
2 stroke · 20px · square · bare
Search
Square-cut icons
Square line ends and mitred corners for a technical, blunt, graphic look.
1.75 stroke · 20px · round · soft
Search
Icons in soft tiles
Icons in accent-tinted rounded tiles: the friendly SaaS feature-list look.
1.5 stroke · 18px · round · outlined
Search
Icons in outlined tiles
Hairline-bordered tiles with text-coloured icons that feel calm, structured and neutral.
2 stroke · 18px · round · solid
Camera
Solid badge icons
Icons knocked out of solid accent tiles, with confident app-icon energy for features and settings.
1.75 stroke · 18px · round · circles
Alerts
Circled icons
Icons centred in soft tinted circles, gentle and approachable for health, finance and onboarding.
2.5 stroke · 20px · square · solid
Settings
Block icons
Chunky square-ended strokes on solid accent blocks: loud, graphic and unmistakable.
1.25 stroke · 22px · round · outlined
Send
Editorial icons
Fine strokes at a slightly larger size in outlined tiles for a refined, airy, print-like feel.
With your agent
From this page to your app in three steps
- 1Add the ones you like to your sheet. It holds your colours, type and motion.
- 2Connect Claude, Cursor or any MCP client in a click.
- 3Ask for the screen. Your agent pulls these exact components with your values filled in.
Which icon library do these use?
Lucide, through lucide-react. It's open source (ISC licence), tree-shakeable and already in most React and shadcn projects. Each style is a stroke width, size and frame, so there's nothing new to install.
How does my agent keep icons consistent?
Your sheet's CLAUDE.md gives the exact strokeWidth and size (or a LucideProvider to set them once), and check_ui warns about icons from other libraries or at a different stroke.
More of the library
Guides and articles
GuideDesign a sheet from the library and fine-tune itBuild a Wuizard sheet by hand: start from a vibe or the library, set colours, type and motion, fill slots, add rules and check it in the live preview.5 min readComparisonDesign tokens in a design tool vs a sheet your agent readsYour design file holds the tokens, but your coding agent builds from code. How design-tool variables compare with a sheet the agent queries over MCP.5 min readArticleWhat goes into a design sheetA design sheet is a design system your coding agent can follow: foundations, one component per slot and a few rules. What each part holds, and why.5 min read
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.