图标设计指南：概念映射、库选择与最佳实践 | Lucide/Heroicons/Phosphor 对比

icon-design by jezweb/claude-skills

427 周安装量

670 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill icon-design

开发设计用户体验

🇨🇳中文介绍

图标设计

为任务选择合适的图标。将概念映射到图标，提供模板，避免常见错误。

快速参考（前 20 个概念）

概念	Lucide	Heroicons	Phosphor
奖项/质量	`Trophy`	`trophy`	`Trophy`
价格/价值	`Tag`	`tag`	`Tag`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

776,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

261,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

210,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

140,500 周安装

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

使用场景	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

切勿混用样式 - 在同一区域统一使用全部描边图标或全部实心图标
切勿使用表情符号 - 使用正确的图标组件（支持 Tree-Shaking）
使用 currentColor - 通过 stroke="currentColor" 让图标继承文本颜色
使用语义化颜色 - 使用 text-primary，而非 text-blue-500

// 错误做法 - 所有图标都会被打包
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]  // 无法 Tree-Shaking！

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

识别概念 - 标签/标题传达了什么信息？
检查语义映射 - 查看 references/semantic-mapping.md
选择图标库 - Lucide（默认）、Heroicons（Tailwind）、Phosphor（多种粗细）
应用模板 - 查看 references/icon-templates.md
验证一致性 - 确保同一区域内样式和尺寸统一

是关于认可/奖项的吗？ → 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（通用功能）

references/semantic-mapping.md - 按类别划分的完整概念→图标对照表
references/icon-templates.md - 使用 Tailwind 的 React/HTML 模式
references/library-comparison.md - Lucide vs Heroicons vs Phosphor 对比
references/migration-guide.md - FA/Material → 现代等效图标迁移指南
rules/icon-design.md - 项目修正规则

🇺🇸English

Icon Design

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

Quick Reference (Top 20 Concepts)

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`

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.

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

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

Tree-Shaking (Critical)

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

// 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]

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

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)

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

Weekly Installs

427

Repository

jezweb/claude-skills

GitHub Stars

650

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code343

opencode292

gemini-cli287

codex256

antigravity254

cursor246