Back to Details

unicon

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Unicon

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.
Unicon是一个统一的图标库，整合了9个流行图标库的19000+款图标。与传统会打包数千个图标的npm包不同，Unicon只会生成你需要的图标。

Quick Start

快速开始

bash
undefined
bash
undefined

Install CLI globally

全局安装CLI

npm install -g @webrenew/unicon
npm install -g @webrenew/unicon

Or use directly with npx

或直接使用npx

npx @webrenew/unicon search "dashboard"
undefined
npx @webrenew/unicon search "dashboard"
undefined

Core Commands

核心命令

CommandDescription
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
命令描述
unicon search <query>
基于AI的语义搜索（支持
--pick
进行交互式选择）
unicon get <name>
获取单个图标并输出到标准输出、文件或剪贴板（
--copy
参数）
unicon info <name>
显示图标的详细信息
unicon preview <name>
在终端中以ASCII艺术形式预览图标
unicon bundle
打包多个图标（支持
--stars
参数打包收藏的图标）
unicon init
创建.uniconrc.json配置文件（
--interactive
参数启动交互式向导）
unicon sync
重新生成图标包（
--watch
参数支持自动同步）
unicon add <name>
向配置文件中添加图标包
unicon star <name>
将图标添加到收藏夹
unicon audit
查找项目中未使用或缺失的图标
unicon sources
列出可用的图标源库
unicon categories
列出图标分类
unicon cache
管理本地缓存
unicon skill
安装AI助手技能

Output Formats

输出格式

FormatExtensionUse 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.
格式扩展名使用场景
react
.tsx
React/Next.js（自动检测）
vue
.vue
Vue 3单文件组件（自动检测）
svelte
.svelte
Svelte组件（自动检测）
svg
.svg
原生SVG标记
json
.json
数据/程序化使用
注意： CLI会自动从
package.json
中检测你的框架并使用对应的格式。

Icon Sources

图标源库

SourceIconsDescription
lucide
1,900+Beautiful & consistent
phosphor
1,500+6 weights available
hugeicons
1,800+Modern outlined icons
heroicons
292Tailwind Labs
tabler
4,600+Pixel-perfect stroke
feather
287Simple and clean
remix
2,800+Multiple categories
simple-icons
3,300+Brand logos
iconoir
1,600+Modern outlined icons
源库图标数量描述
lucide
1900+美观且风格统一
phosphor
1500+提供6种字重
hugeicons
1800+现代轮廓风格图标
heroicons
292Tailwind Labs出品
tabler
4600+像素级完美的线条图标
feather
287简洁干净
remix
2800+包含多种分类
simple-icons
3300+品牌标志
iconoir
1600+现代轮廓风格图标

Common Workflows

常见工作流程

Add Icons to a React Project

为React项目添加图标

bash
undefined
bash
undefined

1. Initialize config (interactive wizard)

1. 初始化配置（交互式向导）

unicon init --interactive
unicon init --interactive

2. Search for icons interactively

2. 交互式搜索图标

unicon search "navigation arrows" --pick
unicon search "navigation arrows" --pick

3. Add bundle to config

3. 向配置中添加图标包

unicon add nav --query "arrow chevron menu"
unicon add nav --query "arrow chevron menu"

4. Generate components

4. 生成组件

unicon sync
unicon sync

5. Import and use

5. 导入并使用

import { ArrowRight, Menu } from "./src/icons/nav"

import { ArrowRight, Menu } from "./src/icons/nav"

undefined
undefined

Get a Single Icon Quickly

快速获取单个图标

bash
undefined
bash
undefined

Output to stdout (auto-detects framework)

输出到标准输出（自动检测框架）

unicon get home
unicon get home

Copy to clipboard directly

直接复制到剪贴板

unicon get home --copy
unicon get home --copy

Save to file

保存到文件

unicon get settings --format react -o ./Settings.tsx
unicon get settings --format react -o ./Settings.tsx

Different framework

指定其他框架

unicon get home --format vue -o ./Home.vue
undefined
unicon get home --format vue -o ./Home.vue
undefined

Interactive Search with Selection

带选择功能的交互式搜索

bash
undefined
bash
undefined

Search and pick icons interactively

交互式搜索并选择图标

unicon search "dashboard" --pick
unicon search "dashboard" --pick

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

