@webrenew/unicon

Unicon CLI

Search and bundle icons from 9 libraries via command line. Define your icon sets once, regenerate anytime with a single command.

Installation

Install globally

npm install -g @webrenew/unicon

Or use directly with npx:

npx @webrenew/unicon search "dashboard"

Commands

unicon search <query>

Search for icons by name, keyword, or concept. Uses AI-powered semantic search for better results.

unicon search "settings gear"
unicon search "dashboard" --category Dashboards
unicon search "arrow" --source lucide --limit 10

unicon get <name>

Get a single icon and output to stdout. Perfect for piping to clipboard or a file.

unicon get home
unicon get home --format vue
unicon get settings --format svelte -o ./settings.svelte

unicon info <name>

Show detailed information about an icon including source, category, tags, and viewBox.

unicon info home
unicon info arrow-right --source phosphor

unicon bundle

Bundle icons into tree-shakeable components. Creates one file per icon by default for optimal bundling.

unicon bundle --category Dashboards -o ./icons
unicon bundle --query "home" --format vue -o ./icons
unicon bundle --format svg --single-file -o ./all.svg

unicon init

Initialize a .uniconrc.json config file in your project with example bundle configurations.

unicon init
unicon init --force  # Overwrite existing

unicon sync

Generate all bundles defined in your .uniconrc.json config file.

unicon sync
unicon sync --name dashboard  # Sync specific bundle
unicon sync --dry-run         # Preview changes

unicon add <name>

Add a new bundle configuration to your .uniconrc.json file.

unicon add social --category Social
unicon add nav --query "arrow menu" --limit 30
unicon add files --source lucide --format vue

unicon categories

List all available icon categories.

unicon categories
unicon categories --json

unicon preview <name>

Show ASCII art preview of an icon directly in the terminal.

unicon preview home
unicon preview star --width 24 --height 24
unicon preview arrow --source phosphor

unicon sources

List all 8 available icon libraries with version info and icon counts.

unicon sources
unicon sources --json

unicon cache

Manage local cache for offline use. Icons are cached for 24 hours.

unicon cache --stats  # Show cache info
unicon cache --clear  # Clear all cached data

Typical Workflow

Initialize config

unicon init

Search for icons you need

unicon search "dashboard"

Add bundles to your config

unicon add dashboard --category Dashboards

Generate all bundles

unicon sync

✓

Import and use

import { Home, Settings } from "./icons/dashboard"

Config File

Define your icon bundles in .uniconrc.json and regenerate them anytime with unicon sync.

.uniconrc.json

{
  "bundles": [
    {
      "name": "dashboard",
      "category": "Dashboards",
      "limit": 50,
      "format": "react",
      "output": "./src/icons/dashboard.tsx"
    },
    {
      "name": "navigation",
      "query": "arrow chevron menu home",
      "limit": 30,
      "format": "react", 
      "output": "./src/icons/navigation.tsx"
    },
    {
      "name": "social",
      "category": "Social",
      "source": "phosphor",
      "format": "svg",
      "output": "./public/icons/social.svg"
    }
  ]
}

Output Formats

react

TypeScript React components.

.tsx

vue

Vue 3 SFC components.

.vue

svelte

Svelte components.

.svelte

svg

Raw SVG markup.

.svg

json

Icon data as JSON.

.json

Icon Sources

Access 19,000+ icons from 9 popular icon libraries:

lucide

1,456 icons

phosphor

7,488 icons

hugeicons

3,000+ icons

heroicons

292 icons

tabler

3,000+ icons

feather

287 icons

remix

2,000+ icons

simple-icons

2,000+ brand logos

iconoir

1,600+ icons

AI Assistant Integration

NEW

Use Unicon with Claude & Cursor

Connect Unicon to AI assistants via Model Context Protocol (MCP). Search and generate icon components using natural language.

Install the MCP server:

npx @webrenew/unicon-mcp-server

Add to Claude Desktop config:

claude_desktop_config.json

{
  "mcpServers": {
    "unicon": {
      "command": "npx",
      "args": ["-y", "@webrenew/unicon-mcp-server"]
    }
  }
}

Then ask Claude:

→"Search for dashboard icons in Lucide"

→"Get the React component for lucide:home"

→"Generate Vue components for social media icons"

Quick Start Guide →Full Documentation →

Tree-Shaking

Unlike npm install lucide-react which downloads thousands of icons, the CLI generates only the icons you need as individual files.

✓One component per file = true tree-shaking

✓No external dependencies to ship

✓Import only what you use: import { Home } from "./icons"

Offline Support

The CLI automatically caches icon data locally at ~/.unicon/cache for 24 hours. This enables faster subsequent searches and partial offline usage.

unicon cache --statsunicon cache --clear

Ready to bundle some icons?

npx @webrenew/unicon init