Hand drawn icons for React Native

The same components, drawn on react-native-svg. An app and its marketing site can share a glyph without either one redrawing it.

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: 744 B
Peers: react@^18 || ^19, react-native-svg@>=13
Runtime dependencies: none
Shape: one per icon

trophy

compass

flame

heart

anvil

In your code

React Native has no currentColor, so the colour has to be passed rather than inherited. That is the one line of your call site that differs from the web target, and it is why the examples here always name a colour.

React Native

import { House } from "@sketchyicons/react-native";
import { View } from "react-native";

export function Header() {
  return (
    <View>
      <House size={20} color="#2B2521" />
    </View>
  );
}

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-native

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-native";
+import { House } from "@sketchyicons/react-native";

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 Native, 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.