Icon Designer

图标设计师

图标设计专家，可为界面和品牌打造协调一致、可缩放的图标集。此技能结合视觉设计原则、图标设计最佳实践和 SVG 优化，打造清晰一致的图标，提升用户界面体验。

无论你需要为产品构建完整的图标系统、为特定功能设计自定义图标，还是获取图标选择和使用方面的指导，此技能都能确保图标兼具美观与实用性。

核心工作流

工作流 1：创建自定义图标集

1. 明确需求：
   • 所需图标数量
   • 使用场景（导航、操作、类别等）
   • 风格（线框、填充、双色调、手绘）
   • 尺寸规格（16px、24px、32px）
2. 建立设计系统：
   • 描边宽度（1.5px、2px 等）
   • 圆角风格的边框半径
   • 网格系统（像素网格对齐）
   • 视觉微调
3. 创建图标概念：
   • 生成 Midjourney 提示词以获取灵感
   • 勾勒核心隐喻
   • 确保在小尺寸下清晰易辨
   • 测试辨识度
4. 提供 SVG 代码：
   • 优化路径
   • 正确设置 viewBox
   • 无障碍标记
5. 编写使用指南

工作流 2：图标风格系统

1. 选择风格方向：
   • 线框：现代、简洁、极简
   • 填充：醒目、清晰、高对比度
   • 双色调：精致、有层次
   • 手绘：友好、亲切
   • 3D/等距：立体、有趣
2. 定义规格：
   • 描边粗细一致
   • 圆角半径（锐角、圆角、胶囊形）
   • 内边距/安全区域
   • 调色板
   • 网格对齐（像素级精准）
3. 创建带示例的风格指南
4. 为新图标创建模板
5. 提供导出设置

工作流 3：图标审查与优化

1. 分析现有图标：
   • 一致性检查（风格、尺寸、粗细）
   • 无障碍审查
   • 性能分析（文件大小、复杂度）
   • 使用模式
2. 找出问题：
   • 风格不匹配
   • 缩放效果不佳
   • 隐喻含义不清晰
   • 无障碍方面的不足
3. 提供建议：
   • 统一描边粗细
   • 简化复杂路径
   • 补充缺失的图标
   • 提高对比度
4. 制定迁移计划

工作流 4：选择图标库

1. 评估项目需求：
   • 所需图标数量
   • 风格偏好
   • 许可要求（开源、商业）
   • 自定义需求
2. 推荐图标库：
   • Heroicons：Tailwind、MIT 许可、线框/填充
   • Lucide：Feather 分支、精美、可自定义
   • Phosphor：用途广泛，提供 6 种粗细
   • Material Symbols：Google、可变字体
   • Bootstrap Icons：全面、免费
3. 展示集成方式：
   • React 组件
   • SVG 雪碧图
   • 图标字体（不推荐）
   • 直接导入 SVG
4. 提供设置代码

快速参考

操作	命令/触发语
创建自定义图标	"为 [功能/类别] 设计图标"
选择图标库	"为 [项目] 推荐图标库"
定义图标系统	"创建图标设计系统"
优化图标	"审查我的图标一致性"
生成 SVG 代码	"为 [图标描述] 创建 SVG"
图标命名	"帮我为图标集命名"

图标设计原则

清晰优先

• 在 16px 尺寸下仍易于辨认
• 使用简单明确的隐喻
• 避免精细细节
• 在目标尺寸下进行测试

一致性

• 整套图标使用相同的描边粗细
• 圆角半径保持一致
• 与像素网格对齐
• 视觉重量相近
• 细节程度一致

简洁

• 删除不必要的细节
• 使用基本形状
• 限制路径复杂度
• 将其视为“符号”，而非“插画”

对齐

• 按像素网格设计
• 对齐到整数像素
• 避免子像素渲染
• 进行视觉居中（而非数学居中）

可缩放性

• 适用于多种尺寸（16、24、32px）
• 缩放后仍保持清晰
• 考虑响应式调整
• 使用 SVG 实现无限缩放

无障碍

• 对比度至少为 3:1
• 信息不能只通过颜色传达
• 在单色模式下仍能正常使用
• 关键信息应配有文本标签

图标样式指南

线框图标

Style: Line-based, hollow
Stroke: 1.5-2px
Best for: Modern UI, minimal aesthetics
Examples: Heroicons, Feather, Lucide
When to use: Clean interfaces, lots of icons

实心图标

Style: Solid shapes
Stroke: None or minimal
Best for: Strong visual presence, clear states
Examples: Material Filled, Bootstrap
When to use: Primary actions, selected states

双音色图标

Style: Two-color, layered
Stroke: Varies
Best for: Sophisticated, depth
Examples: Phosphor Duotone
When to use: Premium products, editorial

手绘图标

Style: Organic, imperfect
Stroke: Variable, playful
Best for: Friendly, approachable brands
Examples: Streamline Loopy
When to use: Creative, casual, fun products

尺寸指南

16px（1rem）

• UI 标签、行内文本图标
• 使用最简版本
• 描边加粗（2px）
• 尽量减少细节

24px（1.5rem）

• 默认 UI 尺寸
• 最常用
• 标准描边粗细为 1.5-2px
• 细节平衡适当

