What is sketchyicons?
An icon set that looks drawn without anyone having drawn it. It takes settled geometry and adds a hand to it with arithmetic, the same way every time.
The idea
Getting 1500+ glyphs right from nothing is months of work, and Lucide already got them right. What they do not have is a hand. So the shapes come from there, and the hand is added by a generator: every straight run bows into a quadratic with an off centre control point, and every coordinate drifts a fraction of a unit.
The drift is seeded from the icon name. That is the part that matters. A rerun of the generator produces byte identical files, so an icon never changes shape between your machine, a colleague's, and CI, and a rebuild never shows up as a diff.
feather
The blue line is the source geometry, the dark one is the result. Same coordinates, moved. This glyph is on the loosest setting, so the gap is at its widest.
What it is not
- Not hand drawn. Nobody sat down with a pen. Calling it hand drawn is a description of the result, not the process.
- Not random. Nothing is generated at runtime and nothing is generated at build time either. The paths are committed files.
- Not affiliated with Lucide. The geometry is derived from their work under the ISC licence and the name is their trademark. This is a separate project.
The only thing that changes is the line
Icon names, component names, props and defaults are the ones you already know. That is deliberate: it makes adoption an import line rather than a migration, and it means the reference material you already use still applies.
So this guide covers the two things that are actually different, which are the packages and the small size behaviour. For everything the two sets share, including the full prop reference, their documentation is better than a copy of it would be.
@sketchyicons/react for lucide-react as you read and it holds.It has to hold at 15 pixels
A wobbly stroke turns to mud before a straight one does, so how much hand a glyph takes is not a single setting. Chrome is quiet, content has a hand: everybody knows exactly what a chevron looks like, so a shaky one reads as broken, while a feather can wander and still look deliberate.
Each glyph is sorted into one of three settings by the generator, and the drift a segment takes is capped by its own length. A 0.01 unit line cannot move 0.8 units and still be that line.