icon-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Icon Design

图标设计

Select the right icon for the job. Maps concepts to icons, provides templates, prevents common mistakes.

为需求选择合适的图标。提供概念到图标的映射、模板示例，避免常见错误。

Quick Reference (Top 20 Concepts)

快速参考（TOP 20 常用概念）

Concept	Lucide	Heroicons	Phosphor
Award/Quality	`Trophy`	`trophy`	`Trophy`
Price/Value	`Tag`	`tag`	`Tag`
Location	`MapPin`	`map-pin`	`MapPin`
Expertise	`GraduationCap`	`academic-cap`	`GraduationCap`
Support	`MessageCircle`	`chat-bubble-left-right`	`ChatCircle`
Security	`Shield`	`shield-check`	`Shield`
Speed	`Zap`	`bolt`	`Lightning`
Phone	`Phone`	`phone`	`Phone`
Email	`Mail`	`envelope`	`Envelope`
User/Profile	`User`	`user`	`User`
Team	`Users`	`user-group`	`Users`
Settings	`Settings`	`cog-6-tooth`	`Gear`
Home	`Home`	`home`	`House`
Search	`Search`	`magnifying-glass`	`MagnifyingGlass`
Check/Success	`Check`	`check`	`Check`
Close/Cancel	`X`	`x-mark`	`X`
Menu	`Menu`	`bars-3`	`List`
Calendar	`Calendar`	`calendar`	`Calendar`
Clock/Time	`Clock`	`clock`	`Clock`
Heart/Favourite	`Heart`	`heart`	`Heart`

概念	Lucide	Heroicons	Phosphor
奖项/品质	`Trophy`	`trophy`	`Trophy`
价格/价值	`Tag`	`tag`	`Tag`
位置	`MapPin`	`map-pin`	`MapPin`
专业能力	`GraduationCap`	`academic-cap`	`GraduationCap`
支持服务	`MessageCircle`	`chat-bubble-left-right`	`ChatCircle`
安全保障	`Shield`	`shield-check`	`Shield`
速度	`Zap`	`bolt`	`Lightning`
电话	`Phone`	`phone`	`Phone`
邮件	`Mail`	`envelope`	`Envelope`
用户/个人资料	`User`	`user`	`User`
团队	`Users`	`user-group`	`Users`
设置	`Settings`	`cog-6-tooth`	`Gear`
首页	`Home`	`home`	`House`
搜索	`Search`	`magnifying-glass`	`MagnifyingGlass`
勾选/成功	`Check`	`check`	`Check`
关闭/取消	`X`	`x-mark`	`X`
菜单	`Menu`	`bars-3`	`List`
日历	`Calendar`	`calendar`	`Calendar`
时钟/时间	`Clock`	`clock`	`Clock`
收藏/喜爱	`Heart`	`heart`	`Heart`

Library Selection

图标库选择

Library	Best For	Package
Lucide	General use, React projects	`lucide-react`
Heroicons	Tailwind projects, minimal style	`@heroicons/react`
Phosphor	Weight variations needed	`@phosphor-icons/react`

Default recommendation: Lucide (1,400+ icons, excellent React integration)

See

references/library-comparison.md

for detailed comparison.

图标库	最佳适用场景	包名
Lucide	通用场景、React 项目	`lucide-react`
Heroicons	Tailwind 项目、极简风格	`@heroicons/react`
Phosphor	需要多种粗细样式的场景	`@phosphor-icons/react`

默认推荐：Lucide（1400+ 图标，与 React 集成优秀）

详细对比请查看

references/library-comparison.md

。

Icon Style Rules

图标样式规则

Sizing

尺寸规范

Context	Tailwind Class	Pixels
Inline with text	`w-4 h-4` or `w-5 h-5`	16-20px
Feature cards	`w-8 h-8`	32px
Hero sections	`w-10 h-10` or `w-12 h-12`	40-48px
Large decorative	`w-16 h-16`	64px

