unicon
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.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/charlesrhoward/uniconUnicon
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
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-charlesrhoward-unicon": {
"enabled": true,
"auto_update": true
}
}
}