打开一个网站，点开几个页面，突然发现每个按钮上的小图标风格都不一样——有的圆润，有的尖锐，颜色也忽明忽暗。这种感觉就像走进一家装修一半的咖啡馆，沙发是北欧风，吊灯却是中式红灯笼，让人莫名出戏。
为什么图标要保持一致？
图标不是随便画个形状就行。它本质是视觉语言，用来快速传递信息。如果同一个网站里，“删除”用的是实心垃圾桶，“返回”却用了线性箭头，用户就得重新学习每个图标的含义，哪怕只是多花半秒钟，累积起来就是体验的崩塌。
一致性不是复制粘贴。它指的是在风格、线条粗细、圆角程度、色彩饱和度甚至投影方式上统一标准。比如全站图标都采用 2px 的描边、45° 圆角、主色为 #338AFF，这样哪怕换了一个新页面，用户也能一眼认出这是“一家人”。
实际场景中的问题
很多团队开发网页时，前端自己找图标库拼凑，设计师临时画几个，时间一紧就直接上搜索引擎搜“下载即用”。结果首页图标是 Material 风格，后台管理页却混进了 iOS 风的拟物元素，视觉割裂感拉满。
更常见的是响应式适配翻车。桌面端图标大小统一 24x24，到了手机上为了“看起来大一点”，有人改成 32px，还加了阴影。其实只要在设计规范里写清楚：icon-size: 24px; line-height: 1;，所有开发者照着做就行。
怎么落地执行？
先定一套基础规则。比如决定用线性图标还是面性，是否允许渐变填充，最小点击区域不小于 44px。然后把这些写进设计文档，同步给所有人。
技术层面可以封装组件。例如用 SVG 符号系统统一管理：
<svg class="icon">
<use xlink:href="#icon-delete"></use>
</svg>
所有图标集中在一个 sprite 文件里，调用时只改 #icon-name。这样既能保证渲染清晰，又能避免加载多个小图片造成的延迟。
定期走查也很重要。上线前拉上设计师和前端一起过一遍所有页面，拿张 A4 纸盖住文字，只看图标排布。如果哪个地方显得突兀，大概率就是风格跑偏了。
别小看这些细节。用户可能说不清哪里怪，但他们会下意识觉得这个网站“不够专业”或者“用着累”。而当你把图标全都捋顺了，整个界面就像整理过的书架，东西没变，但一眼就能找到。