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 setObtainable 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.