A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects. Available as basic SVG icons and via first-party React and Vue libraries.
## Basic Usage
The quickest way to use these icons is to simply copy the source for the icon you need from [heroicons.com](https://heroicons.com) and inline it directly into your HTML:
```html
```
Both icon styles are preconfigured to be stylable by setting the `color` CSS property, either manually or using utility classes like `text-gray-500` in a framework like [Tailwind CSS](https://tailwindcss.com).
## React
First, install `@heroicons/react` from npm:
```sh
npm install @heroicons/react
```
Now each icon can be imported individually as a React component:
```js
import { BeakerIcon } from '@heroicons/react/solid'
function MyComponent() {
return (
...
)
}
```
The 24x24 outline icons can be imported from `@heroicons/react/outline`, and the 20x20 solid icons can be imported from `@heroicons/react/solid`.
Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.
[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@heroicons/react/outline/)
## Vue
*Note that this library currently only supports Vue 3.*
First, install `@heroicons/vue` from npm:
```sh
npm install @heroicons/vue
```
Now each icon can be imported individually as a Vue component:
```vue
...
```
The 24x24 outline icons can be imported from `@heroicons/vue/outline`, and the 20x20 solid icons can be imported from `@heroicons/vue/solid`.
Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.
[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@heroicons/vue/outline/)
## License
This library is MIT licensed.
