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:

 1// React JS - npm install @heroicons/react
 2import { BeakerIcon } from '@heroicons/react/24/solid'
 3 
 4function MyComponent() {
 5  return (
 6    <div>
 7      <BeakerIcon className="h-6 w-6 text-blue-500"/>
 8      <p>...</p>
 9    </div>
10  )
11}

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

 1<template>
 2  <div>
 3    <BeakerIcon class="h-6 w-6 text-blue-500"/>
 4    <p>...</p>
 5  </div>
 6</template>
 7 
 8<script>
 9// Vue 3 - npm install @heroicons/vue
10import { BeakerIcon } from '@heroicons/vue/24/solid'
11 
12export default {
13  components: { BeakerIcon }
14}
15</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.