{` .showcase-piece { opacity: 1 !important; animation: none !important; } .hero-icon-cell:not([data-scene="0"]) { display: none !important; } .hero-icon-cell[data-scene="0"] { opacity: 1 !important; } .hero-prompt-text::after { display: none !important; } `}

Custom icons, made to order.

From prompt to production in under five minutes.

Home

Hop

Rocket

Anchor

Knife

Waveform

Barrel

Planet

Lighthouse

Whisk

Headphones

Inbox

Tap

Satellite

Helm

Flame

Fader

Shield

Pint

Telescope

Wave

Pot

Microphone

Calendar

Grain

Asteroid

Buoy

Timer

Speaker

Lightning

Bottle

Orbit

Compass

Thermometer

Vinyl

Layers

Growler

Constellation

Sail

Rolling Pin

Equalizer

Globe

Fermenter

Helmet

Knot

Plate

Metronome

Start generating Docs

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

Generated output

├─ src/components/icons/core-icons/
│  ├─ Home.tsx
│  ├─ Search.tsx
│  ├─ Billing.tsx
│  ├─ MemberInvite.tsx
│  ├─ ReleaseNotes.tsx
│  └─ index.ts
├─ iconforge.json
├─ iconforge-lock.json
└─ package.json

├─ src/components/icons/core-icons/
│  ├─ Home.vue
│  ├─ Search.vue
│  ├─ Billing.vue
│  ├─ MemberInvite.vue
│  ├─ ReleaseNotes.vue
│  └─ index.ts
├─ iconforge.json
├─ iconforge-lock.json
└─ package.json

├─ src/components/icons/core-icons/
│  ├─ Home.tsx
│  ├─ Search.tsx
│  ├─ Billing.tsx
│  ├─ MemberInvite.tsx
│  ├─ ReleaseNotes.tsx
│  └─ index.ts
├─ iconforge.json
├─ iconforge-lock.json
└─ package.json

import { Home, Search, Billing }
  from "@/components/icons/core-icons";

export function SideNav() {
  return (
    <nav className="flex flex-col gap-2">
      <Home className="h-5 w-5" />
      <Search className="h-5 w-5" />
      <Billing className="h-5 w-5" />
    </nav>
  );
}

<script setup>
import { Home, Search, Billing }
  from "@/components/icons/core-icons";
</script>

<template>
  <nav class="flex flex-col gap-2">
    <Home class="h-5 w-5" />
    <Search class="h-5 w-5" />
    <Billing class="h-5 w-5" />
  </nav>
</template>

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

export function SideNav() {
  return (
    <View style={{ gap: 8 }}>
      <Home width={20} height={20} />
      <Search width={20} height={20} />
      <Billing width={20} height={20} />
    </View>
  );
}

Forge the first version your team can review, name, and install.

Generate a coherent icon set before the next handoff.

Start generating React, Vue, or React Native