Introducing Heroicons: Free SVG icons designed by the team behind Tailwind CSS.
Heroicons is a set of beautifully crafted icons made by the creators of Tailwind CSS. You can access heroicons.com, copy & paste the SVG code of any icon you want without installing it. It’s available for any web application.
Often in vibe coded apps, we see the stage where everything is just a wireframe with text labels on buttons. Because ideas are often good, but icons are just hard to figure out. Either you have to ask your agent to render something, which renders incorrectly or you spend too much time searching for the right library.
Heroicons are created by the Tailwind CSS team. They are the ones who created the utility first CSS framework used in almost every web app. These icons are handmade SVGs. There are two kinds of styles — outline and solid. Both are freely available under an MIT license. Nothing else.
Source
tailwindlabs/heroicons
★ 23,792JavaScript
You can check out their website here — heroicons.com. On the website, you can view all the icons, search for icons, and once you find what you’re looking for. Click on the SVG icon to copy the SVG code to your clipboard. That’s it. You can then send it to your agent as follows: “Use this SVG as the icon in the header search button.” Your agent will immediately understand and place the icon for you.
How to use Heroicons without installing anything
As per their readme: “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”. Nothing to npm or package or even build. Simply copy the SVG code and paste it wherever you need it. You can scale the icon using CSS just 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 of the Heroicons are MIT licensed, meaning you can use them in your personal projects, client projects, selling your product, pretty much whatever you want. You don’t have to pay anything or even mention them anywhere. The reason is the icons are basic shapes that don’t resemble any brand logo. So they can’t have copyright issues.
SVG icon library vs copying icons one by one
If you’re making a large application and you want your agent to make all the icon decisions, you can clone the repo. The icons are stored as SVG files and are organised by styles and sizes. Your agent can fetch from the folder and start rendering icons by name. The folder structure is: `optimized/24/outline/` and `optimized/24/solid/` for 24px icons.
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 · Chief Executive Officer, digital health
Articles · Latest articles