Back to list
WebRenew

unicon

by WebRenew

Shadcn for icons.

2🍴 0📅 Jan 24, 2026

SKILL.md


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

CommandDescription
unicon search <query>AI-powered semantic search
unicon get <name>Get single icon to stdout or file
unicon bundleBundle multiple icons by category or query
unicon initCreate .uniconrc.json config
unicon syncRegenerate all bundles from config
unicon skillInstall AI assistant skills for Claude, Cursor, Windsurf, etc.
unicon skillsList and download skills from the public registry

Output Formats

FormatExtensionUse Case
react.tsxReact/Next.js (default)
vue.vueVue 3 SFC
svelte.svelteSvelte components
svg.svgRaw SVG markup
json.jsonData/programmatic use

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

# 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.webrenew.com

  • 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

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:

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

Score

Total Score

65/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon