🛡️ Heroicons

Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required.

🖼️ Icons by @steveschoger 🔗 🖥️ Website by @username_ZAYDEK 🔗 💙 Share on Twitter 🔗

Looking for the official Heroicons website?

Site Features

✨ Dark mode 😎 ✨ Flexible search (search camel-case, kebabCase, space case) ✨ View icons from all variants and versions (includes legacy icons) ✨ Preview icon size and stroke width 💪 ✨ Copy to the clipboard as code or @heroicons 🔗 import ✨ Format as JSX, Strict JSX, and TypeScript JSX 🦾 ✨ Download icons, filenames and extensions are auto-generated from settings ✨ All state is pesisted via search parameters

Technology Stack

heroicons.dev has been around for a while (the first Heroicons website in existence 🤭) and has evolved. The current technology stack is:

🥞 Vite 🔗 🥞 TypeScript 🔗 🥞 React 🔗 🥞 UnoCSS 🔗 🥞 Sass 🔗

Get Started (Vite)

Start the development server:

npm run dev
# Or npx vite dev

Build the production-ready build:

npm run build
# Or npx tsc && npx vite build

Serve the production-ready build:

npm run preview
# Or npx vite preview

License

Licensed as MIT open source.