Heroicons 2.0 are here


August 26th, 2022

Heroicons 2.0 are here

The makers of Tailwind CSS released Heroicons 2.0, a set of 264 hand-crafted SVG icons for the web. These icons are redrawn from scratch and feature a 24px solid set:

You can either copy the SVG straight from the Heroicons website into your project, or use the first-party React and Vue libraries:

// React JS - npm install @heroicons/react
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
<BeakerIcon className="h-6 w-6 text-blue-500"/>

And here's what the Vue 3 integration looks like:

<BeakerIcon class="h-6 w-6 text-blue-500"/>
// Vue 3 - npm install @heroicons/vue
import { BeakerIcon } from '@heroicons/vue/24/solid'
export default {
components: { BeakerIcon }

Heroicons 2.0 also has a Figma file, which you can use in your design projects. Get started today by checking them out on heroicons.com.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.