Guide · Open source
How to use Heroicons: copy SVGs, install React or Vue icons
Updated · written with AI from the project's own documentation and checked against our catalogue data
Heroicons is a free set of hand-crafted SVG icons made by the team behind Tailwind CSS, released under the MIT license. This guide shows you how to add an icon to a plain HTML page, how to style it with utility classes, and how to import icons as React or Vue components. By the end you will know which method fits your project and which icon styles are available.
Heroiconstailwindlabs/heroicons · ★ 23.9k · MIT Install options & downloads Quick start
- 1Decide your method. Copy inline SVG for plain HTML, or install a package if you use React or Vue.
- 2Install the package. Run npm install @heroicons/react for React or npm install @heroicons/vue for Vue.
- 3Pick an icon set. Choose 24/outline, 24/solid, 20/solid or 16/solid by changing the import path.
- 4Import the icon. Import an icon by its upper camel case name ending in Icon, such as BeakerIcon.
- 5Style with classes. Set size and color with classes such as size-6 and text-blue-500, or with the CSS color property.
- 6Find more icon names. Use the UNPKG file browser linked from the README to look up available icon names.
Copy an icon's SVG into your HTML
The quickest way to use Heroicons is to copy the source for the icon you need from heroicons.com and inline it directly into your HTML. No package install is needed for this method.
Both icon styles are preconfigured to be stylable by setting the color CSS property. You can do this manually or with utility classes such as text-gray-500 in Tailwind CSS.
<svg
class="size-6 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>Use Heroicons in React
Install the React package from npm. Each icon can then be imported individually as a React component. Icons are always suffixed with the word Icon and use upper camel case naming.
- Choose the set by changing the import path: @heroicons/react/24/outline, @heroicons/react/24/solid, @heroicons/react/20/solid, or @heroicons/react/16/solid.
- Style the icon with className, for example size-6 text-blue-500.
- Browse the full list of icon names on UNPKG using the link on the official site.
npm install @heroicons/reactUse Heroicons in Vue
Vue developers can install the official Vue package and import icons as components inside a single-file component. The naming and set structure match the React package.
- Import from @heroicons/vue/24/outline, @heroicons/vue/24/solid, @heroicons/vue/20/solid, or @heroicons/vue/16/solid.
- Apply styling with the class attribute, for example size-6 text-blue-500.
- Browse the full list of icon names on UNPKG using the link on the official site.
npm install @heroicons/vueChoose the right icon style and size
The package provides several styles. The 24x24 outline icons and 24x24 solid icons are the larger sets, while the 20x20 solid and 16x16 solid icons are smaller variants for compact interfaces.
Use the outline style for a lighter look and the solid style for more emphasis. Both respond to the color property, so you can match them to your existing text colors.
Know what the project accepts and does not accept
The README says contributions are currently limited to bug fixes, such as incorrect TypeScript types or an icon exported with a fill instead of a stroke. New icons and support for other frameworks such as Svelte or SolidJS are not being accepted.
If you need a framework or icon type that Heroicons does not cover, the README suggests releasing your own icons or packages in your own library.
What people use it for
- Adding inline icons to a plain HTML page by copying the SVG code.
- Building a React interface where icons are imported as components and colored with Tailwind classes.
- Creating a Vue single-file component that uses a solid beaker icon in a brand color.
- Picking a consistent icon set for a design system where icons need a uniform look.
Frequently asked questions
Is Heroicons free to use?
Yes. The README states that Heroicons is MIT licensed, and the project's LICENSE file is linked from the README. The MIT license lets you use the icons in your projects under its terms.
How do I install Heroicons?
For React, run npm install @heroicons/react. For Vue, run npm install @heroicons/vue. You can also skip installation and copy the SVG code for an icon from heroicons.com directly into your HTML.
What are the requirements for using Heroicons?
The README lists Node.js and npm as prerequisites only if you use the React or Vue packages. If you copy inline SVG, the README does not list any requirement.
Can I use Heroicons without Tailwind CSS?
Yes. The icons are preconfigured to be stylable by setting the color CSS property, either manually or with Tailwind utility classes. The README mentions Tailwind as one option, not a requirement.
Does Heroicons support Svelte or Angular?
The README mentions official packages only for React and Vue. It states that contributions adding support for other frameworks like Svelte or SolidJS are not being accepted, so you would need to create your own package for those.
How does Heroicons compare to Lucide or Font Awesome?
The README does not compare Heroicons with other libraries, and it does not state an icon count. Lucide, Feather Icons, Tabler Icons and Font Awesome are comparable projects you can review alongside Heroicons to decide which set fits your needs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Heroicons suits web developers who want clean, consistent icons, especially teams already using Tailwind CSS or building with React or Vue. It is less suited to anyone who needs a very large or specialized icon library, or who uses a framework other than React or Vue and wants an official package.
Install options & downloads