unicon

star 10

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.

webrenew By webrenew schedule Updated 1/29/2026

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.md for all commands and options
  • Config File: See references/config-file.md for .uniconrc.json schema
  • API: See references/api-reference.md for 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
Install via CLI
npx skills add https://github.com/webrenew/unicon --skill unicon
Repository Details
star Stars 10
call_split Forks 2
navigation Branch main
article Path SKILL.md
More from Creator