an honest comparison
with icons vs Lucide: is the default the right pick for you?
If you use shadcn/ui, you already have Lucide. It is a great set. Here is a friendly look at what it does brilliantly, where with icons adds something new, and whether switching is worth it.
- Stay with Lucide if one clean outline style is all you need: it has over 1,600 icons, packages for almost every framework, and it is the default in shadcn/ui.
- Try with icons if you want the same tidy outline look plus filled, tinted and illustrated styles: 500 icons in 20 matching styles, 10,000 SVGs in total.
- Both are free for commercial use. Lucide uses the ISC licence (icons that came from Feather are MIT). with icons is MIT. Neither asks for a visible credit.
- Lucide strokes are 2px wide; the with icons line style uses 1.75px, so it reads a touch lighter. Both use a 24 × 24 grid.
- Lucide is a community fork of Feather. with icons is drawn from scratch, but uses a very similar component style, so switching takes minutes.
On this page 11 sections
Pick Lucide if you want one clean outline style and the widest choice: over 1,600 icons, packages for almost every framework, and it is already the default in shadcn/ui. Pick with icons if you want that same tidy outline look plus filled, tinted and illustrated versions of every icon: 500 icons in 20 matching styles. Both are free for commercial use, and neither asks for a visible credit.
Here is a fun fact: if you have built anything with shadcn/ui, you are already using Lucide. It is the icon set that comes in the box. So this is less “which icon set should I discover?” and more “is the default still the best choice for me?” Let’s look.
How do Lucide and with icons compare?
| with icons | Lucide | |
|---|---|---|
| Price | Free | Free |
| Licence | MIT, no visible credit | ISC (Feather-derived icons MIT), no visible credit |
| Number of icons | 500 icons × 20 styles = 10,000 SVGs | Over 1,600 (the site listed 1,857) |
| Styles | 20: line, solid and duo for interfaces, plus 17 creative styles such as gloss, glass, pixel, retro and luxe | 1 outline style (stroke width adjustable) |
| Default stroke | 1.75px on a 24 × 24 grid | 2px on a 24 × 24 grid |
| Framework packages | React, Vue, Svelte, Angular, Solid, web component | React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, plain JS |
| Built into shadcn/ui | No, but works alongside it | Yes, the default |
| Ready for slides and docs | Copy image, PNG and SVG in any colour | Copy SVG code from the site |
| Help for AI assistants | MCP server, llms.txt, agent skill | llms.txt (no official MCP server found) |
What do Lucide icons look like next to with icons?
Tables only tell you so much, so here are the real icons. Each pair shows a with icons line icon on top and the matching icon from Lucide’s official package underneath, with both names, so you can judge the look for yourself.
homehousesearchsearchsettingssettingsuseruserbellbellmailmailhearthearttrashtrash-2calendarcalendarshopping-cartshopping-cartstarstardownloaddownloadLucide’s design spec says strokes must be 2px wide, with rounded ends and joins. Our line style uses 1.75px by default. Neither is “right”. Heavier lines hold up better on low-quality screens; lighter lines feel calmer next to body text. If you switch and want an exact match, the with icons components accept a strokeWidth setting, just like Lucide’s.
Why is Lucide everywhere?
Mostly because of shadcn/ui, a hugely popular way to build React interfaces. Its setup installs lucide-react and sets Lucide as the icon library, so a lot of new projects start with Lucide before anyone has actively chosen an icon set.
It also earns its place. Lucide has a written design spec (every icon sits on a 24 × 24 canvas with 2px strokes), which is why its icons look like they belong together. So if you are reading this because you think Lucide is bad: it is not. It is one of the best free outline icon sets on the web.
Is Lucide the same as Feather?
Not quite. Lucide started life as a community fork of Feather, a much-loved minimal icon set. (A “fork” is a copy of a project that then grows on its own.) Feather grew slowly and still lists 287 icons, so the Lucide community kept its look and kept adding icons. Some of Lucide’s icons still come from Feather, which is why its licence page mentions Feather’s MIT licence alongside Lucide’s own ISC licence.
with icons is not part of that family. Every icon is drawn from scratch on our own 24 × 24 skeletons. If you liked Feather, our Feather alternative page explains how the two compare.
Does Lucide have more than one style?
No. Lucide has one look: a thin outline. You can make the line thicker or thinner, and change the colour and size, but it is always an outline.
with icons draws each icon once and renders it into 20 styles: 3 everyday interface styles (line, solid and duo) and 17 creative ones. Here is the bell icon, the one you would use for notifications. Line is closest to Lucide; the rest are what Lucide does not offer.
Why would you want that? A few everyday situations:
- Active states. Show the selected tab in solid and the rest in line. Same icon, clearly “on”.
- Friendly dashboards. The Duo style style adds a soft tint behind the line, which makes cards and empty states feel warmer.
- Marketing pages and slides. Creative styles like gloss, glass, pixel, retro and kawaii turn an icon into a small illustration, without hunting for a separate illustration pack.
Is Lucide free for commercial use?
Yes. Lucide uses the ISC licence, which is about as relaxed as licences get. It says you can use, copy, change and share the work for any purpose, as long as the licence notice stays with copies of the code. The icons that came from Feather are covered by Feather’s MIT licence, which says the same thing in slightly different words.
with icons uses MIT for everything. In practice the two are equally friendly: commercial use is fine, client work is fine, and you never need a visible “icons by” credit. See our license page for the full text, or our plain-English guide to icon licences.
Should shadcn/ui users switch?
Not necessarily, and you do not have to switch all at once. Here is a sensible way to think about it.
Keep Lucide if…
Your app is mostly forms, tables and settings screens, you like the look, and you never need filled or decorative icons. Changing icons has a real cost (time, review, small visual bugs) and no real benefit in that case.
Bring in with icons if…
You want solid icons for active states, tinted icons for dashboards, or expressive icons for your landing page and pitch deck, and you want all of them to match. Both sets use one component per icon with similar settings (size, colour, stroke width), so swapping is mostly renaming. A few names differ: Lucide’s House is our Home and Trash2 is our Trash (you can see both pairs in the side-by-side above), X is Close, and Funnel is Filter.
Our Lucide alternative page has a full name map and a converter that rewrites your imports for you. (The with icons packages install from npm, for example npm i @withicons/react, and every icon page also lets you copy the SVG code.)
Pick one icon set per screen. If you move to with icons, move a whole area (say, the sidebar) at once.
Put a 2px Lucide icon next to a 1.75px with icons line icon in the same toolbar. The small difference in weight is surprisingly easy to spot.
What about slides, docs and AI tools?
Lucide is built mainly for developers. You can copy an icon’s SVG code from its website, which is perfect for a developer or designer, but less handy if you just want an icon in a Google Slides deck.
with icons was built for both. Every icon page has Copy image, PNG download in any colour and size, and SVG download, plus guides for PowerPoint, Google Slides, Notion and more.
For AI tools, Lucide publishes an llms.txt file (a summary of its docs written for AI models), which helps. We did not find an official Lucide MCP server. with icons has an llms.txt, an agent skill and an MCP server that lets assistants search the real icon list, so they stop inventing names.
What are the pros and cons of Lucide and with icons?
Both sets are free, well made and easy to use, so the choice comes down to trade-offs. Here they are in plain words, for each side.
What’s great
Huge range. Over 1,600 icons (the site listed 1,857), almost four times our 500. If you need something niche, Lucide is far more likely to have the exact icon.
Ready in almost every framework. There are official packages for React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native and plain JavaScript, and you can install them today.
Already in shadcn/ui. If your app uses shadcn/ui, Lucide is there from day one and every example uses it. Zero setup.
Consistent by design. A written rulebook (24 × 24 grid, 2px lines, rounded ends) keeps every icon looking like part of the same family.
Big, active community. Lots of contributors add and refine icons all the time, and new releases come out often.
What to keep in mind
Only one look. Every icon is an outline. There is no filled version for a selected tab and no tinted or illustrated style, so you would need a second icon set, and it will not quite match.
Made mainly for developers. The website is built around code. If you just want an icon in a slide or a document, it takes a few more steps than a copy-image button.
Less help for AI assistants. There is an llms.txt file, but we found no official MCP server, so AI tools may still guess icon names that do not exist.
Two licences to read. Most icons are ISC and the ones from Feather are MIT. Both are relaxed and free; it is just one extra thing to understand.
What’s great
20 styles of every icon. Each icon is drawn once and comes in line, solid and duo for interfaces, plus 17 creative styles such as gloss, glass, pixel, retro and luxe. Each also has 20 to 30 hand-picked colour palettes. Your app, homepage and slides can all use the same family.
Easy for non-developers. Every icon page has Copy image, a PNG download in any colour and size, and an SVG download, plus step-by-step guides for PowerPoint, Canva and more.
One simple licence. Everything is MIT: free for personal and commercial use, with no credit needed.
Built for AI helpers. An MCP server, an llms.txt file and an agent skill let AI assistants find real icon names instead of inventing them.
Search that speaks human. Everyday words work: “bin” finds trash and “gear” finds settings.
What to keep in mind
A smaller catalogue. There are 500 icons, so rare or very specific symbols may be missing, and there are no brand logos at all.
Fewer framework packages. There are packages for React, Vue, Svelte, Angular, Solid and a web component, but none for Preact, Astro or React Native, which Lucide covers.
Newer, with a smaller community. Fewer tutorials and examples exist so far, and it is not built into shadcn/ui, so you add it yourself.
Creative styles need room. The creative styles, from gloss to pixel and luxe, are made for 32px or larger. For tiny interface icons, stick to line, solid or duo.
Who does each one suit? Lucide is a great fit for developers building a busy app, especially on shadcn/ui, who need lots of icons in one plain style and want a package for almost any framework. with icons suits founders, marketers, teachers and small teams who want the same icons in their app, on their landing page and in their pitch deck, without mixing sets or touching code.
So, should you use Lucide or with icons?
Which one should you pick?
- You want filled, tinted and illustrated versions of the same icons.
- You want a slightly lighter 1.75px line.
- You make slides and docs, not just apps.
- You want an MCP server so AI assistants find real icon names.
- You only need one clean outline style.
- You need more than 1,600 icons to choose from.
- You use shadcn/ui and want zero setup.
- You need React Native or Astro packages.
Lucide is a brilliant default, and there is no shame in keeping it. with icons is for the moment you want more than outlines: a solid active state, a warm duo dashboard, a glossy hero, a pixel-art game screen, a sketchy slide, all from one family. Curious how other popular sets compare? Read with icons vs Heroicons or our explainer on icon styles.
Frequently asked questions
Is Lucide free for commercial use?
Yes. Lucide is released under the ISC licence, a short permissive licence similar to MIT. Icons that originally came from Feather are covered by Feather’s MIT licence. You can use them in commercial products without a visible credit; keep the licence notice if you redistribute the code.
Do I need to credit Lucide?
Not on screen. The ISC and MIT licences only ask you to keep the copyright and licence notice with copies of the software or source files. Using the icons in an app or website does not require a visible credit.
What is the best alternative to Lucide?
It depends on what you miss. If you want the same tidy outline look plus filled, tinted and illustrated versions of every icon, with icons gives you 500 icons in 20 matching styles under MIT. If you simply need more outline icons, Hugeicons Free is bigger (over 6,000 icons). Feather, where Lucide came from, is smaller (287 icons) and rarely changes.
Why does shadcn/ui use Lucide?
shadcn/ui sets “lucide” as the default icon library in its components.json file and installs lucide-react during setup. Lucide fits well because it is a clean, consistent outline set with a strong React package.
Can I use with icons with shadcn/ui?
Yes. You can keep Lucide for the built-in components and use with icons elsewhere, or swap icons one by one. The with icons components use currentColor and accept className, size and strokeWidth, so Tailwind classes keep working. Install them with npm i @withicons/react, or copy SVG code from any icon page.
Lucide vs Feather: what is the difference?
Lucide started as a community fork of Feather and kept its 24 × 24, 2px outline look. Feather lists 287 icons and rarely changes; Lucide has grown to over 1,600 icons and ships new releases often.
Lucide vs Hugeicons: which should I pick?
Both are free outline sets. Hugeicons Free is larger (over 6,000 Stroke Rounded icons, MIT) and sells more styles in Pro. Lucide (over 1,600 icons, ISC) is fully free and is the shadcn/ui default. Pick by which look you prefer and which icons you need.
Sources and notes
- Lucide website (icon count, packages, checked October 2026)
- Lucide on GitHub (README)
- Lucide licence
- Lucide icon design specification (24 × 24 grid, 2px stroke)
- Lucide llms.txt
- npm: lucide-static (the icons shown side by side)
- shadcn/ui manual installation (lucide-react, iconLibrary)
- Feather icons (icon count)
- Hugeicons pricing (free icon count, checked October 2026)
- with icons library (500 icons, 20 styles)
- with icons license (MIT)
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.