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.
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 |
unicon get <name> |
Get single icon to stdout or file |
unicon bundle |
Bundle multiple icons by category or query |
unicon init |
Create .uniconrc.json config |
unicon sync |
Regenerate all bundles from config |
unicon skill |
Install AI assistant skills for Claude, Cursor, Windsurf, etc. |
unicon skills |
List and download skills from the public registry |
Output Formats
| Format | Extension | Use Case |
|---|---|---|
react |
.tsx |
React/Next.js (default) |
vue |
.vue |
Vue 3 SFC |
svelte |
.svelte |
Svelte components |
svg |
.svg |
Raw SVG markup |
json |
.json |
Data/programmatic use |
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
unicon init
# 2. Search for icons you need
unicon search "navigation arrows"
# 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
unicon get home
# Copy to clipboard (macOS)
unicon get home | pbcopy
# Save to file
unicon get settings --format react -o ./Settings.tsx
# Different framework
unicon get home --format vue -o ./Home.vue
Bundle by Category
# Bundle all dashboard icons
unicon bundle --category Dashboards --format react -o ./src/icons
# Bundle specific icons by search
unicon bundle --query "social media" --format svg -o ./public/icons
# Split into individual files (tree-shakeable)
unicon bundle --category Navigation --split -o ./src/icons
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:
- 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: See
references/cli-commands.mdfor all commands and options - Config File: See
references/config-file.mdfor.uniconrc.jsonschema - API: See
references/api-reference.mdfor REST endpoints
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