Heroicons: Free SVG Icons from the Makers of Tailwind CSS
Heroicons is a free MIT-licensed collection of hand-crafted SVG icons from the Tailwind CSS team. Browse heroicons.com, copy any icon's SVG code directly, no install needed. Works in any web project.
Most vibe-coded apps go through this phase where every button has a text label and the whole thing looks like a wireframe. Not because the idea is bad — but because icons take weirdly long to sort out. You either tell the agent to draw something (and it draws something slightly off) or you spend time hunting for a library that fits.
Heroicons is made by the Tailwind CSS team — the same people who built the utility CSS framework used in basically every modern web project. The icons are hand-crafted SVGs in two styles: outline and solid. Both are available for free, MIT licensed. No attribution needed.
Source
tailwindlabs/heroicons
★ 23,792JavaScript
There's a website for it: heroicons.com. You can browse the whole collection there, search by name, and when you find the icon you want — click the SVG icon to copy the raw SVG code to clipboard. That's it. Paste it to your agent: "Use this SVG as the icon in the header search button." The agent understands it right away and slots it in.
How to use Heroicons without installing anything
The README says "The quickest way to use these icons is to simply copy the source for the icon you need from heroicons.com and inline it directly into your HTML". No npm, no package, no build step. Just copy the SVG code and put it where you need it. The icon scales with CSS like any other element.
"Go to heroicons.com and find the outline version of the search icon. Copy its SVG and add it to the left side of the search input field. Size: 20px, color: current text color." Or more simply: "Use heroicons for all the icons in this app. Pick the outline versions."
Free SVG icons for commercial use
All Heroicons are MIT licensed — you can use them in personal projects, client work, sold products, anything. No cost, no attribution required. The icons are simple geometric shapes, not brand logos, so there's no trademark issue either.
SVG icon library vs copying icons one by one
If you're building a bigger project and want your agent to handle all the icons consistently, you can also clone the repo. All icons are just SVG files in folders named by style and size. Your agent can pull from the folder directly and apply icons by name. The folder structure is: `optimized/24/outline/` and `optimized/24/solid/` for the 24px versions.
git clone https://github.com/tailwindlabs/heroicons.git # outline icons: heroicons/optimized/24/outline/ # solid icons: heroicons/optimized/24/solid/
A polished collection of free SVG icons from the Tailwind CSS team. Browse and copy at heroicons.com — no install. Or clone and point your agent at the folder. MIT licensed, two visual styles (outline and solid), clean geometric shapes that work at any size. Your agent already knows this collection by name, so you can just say "use a heroicon for this" and it figures out the rest.
Source: github.com
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →▌ Related guides
Author
Evgenii Arsentev
PhD · AI transformation executive
Articles · Latest articles