Installation

Install

You are looking at React. Change that in the sidebar and every command and snippet on this page follows.

npm i @sketchyicons/react

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.

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.

import { Feather, Compass } from "@sketchyicons/react";

export function Toolbar() {
  return (
    <div>
      <Feather size={20} />
      <Compass size={20} strokeWidth={1.75} />
    </div>
  );
}

• Every icon is its own module, so importing two of them costs two of them.
• 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.