ComponentsBetter Icon
A better way to display simple SVG icons!
/components/Hero.js
1import BetterIcon from "./BetterIcon";
2
3const Hero = () => {
4 return (
5 <>
6 <section>
7 ...
8 <BetterIcon>
9 <svg
10 xmlns="http://www.w3.org/2000/svg"
11 fill="none"
12 viewBox="0 0 24 24"
13 strokeWidth={1.5}
14 stroke="currentColor"
15 className="h-6 w-6"
16 >
17 <path
18 strokeLinecap="round"
19 strokeLinejoin="round"
20 d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"
21 />
22 </svg>
23 </BetterIcon>
24 ...
25 </section>
26 </>
27 );
28};
29
30export default Hero;
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Lucide
Beautiful & consistent icon toolkit made by the community.
Overflow Design | 4550+ Notion-style Illustrations, Icons and Wallpapers
Over 1350 free and premium Notion-style Illustrations, 3300+ Notion Icons and Notion Wallpapers.
Doodle icons | Figma
Beautiful hand-drawn icons Hand-drawn icons using an icon grid400+ icons with 15 categoriesFree for personal & commercial useNo attribution requiredIcons available in PNG, SVG & figma format Download all the icons here