v1.0.0: 1,000 free shadcn/ui icons for React, Figma and Paper, in four styles and two corners

The first release went out on 20 August. A month later, 1.0.0 has 1,000 icons, and every one of them comes in four styles: stroke, two-tone, duotone and fill. Each style comes with rounded corners or sharp ones. A thousand icons, times four styles, times two kinds of corner: 8,000 in all, with nothing missing.

Stroke is the outline. Fill is solid. Two-tone is the outline with a light grey inside. Duotone drops the outline: a grey shape with the important part in black.

149 of the icons are new, from a new People category to panels on every side, and 59 older ones were redrawn. Two-tone came out of a mistake spotted by accident, and this release was rebuilt around it.

One month, out of beta

The beta started on a plain black and white site, with rounded corners only. Here is where things stand on 18 September.

• 1,000 icons, up from 503.
• 8,000 SVG files, up from 1,286.
• Four styles, up from three, and every one with rounded or sharp corners.
• 14 releases in a month, this one included.
• 6,676 downloads on npm, 2,092 of them in the last week alone.
• 86 stars on GitHub.
• 38 categories, from Actions to Web.

The one breaking change of the month, the duotone rename further down, was saved for this release on purpose, so it lands once, with the move out of beta.

A colour and a logo

Out of beta, the site dropped its plain black and white for a colour of its own: Keyline blue, deep in light mode and a softer sky blue in dark mode. It is the only accent on an otherwise neutral site: the buttons, the selected controls, the logo and the little dots that mark new icons.

The blue takes its hue from non-photo blue, the pale pencil designers used for guide lines, because the cameras that made printing plates couldn't see it. A keyline comes from the same world: the outline that shows where something goes on the page.

The logo is made from the set itself: four shapes, one in each style. A sharp diamond in stroke, a triangle in duotone, a circle in two-tone and a square in fill. It's a small picture of what the set is.

Two-tone was an accident

It started with something that looked off in the design file. In the duotone style, circle had an outline, but circle-x, right next to it, didn't. The same went for badge and badge-check, and for shield-plus and square-plus.

So every duotone icon got checked, all 765 of them. 633 had an outline filled with light grey. The other 132, every icon drawn inside a square, a circle or a badge shape, had no outline at all: just a grey shape with a black symbol on top. Two different styles had been sharing one name.

It wasn't a recent slip. It went all the way back to the first release, and new icons kept copying whichever look sat next to them. The automatic checks didn't catch it either, because both looks used two shades, and that was all the checks asked for.

The quick fix was to add an outline to those 132 and move on. But that would only have turned them into the other style, and both looks were good.

Neither look was wrong. The problem was two good styles sharing one name. So both stayed, each got its own name, and each was drawn for every icon in the set.

The outlined look is now called two-tone. Those icons haven't changed, only their name. If you use the React package and want that look, change @keyline-icons/react/duotone to @keyline-icons/react/two-tone.

Duotone keeps its name for the look without an outline. It went from 132 icons to all 1,000 in this one release.

What goes black in a duotone

• A small symbol is black, and whatever it sits on is grey: the check on file-check, the plus on a calendar.
• On an icon with a slash through it, like bell-off, only the slash is black.
• Background parts stay grey. A chart's axes are grey and its bars are black. A slider's track is grey and its knob is black.
• On a tool, the working end is black and the handle is grey, like the head of hammer.
• Small details on a black shape show through in grey, like the keyhole on lock or the pillows on bed.
• Two grey parts never overlap. Grey on top of grey makes a darker grey, which looks like a mistake.
• No big empty holes in the middle of a shape. They read as a third colour, and a duotone only has two.

And every duotone has something black in it. An icon that is all grey looks disabled, like a button you can't press. So a simple shape, a heart, a star or a circle, keeps a black outline instead.

No gaps, in any style

Before this release, an icon only came in a style if that style added something. An exclamation mark has nothing inside to fill, so alert had no fill version, and an app that switched to fill icons was left with a hole where it should have been.

Now every icon comes in every style. When a style has nothing to add, it simply uses the same drawing: the fill version of x is its outline, because a cross has no inside. Even the first plan for this release would have left 84 icons without a duotone, and it was dropped the next morning.

149 new icons

There were no people in the set until now. This release adds a boy and a girl, a baby with a curl and one with a bow, and both babies again with a pacifier. They get a category of their own, the set's thirty-eighth.

Panels now open, close and come dashed on all four sides, and there are three split layouts and a table to go with them.

Devices got the most. The phone now has calls: a call, and incoming, outgoing, missed and forwarded ones. The tablet comes upright and sideways, with the same eight small symbols as the phone, a check, a plus, a minus, an x and four arrows. There's a laptop on its own and next to a phone, a watch, a hard drive, a cable, a VR headset, a CCTV camera, a mouse and a shredder.

The rest came as families. Two banknotes with a check, a minus, a plus and an x, and a wallet holding cards. An alarm clock with a check, a plus and a minus, and a stopwatch. Three rockets and a car. Big block arrows in four directions, long and short. And a heading icon with all six levels.

Plus a handful of one-offs: snow, wind, humidity, a cloud over the sun, the earth, a recycle sign, a bot with a slash, a brain with a cog, sticky notes, a swatch book, a shield with a key, a siren, a gauge, a milestone, a shirt and a paper bag.

Redrawn icons

59 icons that were already out got redrawn. Most of them are one change made across a whole family.

• The pointing hand is new, in all four directions, with a closed hand and an open hand to go with it.
• The dots on the dice are bigger, and so are the three dots of the more menu.
• The paperclip is longer, and the play button is smaller.
• The gallery frames have tighter corners.
• In the fill style, the file icons' folded corners and the grid icons' lines no longer run into the edge.
• In two-tone, charts keep their axes grey and the data black.

Coins that looked too heavy

The coins icon was drawn with the same line as everything else, but it looked heavier. The coins were squashed flat, so the gap inside each one was tiny. They were stacked so close together that there was hardly any white between them. And the flat ends of each coin pinched into little blobs.

At small sizes a thin gap fills in, and the lines on either side of it look like one thick line. The coins are taller now and spaced further apart, so every gap matches the gaps in the rest of the set.

A sparkle a sliver too small

Every icon in the set leaves the same small margin around its edges. The sparkle was meant to reach that margin exactly, and ever since it was first drawn it had fallen short by a sliver: less than a thirtieth of a pixel at normal size.

Nobody could have seen it. It's fixed anyway, because a rule that holds for 999 icons should hold for all 1,000.

Getting it

Browse the set · All 1,000 icons, in every style and both kinds of corner.

Install · The React package, the command-line tool, the shadcn registry, the MCP server and the Figma plugin.

Changelog · Every release, with each redrawn icon shown before and after.