然后选择操作：复制、保存、收藏或创建图标包

undefined
undefined

Bundle by Category

按分类打包图标

bash
undefined
bash
undefined

Bundle all dashboard icons (tree-shakeable by default)

打包所有仪表板类图标（默认支持Tree-shaking）

unicon bundle --category Dashboards -o ./src/icons
unicon bundle --category Dashboards -o ./src/icons

Bundle specific icons by search

根据搜索结果打包特定图标

unicon bundle --query "social media" --format svg -o ./public/icons
unicon bundle --query "social media" --format svg -o ./public/icons

Bundle all favorited icons

打包所有收藏的图标

unicon bundle --stars -o ./src/icons/favorites
unicon bundle --stars -o ./src/icons/favorites

Single file mode (not tree-shakeable)

单文件模式（不支持Tree-shaking）

unicon bundle --query "ui" --single-file -o ./icons.tsx
undefined
unicon bundle --query "ui" --single-file -o ./icons.tsx
undefined

Favorites System

收藏系统

bash
undefined
bash
undefined

Star icons for later

收藏图标供后续使用

unicon star home unicon star settings unicon star user
unicon star home unicon star settings unicon star user

Bundle all starred icons

打包所有收藏的图标

unicon bundle --stars -o ./src/icons/favorites
unicon bundle --stars -o ./src/icons/favorites

View favorites

查看收藏列表

unicon favorites
undefined
unicon favorites
undefined

Watch Mode for Development

开发模式下的监听功能

bash
undefined
bash
undefined

Auto-regenerate when config changes

配置文件变更时自动重新生成图标

unicon sync --watch
undefined
unicon sync --watch
undefined

Audit Project Usage

审计项目使用情况

bash
undefined
bash
undefined

Find unused bundled icons and missing imports

查找未使用的打包图标和缺失的导入

unicon audit
undefined
unicon audit
undefined

Preview Icons in Terminal

在终端中预览图标

bash
undefined
bash
undefined

ASCII art preview

ASCII艺术形式预览

unicon preview home
unicon preview home

Custom size

自定义尺寸

unicon preview star --width 24
undefined
unicon preview star --width 24
undefined

Tree-Shaking Benefits

Tree-shaking优势

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"
与
npm install lucide-react
会下载数千个图标不同：
  • 仅生成你需要的图标并保存为单独文件
  • 无需打包外部依赖
  • 单文件对应单个组件，真正支持Tree-shaking
  • 仅导入你使用的图标：
    import { Home } from "./icons"

Web Interface

Web界面

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
可通过以下地址浏览并复制图标：https://unicon.sh
  • 基于AI的可视化搜索
  • 一键复制（SVG、React、Vue、Svelte格式）
  • 按库和分类筛选
  • 多图标打包构建工具

References

参考文档

  • CLI Commands - All commands and options
  • Config File - 
    .uniconrc.json
    schema
  • API Reference - REST endpoints
  • CLI命令 - 所有命令及选项
  • 配置文件 - 
    .uniconrc.json
    schema
  • API参考 - REST端点

AI Assistant Integration

AI助手集成

Install Unicon skills for AI coding assistants:
bash
undefined
为AI编码助手安装Unicon技能：
bash
undefined

List supported assistants

列出支持的助手

unicon skill --list
unicon skill --list

Install for specific assistant

为特定助手安装

unicon skill --ide claude # Claude Code unicon skill --ide cursor # Cursor unicon skill --ide windsurf # Windsurf
unicon skill --ide claude # Claude Code unicon skill --ide cursor # Cursor unicon skill --ide windsurf # Windsurf

Install for all supported assistants

为所有支持的助手安装

unicon skill --all
undefined
unicon skill --all
undefined

Supported AI Assistants

支持的AI助手

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"
IDE目录
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
安装完成后，你可以向AI助手提问："为我的项目添加一个主页图标"

Cache

缓存

Icons are cached locally at 
~/.unicon/cache
for 24 hours:
bash
unicon cache --stats   # Show cache info
unicon cache --clear   # Clear cache
图标会被本地缓存到
~/.unicon/cache
，缓存有效期为24小时：
bash
unicon cache --stats   # 查看缓存信息
unicon cache --clear   # 清空缓存