Heroicons are beautiful hand-crafted SVG icons by the makers of Tailwind CSS. The project hit a significant milestone—with the release of v1.0—which brings some exciting features that’ll make using Heroicons an even better experience:

• Over 450+ icons (solid and outline)
• React and Vue packages
• Figma source file

The easiest way to get started is by copying the SVG code for an icon from the Heroicons website. In addition to using SVG directly, Tailwind now has accompanying NPM packages for Vue and React.

Here’s an example of using a Heroicon icon with Vue:

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
  components: { BeakerIcon }
}
</script>

And here’s the same example using React:

import { BeakerIcon } from '@heroicons/react/outline'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

Lastly, Tailwind released a community Figma file if you want to incorporate Heroicons into your next Figma project.

Learn More

The Heroicons.com website has a searchable interface to browse through all the available icons quickly and copy SVG code. You can also view the source code on GitHub. Make sure to check out the official Tailwind CSS blog post to learn more about the V1 release and get the latest Tailwind updates!