React Native / Expo

Icon Forge gives React Native projects local .tsx components backed by react-native-svg. The CLI writes one file per icon plus a barrel index.ts, so imports work like any other local component.

Requires react-native-svg

Install react-native-svg in your app before using generated React Native icons. Expo projects can add it with npx expo install react-native-svg.

Install a pack

From your app root:

npx @icon-forge/cli install acme/brand/core-icons --framework react-native

The CLI writes the generated source into your project:

src/components/icons/core-icons/
├── ArrowLeft.tsx
├── CheckCircle.tsx
├── Home.tsx
├── Settings.tsx
├── ...
└── index.ts

React Native artifacts are generated when a pack is published. Releases published before React Native support do not get backfilled; republish the pack to make it installable with --framework react-native.

Use icons

import { View } from "react-native";
import { ArrowLeft, CheckCircle, Home } from "@/components/icons/core-icons";

export function Toolbar() {
  return (
    <View style={{ flexDirection: "row", gap: 8 }}>
      <ArrowLeft width={20} height={20} />
      <Home width={20} height={20} />
      <CheckCircle width={20} height={20} color="#16a34a" />
    </View>
  );
}

Generated components accept SvgProps from react-native-svg, so width, height, color, accessibility props, and supported SVG presentation props pass through.

Next steps

Installing Packs

CLI options, output structure, and conflict handling.

Read more ->

Config & Lockfile

How iconforge.json and iconforge-lock.json work.

Read more ->