Installation

One package per framework. Each carries its own peer dependencies, so a Vue project never sees React in its tree.

Install

You are looking at React. Change that in the sidebar and every command and snippet on this page follows. There is also a page for React with the migration from lucide-react.

npm, the package

npm i @sketchyicons/react

The peer dependencies are not bundled, so your versions win. If they are not in the project yet, install them in the same breath:

with peer dependencies

npm i @sketchyicons/react react@^18 || ^19

Peer dependencies

react@^18 || ^19

There are no runtime dependencies beyond those. Nothing else is pulled into your tree.

Installing this with an agent

This set is newer than every model's training data, so an agent asked to add it will guess at the API and get it wrong. Hand it these facts instead. The prompt follows the package and the manager you picked above.

Use it

Import the icons you need by name. Each one is its own module, so two imports cost two icons and not the catalogue.

React

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

<House size={20} />
<Star size={15} color="#2B2521" strokeWidth={1.75} fill="currentColor" />

Every icon is its own module, so importing two of them costs two of them. All 1756 come to 282 kB.
Stroke colour comes from currentColor unless you pass color, which means the icon follows the text it sits next to.

Sizing

The default is 24 pixels at stroke width 2, which is where the glyphs were drawn. Two things are worth knowing beyond that.

Below 20 pixels, keep the stroke at 2. A thinner stroke on a wobbly path is the fastest way to turn an icon into mud, and 15 pixels is the size a real control uses. Above 32, drop to 1.5 or 1.75: the hand becomes obvious at that scale and a heavy stroke makes it look inflated rather than drawn.

The legibility strip on the home page renders the same glyphs at 15, 20, 24, 40 pixels if you want to see the difference before committing.

Everything else

Names, props and defaults match the set this one derives from, so its reference material applies here unchanged. Read Lucide's guide (opens in a new tab) and substitute the package name as you go.

Coming from Lucide

Swap the package name. The props are the same, and the 247 names Lucide has renamed are exported alongside the new ones, so Home, HelpCircle and MoreHorizontal still resolve. Nothing at the call site moves.

the whole migration

-import { Home, HelpCircle } from "lucide-react";
+import { Home, HelpCircle } from "@sketchyicons/react";

The old names are aliases of the current ones, not copies, so importing both costs one icon. @sketchyicons/data exports the full list as renamed if you would rather rewrite them.

Find an icon

1500+ of them, searchable, with the size and stroke controls so you can check a glyph at the size you will actually ship it.