Free SVG Icon Packs for Vibe-Coded Projects

Any vibes project will require icons. Buttons, navigation, indicators, social media — they’re essential. I can’t even remember how often I’ve said “add a search icon to the header” only to have my agent start generating some random inline SVG path based on its memories. Always incorrect, often very incorrect, or maybe technically correct but clearly created by someone with zero experience using browsers.

I keep a small collection of icon repositories that I copy and paste into every project context. My agent can read the READMEs and figure out the package name and import style, ensuring success every time. These four collections have a wide range of options, from simple stroked icons to brand logos to 6,000+ icon design systems.

You know this one. With over 2,000 icons available in the free plan, it has just about everything you could possibly need for standard UI elements — arrows, social media, shopping, communications, file types. Solid, regular, and brand styles are included. The npm package includes the icons as SVG sprites and as a web font, but my agent prefers the npm package since it allows it to import individual icons.

A fork of Feather Icons that has become a monster. With over 1,600+ icons, all exactly 24x24 pixels with 2px strokes. The style guide is amazingly cohesive. Every icon fits together perfectly. If you want your UI to look polished instead of pieced together, Lucide is your go-to choice. Excellent React support, Figma & VS Code plugins. Check out all the icons here: lucide.dev/icons.

6,000+ icons, all MIT licensed, all perfect 24x24 pixels. This is a big collection, but everything fits together nicely. Same stroke width, same corner radius, same style. Check out all the icons here: tabler.io/icons. Filter by category and click to copy the SVG or React import statement. Also includes a Figma file in the repo if your agent needs to do some design too!

These aren’t UI icons, these are brand logos. Over 3,400 SVG logos for tech products, social media, dev tools, etc. Basically every company you could possibly want to link to. Each icon is normalized to a single path with the official brand color. Perfect for footers, tech stacks, social media, or anywhere you need a ‘built with X’ section. Licensed under CC0 so you don’t have to think about it.

1How to add icons to your project

Copy any of the GitHub URLs above into your project context and tell your agent what you’re looking for. Or install them manually using the commands in each repo’s README:

npm install lucide-react

npm install @tabler/icons-react

npm install @fortawesome/fontawesome-free

<img src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/github.svg" width="32" />

2SVG icons free for commercial use

All four of these collections are free for commercial use. Lucide is ISC licensed, Tabler is MIT licensed, Font Awesome Free is MIT + Creative Commons (no attribution needed), and Simple Icons is licensed under CC0 for the SVG files (the brand logos are trademarked by the companies that own them, but the icon files are public domain). You might want to glance over the LICENSE files in each repo if you’re planning on selling anything.