Heroicons

Hand-crafted SVG icon set for UI development, designed for clarity and consistency. Icons are available as raw SVGs or through first-party React and Vue packages with tree-shaking support. Each icon is optimized for use in buttons, navigation, forms, and other interface elements while remaining easy to style via CSS.

Heroicons is maintained by Tailwind Labs, the team behind Tailwind CSS, and is widely adopted across the Tailwind ecosystem. MIT-licensed with no attribution required. The set distinguishes itself from generic icon libraries by offering a cohesive design language that pairs naturally with Tailwind utility classes such as text-gray-500 or size-6, and by providing both outline and solid variants tailored for different UI contexts.

Key capabilities:

• Outline and solid icon variants in multiple sizes: 24x24, 20x20, and 16x16
• First-party React and Vue libraries with per-icon imports for minimal bundle impact
• Raw SVG source for copy-paste into any project or framework
• Color and size controlled via CSS, making icons adaptable to light and dark themes
• Large icon set covering navigation, actions, communication, and common UI patterns

Use cases include building dashboards and admin panels, navigation bars and menus, form controls and buttons, and any application where consistent, professional icons are needed. Developers working with Tailwind CSS often choose Heroicons for seamless integration and visual harmony. The React and Vue packages integrate cleanly with build tools and support TypeScript.