zaydek / heroicons.dev

Web viewer for Heroicons (V2 and V1)

🛡️ 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.