an honest comparison
with icons vs Heroicons: small and polished, but in different ways
Heroicons comes from the team behind Tailwind CSS. with icons comes in 20 styles. Both are compact, free and carefully drawn. Here is how to choose between them.
- Pick Heroicons if you build with Tailwind CSS and want icons hand-tuned for very small sizes: 316 icons in Outline, Solid, Mini (20px) and Micro (16px).
- Pick with icons if you want more icons and more looks from one family: 500 icons in 20 styles (line, solid, duo and 17 creative styles such as glass, pixel and retro), 10,000 SVGs in all.
- Both are free and MIT licensed, with no visible credit needed. Both work with Tailwind classes, because both use the current text colour.
- Heroicons has official React and Vue packages. with icons has those plus Svelte, Angular, Solid, a web component and CSS classes, all on npm.
- with icons has more icons (500 vs 316), but the bigger difference is extra sizes (Heroicons: 4 versions of each icon) versus extra styles (with icons: 20).
On this page 12 sections
Pick Heroicons if you build with Tailwind CSS and want icons hand-tuned for tiny spaces: 316 icons in Outline, Solid, Mini (20px) and Micro (16px). Pick with icons if you want more icons and more looks from one family: 500 icons in 20 matching styles, from a plain line to hand-drawn sketch and 16-bit pixel art. Both are free, MIT licensed and need no visible credit.
Most icon comparisons are David vs Goliath: a few hundred icons against many thousands. This one is different. The two sets are in the same league (Heroicons has 316 icons, with icons has 500, about 184 more), and both were drawn with a lot of care. In one sentence: Heroicons gives you extra sizes, with icons gives you extra styles. Which matters more depends on what you are building.
How do Heroicons and with icons compare?
| with icons | Heroicons | |
|---|---|---|
| Price | Free | Free |
| Licence | MIT, no visible credit | MIT, no visible credit |
| Number of icons | 500 icons × 20 styles = 10,000 SVGs | 316 icons in 4 versions |
| Styles | 20: line, solid and duo, plus 17 creative styles such as glass, pixel and retro | 2 looks: outline and solid |
| Hand-tuned small sizes | One 24px drawing; use solid when small | Mini (20px) and Micro (16px) |
| Framework packages | React, Vue, Svelte, Angular, Solid, web component | React and Vue |
| Plain CSS classes | <i class="with with-home"> | No, SVG or components only |
| Ready for slides and docs | Copy image, PNG and SVG in any colour | Copy SVG or JSX from the site |
| Help for AI assistants | MCP server, llms.txt, agent skill | None official found |
What do Heroicons look like next to with icons?
Here are twelve everyday icons from the official Heroicons package, each under the matching with icons icon. Both names are shown, because Heroicons often uses more descriptive names than we do.
homehomesearchmagnifying-glasssettingscog-6-toothuseruserbellbellmailenvelopehearthearttrashtrashcalendarcalendarshopping-cartshopping-cartstarstardownloadarrow-down-trayFilled icons are where both sets show their weight. Here is Heroicons Solid next to our solid style:
What is Heroicons?
Heroicons is a free set of SVG icons made by the people behind Tailwind CSS, the popular way to style websites with small ready-made classes. The website credits Steve Schoger and the Tailwind team for the design, and you can feel it: the icons are crisp, balanced and calm.
Every icon comes in four versions:
- Outline: 24 × 24 pixels with a 1.5px line. For buttons, menus and most interface work.
- Solid: 24 × 24 pixels, filled in. For active states and emphasis.
- Mini: a solid version redrawn for 20 × 20 pixels, for small buttons and form fields.
- Micro: a solid version redrawn for 16 × 16 pixels, for tiny labels and dense tables.
Developers get official React and Vue packages. Everyone else can copy the SVG straight from heroicons.com, and designers can use the official Figma file.
What is with icons?
with icons is a free set of 500 everyday icons. Each one is drawn by hand once, on a 24 × 24 grid, then rendered into 20 styles by a program. Because every style comes from the same drawing, they match perfectly: you can use line in the menu, solid for the active tab and gloss on the landing page, and it still looks like one family. Three of the styles (line, solid and duo) are for everyday interfaces; the other 17 are creative styles, from frosted glass and puffy stickers to 70s retro and gold-and-enamel luxe.
Compare that row with the Heroicons rows above. Heroicons covers the first two looks, outline and solid. Everything after that is new territory.
- 500
- everyday icons
- 20
- matching styles
- 19
- categories
- MIT
- no credit needed
Sizes vs styles: what is the real difference?
Put simply: Heroicons gives you 4 versions of each icon, tuned for size. with icons gives you 20 styles of each icon, tuned for mood.
Why Heroicons redraws for small sizes
When you shrink an icon to 16 pixels, thin lines get fuzzy and small gaps close up. The professional fix is to redraw the icon for that size: simpler shapes, thicker parts, bigger gaps. Heroicons does exactly that with Mini and Micro. It is careful, unglamorous work, and it is a real strength.
How with icons handles small sizes
with icons draws each icon once at 24px and does not have separate Mini or Micro drawings. For small spaces, our advice is to use the Solid style: filled shapes stay readable at 16px far better than outlines. Here is how a few icons hold up as they shrink:
If you design a lot of dense tables or tiny chips, Heroicons’ hand-tuned sizes are a genuine advantage. If most of your icons sit at 20px or larger, extra styles are likely to be more useful to you. Our icon sizes guide goes deeper on picking the right size.
Is Heroicons free for commercial use?
Yes. Heroicons uses the MIT licence, the same one with icons uses. In everyday words: you can use the icons in websites, apps, client projects and products you sell. You do not have to show a credit. The only rule is that if you share the source code itself, you keep the short licence notice with it.
So on price and licence, this is a tie. Neither set has a paid tier, and neither will surprise you later. Our license page has the with icons text, and this guide explains icon licences in general.
Do Heroicons and with icons work with Tailwind CSS?
Yes, both do. Heroicons and Tailwind CSS are made by the same team, so they fit together naturally. You size an icon with a class like size-6 and colour it with text-sky-500, because the icon simply uses the current text colour.
with icons works the same way. Our icons use the current text colour too and accept a className, so your Tailwind classes keep working if you switch. Heroicons components end in Icon (like HomeIcon); with icons exports both Home and HomeIcon, which makes the swap gentle.
Which is better for landing pages and slides?
Heroicons is built for interfaces, and it stays there on purpose. Its outline and solid looks are perfect for a navigation bar, a little less exciting on a big hero section or a pitch deck.
This is where with icons’ extra styles earn their keep. Engrave style gives an icon a carved, premium feel. Blueprint style looks like a technical drawing, great for engineering and product pages. Sketch style looks hand-drawn, perfect for education and friendly brands. And colourful newcomers like Glass style, Sticker style and Retro style bring a bit of fun to launch pages and social posts.
Every with icons page also has Copy image and PNG download in any colour, so you can paste an icon into Keynote, PowerPoint or Word and Google Docs without touching code.
Can you use Heroicons and with icons together?
Yes, and both licences are happy with it. A common, tidy split is to keep Heroicons inside your Tailwind app, where it already fits, and use with icons for the places Heroicons does not try to reach: the marketing site, feature illustrations, onboarding screens and sales decks.
The thing to avoid is mixing them inside one small area. As the side-by-side shows, the line weights (1.5px vs 1.75px) and corner shapes differ a little. Side by side in the same toolbar, that difference shows. Spread across different pages, nobody will notice. Our guide to keeping icons consistent has more simple rules like this.
What are the pros and cons of Heroicons and with icons?
Neither set is “better” overall. They are good at different things, and both have honest limits. Here they are in plain words.
What’s great
Hand-tuned tiny sizes. Mini (20px) and Micro (16px) versions are redrawn, not just shrunk, so icons stay crisp in dense tables, chips and small buttons.
Made by the Tailwind team. If your site uses Tailwind CSS, Heroicons matches its look and works with its classes out of the box.
Outline and solid for every icon. Each icon has a matching filled version, which is perfect for showing which tab or button is active.
Stable and mature. The team accepts bug fixes but not new icon requests, and the latest React package (2.2.0) came out in November 2024. Nothing changes under your feet.
Free and simple. MIT licence, no credit needed, plus an official Figma file for designers.
What to keep in mind
Only two looks. Outline and solid are it (Mini and Micro are smaller solid versions). There are no tinted, glossy or hand-drawn styles for a landing page or a slide.
A small set that will not grow much. There are 316 icons, and because new icon requests are not accepted, a missing icon will probably stay missing.
Official packages for React and Vue only. For Svelte, Angular and other frameworks you copy the SVG yourself or rely on unofficial packages.
Little help for AI assistants. We found no official MCP server or llms.txt, so AI tools have to guess icon names.
What’s great
20 styles of every icon. Line, solid and duo for interfaces, plus 17 creative styles such as gloss, glass, sketch, pixel and retro, all from one drawing, so your app, homepage and slides match.
More icons to choose from. 500 icons, about 184 more than Heroicons, each with 20 to 30 hand-picked colour palettes for the multi-colour styles.
Easy for non-developers. Every icon page has Copy image, a PNG download in any colour and size, and an SVG download, plus guides for Google Slides, Canva and more.
More ways to use it in code. Besides React and Vue, there are Svelte, Angular and Solid components, a web component and plain CSS classes.
Built for AI helpers. An MCP server, an llms.txt file and an agent skill help AI assistants pick real icon names.
What to keep in mind
No hand-tuned tiny sizes. Each icon is drawn once at 24px. At 16px the solid style holds up well, but it is not a custom redraw like Heroicons Micro.
Still a focused catalogue, no logos. 500 icons cover everyday needs, but big sets like Lucide have far more, and like Heroicons there are no brand logos.
Newer, with a smaller community. Fewer tutorials and examples exist so far. The creative styles are also meant for 32px or larger, not tiny interface icons.
Who does each one suit? Heroicons is a great fit for developers building a dense Tailwind app in React or Vue who want stable, polished icons at every small size. with icons suits founders, marketers, teachers and small teams who want the same icons in their app, on their homepage and in their slides, or who work outside React and Vue.
So, should you use Heroicons or with icons?
Which one should you pick?
- You want 20 styles from one family, not two.
- You want more icons to pick from (500 vs 316).
- You also make landing pages, slides and docs.
- You use Svelte, Angular, Solid or plain HTML classes.
- You want an MCP server so AI assistants find real icon names.
- You build with Tailwind and want the matching house style.
- You need icons redrawn for 20px and 16px.
- You want a mature, stable set that rarely changes.
Heroicons and with icons are cousins in spirit: small, careful and free. Heroicons spends its effort on sizes, so it shines in tight, dense interfaces. with icons spends its effort on styles, so the same icon can live in your app, your homepage and your next presentation. Compare a few more options in with icons vs Lucide and our guide to icon styles.
Frequently asked questions
Is Heroicons free for commercial use?
Yes. Heroicons is released under the MIT licence, so you can use the icons in commercial websites, apps and products. You do not need a visible credit; keep the licence notice if you redistribute the source code.
How many icons does Heroicons have?
The Heroicons website lists 316 icons. Each one comes in Outline and Solid at 24px, plus Mini (20px) and Micro (16px) versions designed for small spaces.
What is the best Heroicons alternative?
It depends on what you miss. If you like Heroicons’ calm look but want more icons and more styles, with icons gives you 500 icons in 20 matching styles (line, solid, duo and 17 creative styles) under the same MIT licence. If you need many more icons in one outline style, Lucide is bigger, with over 1,600.
Who makes Heroicons?
Heroicons is made by the makers of Tailwind CSS (Tailwind Labs). The website credits Steve Schoger and the Tailwind team for the design.
Does with icons work with Tailwind CSS?
Yes. with icons use currentColor and accept a className, so Tailwind classes such as size-6 and text-rose-500 work the same way they do with Heroicons. Install @withicons/react or @withicons/vue from npm, or copy SVG code from any icon page.
Heroicons vs Lucide: which is better?
Heroicons is smaller (316 icons) and offers solid versions plus hand-tuned 20px and 16px sizes. Lucide is larger (over 1,600 icons) with a single adjustable outline style and packages for many more frameworks. Heroicons suits Tailwind projects; Lucide suits projects that need range.
Sources and notes
- Heroicons website (icon count, styles, licence, checked October 2026)
- Heroicons on GitHub (README, packages, contribution policy)
- npm: @heroicons/react (latest release 2.2.0)
- Heroicons Figma file
- Lucide website (icon count, checked October 2026)
- with icons library (500 icons, 20 styles, 19 categories)
- 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.