Tailwind CSS home page
Go back

Heroicons v1.0

Date

Just over a year ago we released the very first version of Heroicons, which is a set of beautiful UI icons we designed alongside Tailwind UI. Since then we’ve added tons of new icons, and designed and launched a dedicated web experience.

Today we’re excited to finally release Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets.

mdx component

​
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 →