sketchyicons
(opens in a new tab)

Hand drawn icons for React

Every glyph is a React component with the props you already pass to Lucide. The import line is the only thing that changes.

Browse the set
feather24 x 24 · 3 paths · v0.5.0
  • d1 M14.38 18.27C13.63 18.36 13.16 19.09 12.69 18.91Q8.84 18.99 4.85 18.61Q5.96 15.16 5.01 11.32C5.27 10.65 5.53 10.54 5.62 10.06Q9.67 7.83 12.33 3.61C13.37 2.33 15.91 1.25 17.74 2.33C19.4 2.43 21.27 3.96 21.84 6.19C21.94 7.93 21.62 11.44 19.94 12.27Q16.33 14.5 14.55 18.41
  • d2 M15.98 7.97Q8.77 14.77 1.81 22.11
  • d3 M17.46 14.92Q13.24 15.56 9.13 14.93
One icon
492 B
Peers
react@^18 || ^19
Runtime dependencies
none
Shape
one per icon
trophy
compass
flame
heart
anvil

In your code

A barrel of 1756 exports would undo your bundler's work, so each icon is its own module and importing two of them costs two of them. Take the whole catalogue and you are at 282 kB; take the twelve an interface actually uses and you are at 2.22 kB.

React
import { House, Star } from "@sketchyicons/react";

<House size={20} />
<Star size={15} color="#2B2521" strokeWidth={1.75} fill="currentColor" />
size
number defaults to 24
color
string defaults to currentColor
strokeWidth
number defaults to 2
absoluteStrokeWidth
boolean defaults to false
fill
string defaults to none

Coming from lucide-react

The geometry here is derived from Lucide, so the names match and the props match. The 247 names Lucide has renamed are exported next to the current ones, which means Home and HelpCircle keep resolving after the swap.

the whole migration
-import { House } from "lucide-react";
+import { House } from "@sketchyicons/react";

Nothing else at the call site moves. Sizes, colours and stroke widths keep the values you already wrote.

1500+ icons, drawn

Every glyph in the set has its own page with the code for React, the sizes it holds at, and the file. 1756 of them, drawn by the same generator that built the package.

Open the full catalogue

93 shown, type to search all of them

Read the installation guide for the peer dependencies and the first icon on screen. Every glyph holds at 15 px, which is the size a real control uses.

The other targets

Why two of them package their icons differently is worked through in One component per icon, except when that is the wrong shape.