一个网站好不好用，有时候就取决于那几十像素的小东西。我说的是web图标。

2019年，我帮一个做生鲜电商的朋友改版他们的移动端页面。原来的“购物车”入口用的是文字，两个字占了将近80像素的宽度，挤在一堆分类标签里，用户得眯着眼找。换成一辆简笔小推车图标后，点击率涨了17%。这不是我编的，是A/B测试跑出来的真实数据。图标不说话，但它比文字跑得快——人脑处理图像的速度比处理文字快0.1秒左右，别小看这0.1秒，在手机屏幕上就是“一眼看到”和“扫三遍才找到”的区别。

Web图标最早就是一堆像素点拼出来的小画。1995年，Netscape浏览器地址栏左边那个旋转的“N”，算是鼻祖之一。后来favicon成了标配，16×16像素，丑得各有千秋，但每个站长都觉得自己那个最顺眼。真正让图标变成设计语言的，是2007年iPhone发布之后。手指代替了鼠标，点击目标不能太小，图标得撑到44×44像素以上，还得在Retina屏上不糊。于是矢量图标字体火了一阵，Font Awesome那套东西几乎人手一份。再后来SVG直接内联，想怎么变色就怎么变色，想怎么动就怎么动。

现在做Web图标，选择多到让人犯选择困难症。Material Icons规整得像军训过，Feather Icons细胳膊细腿走性冷淡风，Heroicons分 outline 和 solid 两套，Tailwind 用户闭眼选。我自己偏爱 Phosphor 和 Lucide，线条圆润，边角处理得有点人味儿。但选哪套不是关键，关键是别混着用。见过一个后台管理系统，侧边栏用Ant Design的实心图标，工具栏塞了几个Font Awesome的线性图标，顶部又冒出两个手绘风格的SVG——像三个人分别装修了同一间屋子的不同角落。

尺寸也是个坑。图标不是随便缩放的图片。16px下还能看清细节的，放大到64px往往显得单薄；64px下精致的，压到16px就成了一团墨。好的图标集每个尺寸都单独调过。苹果的SF Symbols在这点上做得变态，同一个图标有九种粗细、三种缩放比例，还能跟文字基线自动对齐。做Web的没这么奢侈，但至少得保证在24px和32px两个常用尺寸下不出洋相。

颜色更得小心。图标默认继承文字颜色，这很聪明。但你如果给图标单独设了色，hover状态忘了改，就会出现鼠标移上去文字变蓝、图标还是灰的尴尬。更隐蔽的坑是暗色模式。一个深灰图标放在浅灰背景上没问题，背景一翻黑，图标直接隐身。我现在养成了习惯：每个图标组件都写两套颜色变量，一套亮色一套暗色，用CSS媒体查询切换。多写几行代码，少收几条用户投诉。

可访问性别忽略。纯装饰性图标加 aria-hidden="true"，功能性图标要么配文字标签，要么加 aria-label。见过一个删除按钮只放了个垃圾桶图标，屏幕阅读器读出来是“按钮”，视障用户根本不知道点了会发生什么。这不算技术难题，纯粹是懒。

最后说个观察。很多团队花几周时间争论图标风格，却没人检查图标在200%缩放下的表现。浏览器缩放一开，SVG图标糊成马赛克——因为设计师给的是位图切图。用SVG，用SVG，用SVG。重要的事说三遍。一个几KB的SVG文件，能省掉后面无数适配的麻烦。图标这东西，做对了没人夸，做错了人人骂。它就该像空气一样，用户感觉不到它的存在，但缺了它，整个界面就喘不上气。