32px（2rem）

• 按钮、突出操作
• 可添加更多细节
• 提供舒适的可点击区域

48px+（3rem+）

• 功能插画
• 营销素材
• 最大程度呈现细节
• 考虑使用定制艺术图

技术规范

SVG 最佳实践

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path d="M..." />
</svg>

关键属性

• viewBox：定义坐标系（通常为 "0 0 24 24"）
• currentColor：继承文本颜色
• aria-hidden：用于装饰的图标，屏幕阅读器会跳过
• role="img" + aria-label：图标具有语义含义时使用

优化

• 删除不必要的分组
• 尽可能合并路径
• 坐标四舍五入至小数点后 2 位
• 使用 SVGO 压缩
• 对关键图标使用内联方式，其他图标延迟加载

最佳实践

• 按目标尺寸设计：不要缩小细节丰富的插画
• 像素级精准对齐：与像素网格对齐，避免模糊
• 隐喻保持一致：在产品中，相同操作使用相同图标
• 在实际场景中测试：在实际 UI 中查看图标，而非孤立查看
• 视觉平衡：根据感知重量进行调整（圆形看起来比正方形轻）
• 安全区域：将关键细节保持在图标中心 80% 的区域内
• 方向保持一致：所有箭头均指向相同的基准角度
• 命名规范：使用 kebab-case，名称清晰易懂（arrow-right、user-circle 等）
• 版本控制：记录图标变更，并保留旧版图标
• 无障碍：始终配合文本或 aria-label 传达含义
• 性能：图标较多时使用精灵图，较少时使用内联方式
• 颜色灵活性：使用 currentColor 适配不同主题

图标命名规范

结构：[object]-[variant]-[state]

示例：

• arrow-right（方向）
• user-circle（对象 + 容器）
• heart-filled（状态变体）
• trash-outline（样式变体）
• chevron-down-small（尺寸变体）

类别：

• 操作：edit、delete、save、send
• 导航：home、menu、back、forward
• 对象：user、file、folder、image
• 状态：check、error、warning、info
• 方向：arrow-up、chevron-right
• 社交：github、twitter、linkedin

交付物格式

ICON SET SPECIFICATION
Project: [Name]
Style: [Outlined/Filled/Duo-tone]

DESIGN SYSTEM
Grid: 24x24px
Stroke width: 2px
Corner radius: 2px (rounded style)
Padding: 2px safe area on all sides
Alignment: Pixel grid
Color: currentColor (inherits from parent)

ICON LIST
✓ home - Home navigation
✓ user - User profile
✓ settings - Settings/preferences
✓ search - Search function
✓ plus - Add/create action
✓ trash - Delete action
✓ edit - Edit action
✓ chevron-down - Dropdown indicator
✓ check - Success/confirmation
✓ x - Close/dismiss

[30 more icons...]

DESIGN PRINCIPLES
- Simple geometric shapes
- 2px stroke throughout
- Rounded caps and joins
- Optical centering (not mathematical)
- All icons tested at 16px and 24px
- Work in monochrome

USAGE GUIDELINES
- Use outlined version for default state
- Use filled version for active/selected state
- Minimum size: 16px (1rem)
- Always include aria-label or surrounding text
- Use currentColor for theming
- 24px size for most UI (buttons, navigation)
- 16px for inline text icons

SVG EXAMPLES
[Code for 5-10 representative icons]

INTEGRATION
React:
  import { Icon } from '@/components/Icon'
  <Icon name="home" size={24} />

HTML:
  <svg class="icon">...</svg>

CSS:
  .icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; }

FIGMA/DESIGN FILES
[Link to design source files]

推荐的图标库

免费且开源

图标库	风格	数量	许可证	最适合
Heroicons	线框/填充	300+	MIT	Tailwind 项目、现代 UI
Lucide	线框	1000+	ISC	美观、可自定义
Phosphor	6 种字重	6000+	MIT	用途广泛、专业
Tabler Icons	线框	4000+	MIT	全面、像素级精准
Bootstrap Icons	填充/线框	1800+	MIT	Bootstrap 项目
Feather	线框	280+	MIT	简洁、优雅（已停止维护）
Iconoir	线框	1300+	MIT	轻量、现代
Material Symbols	可变	2500+	Apache	Google 生态系统

高级版

图标库	风格	价格	最适合
Nucleo	多种风格	$99-179	全面、专业
Streamline	多种风格	$149+	细节丰富、插画风
Iconic	多种风格	免费/专业版	高品质、精选

工具集成

• 使用 Midjourney 生成图标灵感和情绪板
• 使用 ui-builder 技能在组件中实现图标
• 使用 WebSearch 研究图标隐喻和最佳实践
• 使用 Firecrawl 分析竞争对手的图标用法

常见需求

SaaS 产品：Heroicons 或 Lucide（现代、简洁） 电子商务：Phosphor 或 Bootstrap Icons（全面） 移动应用：Material Symbols（熟悉、丰富） 创意/代理机构：自定义图标集或 Streamline（独特） 仪表盘：Tabler Icons（专业、清晰） 营销网站：Phosphor Duotone（精致）