使用场景	Tailwind 类名	像素尺寸
与文本同行	`w-4 h-4` 或 `w-5 h-5`	16-20px
功能卡片	`w-8 h-8`	32px
首页头部区块	`w-10 h-10` 或 `w-12 h-12`	40-48px
大型装饰图标	`w-16 h-16`	64px

Consistency Rules

一致性规则

Never mix styles - Use all outline OR all solid in a section
Never use emoji - Use proper icon components (tree-shakeable)
Use currentColor - Icons inherit text color via
```
stroke="currentColor"
```
Semantic colours - Use
```
text-primary
```
, not
```
text-blue-500
```

切勿混合样式 - 同一区块内全部使用轮廓线图标或全部使用实心图标
禁止使用表情符号 - 使用可摇树优化的正规图标组件
使用 currentColor - 图标通过
```
stroke="currentColor"
```
继承文本颜色
语义化颜色 - 使用
```
text-primary
```
而非
```
text-blue-500
```

Tree-Shaking (Critical)

摇树优化（关键）

Dynamic icon selection breaks tree-shaking. Use explicit maps:

tsx

// BAD - all icons bundled
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]  // Tree-shaken away!

// GOOD - explicit map
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]

动态选择图标会破坏摇树优化。请使用显式映射：

tsx

// 错误写法 - 所有图标都会被打包
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]  // 摇树优化失效！

// 正确写法 - 显式映射
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]

Selection Process

图标选择流程

Identify the concept - What does the label/title communicate?
Check semantic mapping - See
```
references/semantic-mapping.md
```
Choose library - Lucide (default), Heroicons (Tailwind), Phosphor (weights)
Apply template - See
```
references/icon-templates.md
```
Verify consistency - Same style, same size in section

明确核心概念 - 标签/标题要传达什么信息？
核对语义映射 - 查看
```
references/semantic-mapping.md
```
选择图标库 - Lucide（默认）、Heroicons（Tailwind 项目）、Phosphor（需要多粗细样式）
套用模板 - 查看
```
references/icon-templates.md
```
验证一致性 - 同一区块内样式、尺寸保持统一

Decision Tree

决策树

When unsure which icon:

Is it about recognition/awards? → Trophy, Star, Award
Is it about money/price? → Tag, DollarSign, CreditCard
Is it about location? → MapPin, Globe, Map
Is it about people/team? → Users, UserGroup, User
Is it about communication? → MessageCircle, Phone, Mail
Is it about safety/trust? → Shield, Lock, ShieldCheck
Is it about speed/time? → Zap, Clock, Timer
Is it trade-specific? → Check semantic-mapping.md
Still unsure? → CheckCircle (generic positive) or Sparkles (generic feature)

当不确定选择哪个图标时：

是否与认可/奖项相关？ → Trophy、Star、Award
是否与金钱/价格相关？ → Tag、DollarSign、CreditCard
是否与位置相关？ → MapPin、Globe、Map
是否与人员/团队相关？ → Users、UserGroup、User
是否与沟通相关？ → MessageCircle、Phone、Mail
是否与安全/信任相关？ → Shield、Lock、ShieldCheck
是否与速度/时间相关？ → Zap、Clock、Timer
是否为特定行业场景？ → 查看 semantic-mapping.md
仍不确定？ → CheckCircle（通用正向图标）或 Sparkles（通用功能图标）

Resources

参考资源

```
references/semantic-mapping.md
```
- Full concept→icon tables by category
```
references/icon-templates.md
```
- React/HTML patterns with Tailwind
```
references/library-comparison.md
```
- Lucide vs Heroicons vs Phosphor
```
references/migration-guide.md
```
- FA/Material → modern equivalents
```
rules/icon-design.md
```
- Correction rules for projects

```
references/semantic-mapping.md
```
- 按分类整理的完整概念→图标对照表
```
references/icon-templates.md
```
- 带有 Tailwind 的 React/HTML 模板
```
references/library-comparison.md
```
- Lucide、Heroicons、Phosphor 详细对比
```
references/migration-guide.md
```
- 从 FA/Material 迁移至现代图标库的指南
```
rules/icon-design.md
```
- 项目图标设计修正规则