1,000 free shadcn/ui icons in stroke, two-tone, duotone and fill

The set reaches 1,000 icons with 1.0, and every one now comes in all four styles: stroke, two-tone, duotone and fill. A sidebar can mark the page you're on with a filled icon and leave the rest as outlines, and the two always match.

With rounded or sharp corners on each, that is 8,000 SVGs. Of the thousand, 149 are new in this release and 59 older ones were redrawn.

The four styles differ in where the black goes. Stroke is the outline and fill is solid. Two-tone is the outline with light grey inside, and duotone drops the outline: a grey shape with the part that matters in black.

Two-tone was an accident

Two styles had shared the name duotone since the first release. In the design file, circle had an outline in duotone, and circle-x, right beside it, didn't. A check of all 765 duotone icons found 633 with a grey-filled outline and 132 with no outline at all, every one of them drawn inside a square, a circle or a badge.

Both looks were good, so both stayed and each got its own name. The outlined one is two-tone now, unchanged but for the name. Duotone is the one without an outline, and it went from 132 icons to all 1,000.

If you import duotone icons in React and want the look you had, change @keyline-icons/react/duotone to @keyline-icons/react/two-tone.

What goes black in a duotone

• A small symbol is black, and what it sits on is grey: the check on file-check.
• With a slash through it, like bell-off, only the slash is black.
• Backgrounds stay grey. A chart's axes are grey and its bars black, a slider's track grey and its knob black.
• On a tool, the working end is black: the head of hammer.
• Small details on a black shape show through in grey: the keyhole on lock, the pillows on bed.

Every duotone has something black in it. An all-grey icon looks disabled, so a plain heart, star or circle keeps a black outline.

Every icon comes in every style

Before 1.0, an icon came in a style only if the style added something, and that left holes. An exclamation mark has nothing inside to fill, so alert had no fill, and an app that switched to fill icons had a gap where the alert should be.

Now every icon comes in every style. Where a style has nothing to add, it uses the same drawing: the fill of x is its outline, because a cross has no inside.

The set's first people, and a sidebar on every side

Among the 149 new icons:

• A sidebar that collapses: panel-left-open and panel-left-close, and the same on every side, solid or dashed.
• Calls: phone-call, phone-incoming, phone-outgoing, phone-missed and phone-forwarded.
• People, in a category of their own: boy, girl, baby-boy and baby-girl.
• Headings for an editor: heading-1 to heading-6, and case-sensitive.

Coins that looked too heavy

coins used the same line as every other icon and still looked heavier. Each coin was squashed flat, so the hole inside it was tiny, and the coins sat so close there was hardly any white between them. At small sizes a thin gap fills in, and the lines either side read as one thick line. The coins are taller now and further apart.

Getting it

Browse the icons · Every drawing, all four styles, both corner shapes.

Install · React, React Native, Vue, Svelte and Solid, the shadcn/ui registry, the CLI, the MCP server, and the Figma plugin.

Read the changelog · What every release added, with the drawings in it.