Icons with softer corners
and sharper details.
575 icons drawn on a 24px grid with squircle corners, in Stroke, Solid and Duotone. Copy them, pull them from the API, or let your coding agent fetch them over MCP.
Works with Figma, React, Vue and plain SVG, and with Claude Code, Cursor and VS Code through MCP.
Craft
Same grid, same stroke, same corners. So they read as one family.
A 24px grid with 2px of padding
Shapes live inside a 20px area and are balanced by eye, not by bounding box. A circle reaches the edge; a square stays inside the keyline.
Squircle, not rounded rectangle
A regular rounded corner goes from straight to round at the grey dots. A squircle builds its curve gradually, so there's no visible kink.
Three styles from one drawing
Solid and Duotone are built from the stroke version, so swapping styles never moves anything.
Any stroke from 1 to 2.5
Use 2 at 24px, 1.75 at 20px and 1.5 at 16px. Joins stay clean at every weight.
A Figma library that behaves
Style is a variant. Stroke and colour are variables, so dark mode and density changes are one click.
In use
Built for real screens. One set, four kinds of product.
- Home
- Inbox12
- Projects
- Analytics
- Calendar
- Team
Favourites
- Q4 launch
- Design system
- Onboarding v2
Summarise this and draft three pricing options…
Good morning
Sam Rivera
Total balance
$8,240.12
Activity
See all
- −$6.40
Blue Bottle
Today, 9:12
- −$412.00
KLM
Yesterday
- +$120.00
From Maya
Mon
- −$38.90
Muji
Sun
For developers and agents
Ask for a delete button. Your agent finds the icon.
Copy and paste
Every icon as SVG or JSX from the library, with your stroke and size already applied.
REST API
Search by meaning, then fetch any icon as SVG, React or Vue, in the style and stroke you ask for.
MCP server
One line in Claude Code, Cursor or VS Code. Four tools: search, get one, get many, list categories.
$ claude mcp add --transport http not-boring-icons \ https://not-boring-icons.vercel.app/api/mcp
> add a delete action to each row in the invoices table
not-boring-icons · search_icons("delete")
not-boring-icons · get_icon("trash", format: "jsx")
→ wrote components/icons/TrashIcon.tsx
✓ Added a TrashIcon button to InvoiceRow with a confirm dialog.
Library
30 categories. Arrows to AI.
Pricing
Stroke is free. Pay when you need more styles or more requests.
Free
$0forever
Side projects, prototypes, and trying the set before you commit.
Coming soon- Every icon in Stroke
- Stroke width and colour controls
- API key and MCP server
- 1,000 requests a day
- Personal and commercial use
Pro
Most popular$9/month
or $79 a year
For people shipping product every week, and the agents helping them.
Coming soon- Everything in Free
- Solid and Duotone styles
- Animated icons via API and MCP
- Figma library with variables
- 50,000 requests a day
- New icons monthly, plus requests
Lifetime
$149once
one seat, no renewals
Pay once and get every icon and style we ever draw.
Coming soon- Everything in Pro, permanently
- All future styles and icons
- Priority icon requests
- 50,000 requests a day
Is the free plan actually free?
Yes. Create an account and every icon in the Stroke style is yours to use in personal and commercial work, in as many projects as you like. Pro adds Solid and Duotone, the Figma library and higher API limits.
Why do I need an account?
Your account gives you an API key. That key is how your code, build scripts and coding agents fetch icons, always in the latest drawing and in the style and stroke width you ask for.
How does an agent use the icons?
Add the MCP server to Claude Code, Cursor, VS Code or Claude Desktop. The agent can then search by meaning (“delete” finds trash) and write the icon into your project as an SVG, React or Vue component. Agents without MCP can use the REST API with the prompt from our docs.
What's a squircle, and why does it matter?
It's a shape between a square and a circle where the curve eases in gradually instead of switching from straight to round in one step. Corners look softer without looking bloated, and it matches the shapes iOS and macOS already use.
Do the icons hold up at 16px?
They're drawn at 24px with a 2px stroke. At 20px use 1.75, at 16px use 1.5. The API and the Figma library both support this, and the solid set re-cuts its details so they don't fill in.
Can I request an icon?
Pro and Lifetime members can. Requests usually ship within two weeks, and they're how a lot of the set got drawn.
Start with the free stroke set.
Make an account, copy your key, and you're using the icons a minute later.