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:

We just launched Heroicons v2.0! 🎉

🤩 All new look! 260 icons redrawn from scratch
🤏 Thinner 1.5px stoke
✨ New 24px solid set

Available as first-party React and Vue libraries and official Figma components.

Check 'em out 👉🏻https://t.co/jIelWqaQSN

— Steve Schoger (@steveschoger) August 23, 2022

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 (
    <div>
      <BeakerIcon className="h-6 w-6 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

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

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

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.