Heroicons

Beautiful hand-crafted SVG icons for modern web UIs, created by the makers of Tailwind CSS.

🚀 Overview

Heroicons is a free collection of 316 high-quality, hand-crafted SVG icons designed specifically for UI development in web projects.

It solves the common problem developers face when sourcing consistent, scalable, and aesthetically pleasing icons that integrate seamlessly with modern frameworks like Tailwind CSS, eliminating the need to create or hunt for icons manually.

This project is built for web developers, UI/UX designers, and teams using Tailwind CSS, React, or Vue who need reliable visual assets.

The Tailwind CSS team created Heroicons to provide a perfect visual companion to their utility-first CSS framework, ensuring icons match the clean, modern style.

✨ Key Features

316 beautifully crafted SVG icons covering categories like UI elements, navigation, actions, communication, and more (what it does: provides comprehensive coverage; why: saves time on icon hunting)
Outline style with precise 1.5px stroke width for crisp rendering at any size (scalable without loss of quality)
Official first-party libraries for React and Vue (@heroicons/react, @heroicons/vue) for easy npm installation and component usage
MIT license allowing free use, modification, and distribution in commercial projects

🛠 Tech Stack

Frontend: Next.js, React, Tailwind CSS, Headless UI
Backend: N/A (static site and icon library)
Database: N/A
Auth: N/A
Hosting: Vercel, Cloudflare

👥 Who Is This For?

This project is useful for:

Developers who want free, high-quality MIT-licensed SVG icons for their web apps
Teams looking for Tailwind CSS-compatible UI assets
Indie makers building projects with React or Vue frameworks

📸 Screenshots / Demo

Live demo: https://heroicons.com
GitHub: https://github.com/tailwindlabs/heroicons

🔥 Project Status

🟡 Maintained

Last updated: 2025-09-18

❓ FAQ

Is this project free?

Yes — Open Source under the permissive MIT license. (Fully free for personal and commercial use.)

Is the source code available?

Yes — https://github.com/tailwindlabs/heroicons

Can I contribute?

Yes, but limited to bug fixes like icon alignment, TypeScript types, or rendering issues. No new icons or support for additional frameworks (e.g., Svelte). Check CONTRIBUTING.md, open issues, or submit PRs.