Quick Start

This guide walks through the whole loop: setting up a workspace, generating icons, curating a pack, publishing it, and installing the components into a real project.

Set up your workspace

After signing up and logging in at app.iconforge.ai/login, you land on the app root at /.

1. Create an organization (if you don’t have one). This is your top-level namespace — typically your company, team, or brand name.
2. Open the organization you want to work in. Its home view is where projects live.
3. Create a project inside the org. Projects group related icon packs. Think of a project as a product or client.
4. Create an icon pack inside the project. This is what you’ll eventually publish and install.

Your pack now has a three-part identifier built from these names:

your-org / your-project / your-pack

This is the install path developers will use later.

Generate icon candidates

Open your pack to enter the workspace. You’ll see two main areas:

• The scratchpad (center) — a grid of all your generated and uploaded icons
• The pack panel (right sidebar) — where you assemble the final icon pack

To start generating:

1. Pick or create a style — this controls the visual direction (line weight, fill, corners, etc.)
2. Describe the icons you need — short labels like “home”, “settings gear”, “left arrow”
3. Hit generate

Candidates appear in the scratchpad. Generate as many as you want — nothing here ships until you explicitly add it to the pack.

Curate your pack

Browse the scratchpad and find icons you like. When you find a good one, add it to the pack. This creates a named slot in the pack panel — for example, arrow-left or check-circle.

The slot name is what developers will import as a component, so pick clear, stable names.

Keep iterating:

• Generate more candidates if you need better options
• Swap a slot’s icon for a better candidate
• Rename slots before publishing if the auto-generated names aren’t right

Publish

When the pack feels ready, hit Publish. This snapshots every assigned slot into an immutable release.

• Only assigned slots are included
• Each release gets a unique 12-character hash
• If nothing material changed since the last publish, Icon Forge reuses the existing release instead of minting a new one
• The pack panel keeps the latest published release visible so you can confirm what developers should install

After publishing, the pack is live and installable.

Install with the CLI

Switch to your codebase. From the project root:

React

npx @icon-forge/cli install your-org/your-project/your-pack --framework react

Vue

npx @icon-forge/cli install your-org/your-project/your-pack --framework vue

React Native / Expo

npx @icon-forge/cli install your-org/your-project/your-pack --framework react-native

Since this is the first install, the CLI also saves your framework and output directory to iconforge.json so you won’t need to pass them again on future installs.

For React Native / Expo apps, install react-native-svg before using generated icons:

npx expo install react-native-svg

The CLI fetches the published manifest, downloads the components, and writes them to your project:

src/components/icons/your-pack/
├── ArrowLeft.tsx      # or .vue for Vue
├── CheckCircle.tsx
├── Home.tsx
├── Settings.tsx
├── ...
└── index.ts

It also creates two tracking files at the project root:

• iconforge.json — your install config (framework, output dir, which packs you’re tracking)
• iconforge-lock.json — exact record of what’s installed (versions, file hashes)

Commit both of these.

Use the icons

Import them like any other local component:

React

import { Home, ArrowLeft, CheckCircle } from "@/components/icons/your-pack";

export function Nav() {
  return (
    <nav className="flex items-center gap-2">
      <ArrowLeft className="h-5 w-5" />
      <Home className="h-5 w-5" />
      <CheckCircle className="h-5 w-5 text-green-600" />
    </nav>
  );
}

Vue

<script setup lang="ts">
import { Home, ArrowLeft, CheckCircle } from "@/components/icons/your-pack";
</script>

<template>
  <nav class="flex items-center gap-2">
    <ArrowLeft class="h-5 w-5" />
    <Home class="h-5 w-5" />
    <CheckCircle class="h-5 w-5 text-green-600" />
  </nav>
</template>

React Native / Expo

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

export function Nav() {
  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>
  );
}

React and Vue icons default to currentColor and 1em size. React Native icons default to 24 points. Standard SVG props pass through on web targets, and React Native components accept react-native-svg props like width, height, and color.

Keep it updated

When the design team publishes a new version of the pack, developers rerun the install:

npx @icon-forge/cli install your-org/your-project/your-pack

The CLI pulls the latest release and replaces the tracked files. The framework is already saved in iconforge.json from the first install, so you don’t need to pass it again.

If you need to lock to a specific release, you can pin a version hash — see Updating & Pinning.

What’s next

The Workspace

How the scratchpad and pack panel work in detail.

Read more →

Styles & Generation

Controlling the visual direction of generated icons.

Read more →

Publishing

Namespaces, releases, and what gets frozen.

Read more →

Installing Packs

CLI options, output structure, and conflict handling.

Read more →