Unicon

---

name: unicon

description: Help users add icons to their projects using the Unicon icon library. Unicon provides 19,000+ icons from Lucide, Phosphor, Hugeicons, Heroicons, Tabler, Feather, Remix, Simple Icons (brand logos), and Iconoir. Use when adding icons to React, Vue, Svelte, or web projects; using the unicon CLI to search, get, or bundle icons; setting up .uniconrc.json config; generating tree-shakeable icon components; using the Unicon API; or converting between icon formats.

license: MIT

metadata:

author: webrenew

version: "0.2.0"

website: https://unicon.sh

repository: https://github.com/WebRenew/unicon

openclaw:

emoji: "🦄"

requires:

bins: ["node"]

install:

- type: node

package: "@webrenew/unicon"

global: true

---

# Unicon

Unicon is a unified icon library providing 19,000+ icons from 9 popular libraries. Unlike traditional npm packages that bundle thousands of icons, Unicon generates only the icons you need.

Quick Start

# Install CLI globally
npm install -g @webrenew/unicon

# Or use directly with npx
npx @webrenew/unicon search "dashboard"

Core Commands

| Command | Description |

|---------|-------------|

| `unicon search <query>` | AI-powered semantic search (supports `--pick` for interactive selection) |

| `unicon get <name>` | Get single icon to stdout, file, or clipboard (`--copy`) |

| `unicon info <name>` | Show detailed icon information |

| `unicon preview <name>` | ASCII art preview in terminal |

| `unicon bundle` | Bundle multiple icons (supports `--stars` for favorites) |

| `unicon init` | Create .uniconrc.json config (`--interactive` for wizard) |

| `unicon sync` | Regenerate bundles (`--watch` for auto-sync) |

| `unicon add <name>` | Add bundle to config |

| `unicon star <name>` | Add icon to favorites |

| `unicon audit` | Find unused/missing icons in project |

| `unicon sources` | List available icon libraries |

| `unicon categories` | List icon categories |

| `unicon cache` | Manage local cache |

| `unicon skill` | Install AI assistant skills |

Output Formats

| Format | Extension | Use Case |

|--------|-----------|----------|

| `react` | `.tsx` | React/Next.js (auto-detected) |

| `vue` | `.vue` | Vue 3 SFC (auto-detected) |

| `svelte` | `.svelte` | Svelte components (auto-detected) |

| `svg` | `.svg` | Raw SVG markup |

| `json` | `.json` | Data/programmatic use |

**Note:** CLI auto-detects your framework from `package.json` and uses the appropriate format.

Icon Sources

| Source | Icons | Description |

|--------|-------|-------------|

| `lucide` | 1,900+ | Beautiful & consistent |

| `phosphor` | 1,500+ | 6 weights available |

| `hugeicons` | 1,800+ | Modern outlined icons |

| `heroicons` | 292 | Tailwind Labs |

| `tabler` | 4,600+ | Pixel-perfect stroke |

| `feather` | 287 | Simple and clean |

| `remix` | 2,800+ | Multiple categories |

| `simple-icons` | 3,300+ | Brand logos |

| `iconoir` | 1,600+ | Modern outlined icons |

Common Workflows

Add Icons to a React Project

# 1. Initialize config (interactive wizard)
unicon init --interactive

# 2. Search for icons interactively
unicon search "navigation arrows" --pick

# 3. Add bundle to config
unicon add nav --query "arrow chevron menu"

# 4. Generate components
unicon sync

# 5. Import and use
# import { ArrowRight, Menu } from "./src/icons/nav"

Get a Single Icon Quickly

# Output to stdout (auto-detects framework)
unicon get home

# Copy to clipboard directly
unicon get home --copy

# Save to file
unicon get settings --format react -o ./Settings.tsx

# Different framework
unicon get home --format vue -o ./Home.vue

Interactive Search with Selection

# Search and pick icons interactively
unicon search "dashboard" --pick

# Then choose action: copy, save, star, or create bundle

Bundle by Category

# Bundle all dashboard icons (tree-shakeable by default)
unicon bundle --category Dashboards -o ./src/icons

# Bundle specific icons by search
unicon bundle --query "social media" --format svg -o ./public/icons

# Bundle all favorited icons
unicon bundle --stars -o ./src/icons/favorites

# Single file mode (not tree-shakeable)
unicon bundle --query "ui" --single-file -o ./icons.tsx

Favorites System

# Star icons for later
unicon star home
unicon star settings
unicon star user

# Bundle all starred icons
unicon bundle --stars -o ./src/icons/favorites

# View favorites
unicon favorites

Watch Mode for Development

# Auto-regenerate when config changes
unicon sync --watch

Audit Project Usage

# Find unused bundled icons and missing imports
unicon audit

Preview Icons in Terminal

# ASCII art preview
unicon preview home

# Custom size
unicon preview star --width 24

Tree-Shaking Benefits

Unlike `npm install lucide-react` which downloads thousands of icons:

Web Interface

Browse and copy icons at: https://unicon.sh

References

AI Assistant Integration

Install Unicon skills for AI coding assistants:

# List supported assistants
unicon skill --list

# Install for specific assistant
unicon skill --ide claude      # Claude Code
unicon skill --ide cursor      # Cursor
unicon skill --ide windsurf    # Windsurf

# Install for all supported assistants
unicon skill --all

Supported AI Assistants

| IDE | Directory |

|-----|-----------|

| Claude Code | `.claude/skills/unicon/SKILL.md` |

| Cursor | `.cursor/rules/unicon.mdc` |

| Windsurf | `.windsurf/rules/unicon.md` |

| Agent | `.agent/rules/unicon.md` |

| Antigravity | `.antigravity/rules/unicon.md` |

| OpenCode | `.opencode/rules/unicon.md` |

| Codex | `.codex/unicon.md` |

| Aider | `.aider/rules/unicon.md` |

Once installed, ask your AI assistant: "Add a home icon to my project"

Cache

Icons are cached locally at `~/.unicon/cache` for 24 hours:

unicon cache --stats   # Show cache info
unicon cache --clear   # Clear cache