React + Vue Libraries
In addition to grabbing the icons you need directly from the website, you can now install our official React and Vue libraries for quick and easy access to each icon as a dedicated component.
Here's what it looks like with React for example:
import { BeakerIcon } from "@heroicons/react/solid";function MyComponent() { return ( <div> <BeakerIcon className="h-5 w-5 text-blue-500" /> <p>...</p> </div> );}Check out the documentation on GitHub to learn more.
Figma Assets
We've also published an official Heroicons Figma file on our new Figma Community page!
It includes all the icons from Heroicons as individual Figma components so you can easily use them in your projects without having to manually import each SVG.
Want to start playing with it? Visit the Heroicons website →