Heroicons 2.0 are right here | Laravel Information

The makers of Tailwind CSS launched Heroicons 2.0, a set of 264 hand-crafted SVG icons for the net. These icons are redrawn from scratch and have a 24px stable set:

We simply launched Heroicons v2.0! 🎉

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

Obtainable as first-party React and Vue libraries and official Figma parts.

Verify ’em out 👉🏻https://t.co/jIelWqaQSN

— Steve Schoger (@steveschoger) August 23, 2022

You may both copy the SVG straight from the Heroicons web site into your undertaking, or use the first-party React and Vue libraries:

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

And here is what the Vue 3 integration seems to be 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 set up @heroicons/vue
10import { BeakerIcon } from '@heroicons/vue/24/stable'
11 
12export default {
13  parts: { BeakerIcon }
14}
15</script>

Heroicons 2.0 additionally has a Figma file, which you need to use in your design initiatives. Get began immediately by checking them out on heroicons.com.