✓ Verified 💻 Development ✓ Enhanced Data

Unicon

Help users add icons to their projects using the Unicon icon library.

Rating
4.8 (127 reviews)
Downloads
11,973 downloads
Version
1.0.0

Overview

Help users add icons to their projects using the Unicon icon library.

Complete Documentation

View Source →

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

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

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

Core Commands

CommandDescription
unicon search AI-powered semantic search (supports --pick for interactive selection)
unicon get Get single icon to stdout, file, or clipboard (--copy)
unicon info Show detailed icon information
unicon preview ASCII art preview in terminal
unicon bundleBundle multiple icons (supports --stars for favorites)
unicon initCreate .uniconrc.json config (--interactive for wizard)
unicon syncRegenerate bundles (--watch for auto-sync)
unicon add Add bundle to config
unicon star Add icon to favorites
unicon auditFind unused/missing icons in project
unicon sourcesList available icon libraries
unicon categoriesList icon categories
unicon cacheManage local cache
unicon skillInstall AI assistant skills

Output Formats

FormatExtensionUse Case
react.tsxReact/Next.js (auto-detected)
vue.vueVue 3 SFC (auto-detected)
svelte.svelteSvelte components (auto-detected)
svg.svgRaw SVG markup
json.jsonData/programmatic use
Note: CLI auto-detects your framework from package.json and uses the appropriate format.

Icon Sources

SourceIconsDescription
lucide1,900+Beautiful & consistent
phosphor1,500+6 weights available
hugeicons1,800+Modern outlined icons
heroicons292Tailwind Labs
tabler4,600+Pixel-perfect stroke
feather287Simple and clean
remix2,800+Multiple categories
simple-icons3,300+Brand logos
iconoir1,600+Modern outlined icons

Common Workflows

Add Icons to a React Project

bash
# 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

bash
# 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

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

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

Bundle by Category

bash
# 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

bash
# 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

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

Audit Project Usage

bash
# Find unused bundled icons and missing imports
unicon audit

Preview Icons in Terminal

bash
# 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:

  • Generates only the icons you need as individual files
  • No external dependencies to ship
  • True tree-shaking with one component per file
  • Import only what you use: import { Home } from "./icons"

Web Interface

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

  • Visual search with AI
  • One-click copy (SVG, React, Vue, Svelte)
  • Filter by library and category
  • Bundle builder for multiple icons

References

AI Assistant Integration

Install Unicon skills for AI coding assistants:

bash
# 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

IDEDirectory
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:

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

Installation

Terminal bash

openclaw install unicon
    
Copied!

💻Code Examples

npx @webrenew/unicon search "dashboard"

npx-webrenewunicon-search-dashboard.txt
## 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

unicon preview star --width 24

unicon-preview-star---width-24.txt
## Tree-Shaking Benefits

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

- Generates **only the icons you need** as individual files
- **No external dependencies** to ship
- True tree-shaking with one component per file
- Import only what you use: `import { Home } from "./icons"`

## Web Interface

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

- Visual search with AI
- One-click copy (SVG, React, Vue, Svelte)
- Filter by library and category
- Bundle builder for multiple icons

## References

- [CLI Commands](references/cli-commands.md) - All commands and options
- [Config File](references/config-file.md) - `.uniconrc.json` schema
- [API Reference](references/api-reference.md) - REST endpoints

## AI Assistant Integration

Install Unicon skills for AI coding assistants:

unicon skill --all

unicon-skill---all.txt
### 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:
example.sh
# Install CLI globally
npm install -g @webrenew/unicon

# Or use directly with npx
npx @webrenew/unicon search "dashboard"
example.sh
# 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"
example.sh
# 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
example.sh
# Search and pick icons interactively
unicon search "dashboard" --pick

# Then choose action: copy, save, star, or create bundle
example.sh
# 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
example.sh
# 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
example.sh
# ASCII art preview
unicon preview home

# Custom size
unicon preview star --width 24

Tags

#web_and-frontend-development

Quick Info

Category Development
Model Claude 3.5
Complexity One-Click
Author charlesrhoward
Last Updated 3/10/2026
🚀
Optimized for
Claude 3.5
🧠

Ready to Install?

Get started with this skill in seconds

openclaw install unicon