图标是最容易被忽略的设计细节。同一个页面，图标风格统一、尺寸一致，看起来就专业；混用三套图标、粗细不一，再好的排版也救不回来。
一、三种引入方式
| 方式 | 优点 | 缺点 |
|---|---|---|
| img 标签 | 简单、可缓存 | 无法用 CSS 改颜色 |
| 内联 SVG | 可改色、可动画 | HTML 变大，不能单独缓存 |
| SVG Sprite | 一次加载、复用方便 | 需要构建步骤 |
企业站推荐 Sprite 或内联。Sprite 的做法是把所有图标放进一个 SVG 文件，用 引用：
二、尺寸与描边规范
定一套规范，全站遵守：
- 尺寸档位：16 / 20 / 24 / 32。不要出现 17px、23px 这种。
- 描边宽度：统一 1.5 或 2。同一页面不能混。
- 圆角：线帽用 round，视觉更柔和。
- 视框：统一 24×24，导出时保持一致。
很多图标库混用后显得乱，就是因为视框和描边不一致。
三、颜色怎么控制
内联 SVG 用 currentColor，跟随文字颜色：
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }这样在深色背景、链接悬停时都不需要单独写样式。
四、图标库怎么组织
建议按用途分文件，别塞进一个大文件：
assets/icons/
├── ui.svg # 箭头、关闭、菜单、搜索
├── business.svg # 产品、服务、行业相关
├── social.svg # 社交平台
└── payment.svg # 支付方式命名用"用途-方向"的格式：arrow-right、chevron-down、check-circle。别用 icon1、img2。
五、五个常见错误
- 混用多套图标。线性图标配填充图标，风格冲突。
- 尺寸不统一。有的 16px 有的 18px，视觉上参差不齐。
- 图标语义不清。用齿轮表示"服务"、用灯泡表示"关于我们"，用户猜不到。
- 只有图标没有文字。移动端尤其明显，用户不敢点。
- SVG 没压缩。从设计工具导出的 SVG 带一堆无用属性，体积是优化后的三倍。
六、性能优化
- 用 SVGO 压缩，去掉
- Sprite 文件做 gzip，通常能压到几 KB。
- 图标不多时（少于 20 个）可以直接内联，省一个请求。
- 首屏用到的图标预加载，其余按需。
七、可访问性
纯装饰性图标加 aria-hidden="true"；有语义的图标加 role="img" 和 aria-label：
只有图标没有文字的按钮，一定要有 aria-label，否则读屏软件读不出来。
SVG 图标库怎么维护
统一 24 网格、1.75 描边、currentColor 取色；按用途命名，不按形状命名；一个文件用 symbol 管理，页面只引用。删除没用到的图标，控制体积。
图标不统一，页面会显得杂。统一之后，即使换配色也不会乱。
图标不要混用线性和填充两种风格。统一描边粗细和圆角，页面才会显得整齐。
图标统一描边粗细和圆角，不要混用线性和填充两种风格。
常见问题
用图标字体还是 SVG
SVG。图标字体有渲染问题（尤其在某些 Windows 浏览器上），也不好做多色。
图标从哪找
Bootstrap Icons、Lucide、Tabler 都是开源可商用的。别从网上随便下 PNG 转 SVG，描边会很粗糙。
要不要自己画
常规功能图标不用，业务相关（比如特定设备）可以找人画一套，保持风格统一。
图标是视觉系统的一部分，配色规则见网站配色体系。
