Heroicons 2.0 has been released.

Heroicons 2.0 Release:

Tailwind officially releases Heroicons 2.0 with a set of more than 260+ handcrafted SVG icons illustrated from scratch with three distinct styles.

• Outline — line icons with a 1.5px stroke, drawn in a 24px view box.
• Solid — solid icons with filled shapes, drawn in a 24px view box.
• Mini — solid icons with filled shapes, drawn in a 20px view box.

You can check all the icons listed on their official website here. You can use them in the following ways:

Basic Usage: To copy the source for the icon and use it directly in your HTML:

<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

Using React: Firstly, you need to install @heroicons/react from npm and then you can import each icon individually as a React component, like this:

npm install @heroicons/react

import { BeakerIcon } from '@heroicons/react/24/solid'

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

You can get the full list of the React components of icon names here.

Using Vue: Note: Heroicons just started supporting Vue 3. so this library currently works with Vue 3 only.
Firstly, you need to install @heroicons/vue from npm and then you can import each icon individually as a Vue component, like this:

npm install @heroicons/vue

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

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

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

You can get the full list of the Vue components of icon names here.

Icons use an upper camel case naming convention and are always suffixed with the word Icon for both React and Vue components.
Heroicons 2.0 has also provided the official Figma components to use these icons in your Figma project designs. You can find the links here.

To get to know more about other helpful releases, you can check these articles too.

Please follow and like us: