图标设计规范
图标风格类型
线框（Outline）
☆
♡
□
简洁轻盈感。常用于导航栏。统一描边粗细在小尺寸下效果好。
填充（Solid）
★
♥
■
粗壮、高对比度。适合激活/选中状态。极小尺寸下可读性更好。
双色
◈
⊕
⊗
主色 + 低透明度叠加层。增加层次感同时保持整洁。适合插图和仪表板。
扁平/彩色填充
★
♥
■
用于分类图标、应用图标、营销材料。全彩，无轮廓线。
图标尺寸网格
| 尺寸 | 画布 | 描边粗细 | 使用场景 |
|---|---|---|---|
| 16px | 16×16 | 1px | 行内文字图标、表格 |
| 20px | 20×20 | 1.5px | 紧凑导航、按钮 |
| 24px | 24×24 | 1.5–2px | 标准导航，最常用 |
| 32px | 32×32 | 2px | 功能图标、章节标题 |
| 48px | 48×48 | 2–2.5px | 应用图标、主视觉区域 |
图标库对比
| 图标库 | 数量 | 风格 | 协议 |
|---|---|---|---|
| Heroicons | 292 | 线框+填充 | MIT |
| Lucide | 1400+ | 线框 | ISC |
| Phosphor Icons | 9000+ | 6种粗细 | MIT |
| Material Symbols | 3000+ | 可变字体 | Apache 2.0 |
| Tabler Icons | 5000+ | 线框 | MIT |
| Font Awesome | 2000+ free | 填充+品牌 | Free / Pro |
像素对齐技巧
- 🎯 在偶数网格上设计（24px而非23px）防止亚像素模糊
- 🎯 将路径对齐到像素网格——避免小数坐标
- 🎯 同一套图标中使用一致的描边粗细
- 🎯 圆形线帽和连接点显得友好，方形适合技术风格
- 🎯 导出SVG时使用viewBox="0 0 24 24"保证可缩放性