做产品或写技术文档时，经常会遇到一个不起眼的问题：页面上要放一个云服务的图标，却不知道去哪找。找到了，又不确定能不能用；用上了，尺寸和颜色又和周围对不上。阿里云小图标看着是小事，却直接影响界面的识别速度，也影响文档是否显得专业。用得合适，读者扫一眼就知道是哪个产品；用得随意，页面会显得杂乱，严重时还可能踩到授权问题。
这篇文章记录的是实际工作中的做法，包括图标的常见来源、获取和使用的流程、两个典型场景，以及落地时容易忽略的几件事。
图标大致从哪来
平时说的阿里云小图标，主要有两类来源。一类是阿里云控制台和官方文档里使用的产品图标，比如云服务器、对象存储、数据库这些服务的标识。它的作用是说明“这是哪个产品”，使用时要按官方的品牌和使用规范来，不能随便改成别的颜色或样式。另一类是阿里巴巴矢量图标库（iconfont）里的通用小图标，线性、面性、多色等风格都有，常用来做按钮、菜单、导航和状态提示。
两类图标的用途不一样，选之前先想清楚要做什么。界面里的操作按钮，通用图标库更灵活，风格也容易统一；架构图和宣传材料要让读者一眼认出产品，产品图标更合适。两者混着用，最容易出现“单看都对，放在一起却不协调”的情况。
获取和使用的基本流程
比较稳妥的做法可以分成四步：
- 明确含义：先定下图标要表达什么，是“上传”“设置”，还是某个云产品。含义模糊，找出来的图标多半也模糊。
- 统一风格：同一个页面尽量只用一种风格，线宽、圆角、留白也要接近。填充和描边混用，哪怕每个图标单独看都不错，整页还是会显得拼凑。
- 核对授权：打开图标库或官方页面的使用条款，确认是否允许商用、修改和二次分发。下载时顺手把来源页面和条款版本记下来，以后查起来方便。
- 适配落地：按场景导出 SVG 或字体图标，统一尺寸，颜色尽量跟随主题变量。
其中 SVG 通常是首选。放大不失真，颜色还能用 CSS 控制，做深色模式时切换也省事。如果项目用的是字体图标方案，要特别注意图标名称是否一致。有的项目后期换了图标名，页面上突然冒出一排方块，排查起来很耗时间。所以命名最好在项目初期就定下来，并写进团队规范。
案例一：后台管理系统的菜单改造
某个中后台项目的侧边栏原本全是文字，团队想加上图标，让菜单更好扫读。一开始大家是从各处随手找的，结果有的是填充风格，有的是描边风格，还有两个图标的粗细差了一倍。菜单一排下来，看着很乱。
后来的做法是先列清单。一共需要 18 个图标，全部从同一个图标库里挑，统一选 24 像素、描边风格的版本。颜色用主题的文字色变量，选中状态切换为主色。改完之后，设计同学反馈整体一致性明显好了很多，新同事上手时也更容易靠图标找到对应功能。
这个案例说明，图标的关键在统一，数量倒在其次。挑选之前先把规格定下来，比改完之后一个个修省力得多。
案例二：技术文档里的架构配图
写技术方案时，经常要画一张系统架构图，把负载均衡、计算实例、数据库和对象存储串起来。如果每个组件都是纯文字方框，读者要花不少时间辨认。换成阿里云产品图标之后，组件之间的关系一下子就清楚了。
实际画的时候，有几点要留心。产品图标按官方提供的版本使用，不要自己重绘或改色，否则容易误导读者。同一张图里的图标尺寸尽量一致，连线之间留出足够空白，不然读者的注意力会先被线挤住。图标旁边最好保留文字标注，因为并非每个读者都熟悉全部产品的图形，文字能兜住这部分理解。
评审的时候，有位同事提过一个建议：架构图导出后，在文档里补一段文字，列出每个组件的作用。这样即使图片被截出来单独传播，关键信息也还在。这个习惯很实用，值得直接写进文档模板。
使用时需要留意的几件事
- 版权与授权：商用前看清条款。官方产品图标在不同用途下的许可范围可能不同，内部文档和对外宣传要分开确认。
- 尺寸与清晰度：小图标在高分辨率屏幕上容易发虚。优先用矢量格式；如果必须用位图，准备 2 倍或 3 倍版本，让页面在不同设备上都清楚。
- 颜色与对比度：图标和背景要有足够对比，浅色和深色模式下都要各看一遍。浅灰底上看着没问题的图标，切到深色模式可能就几乎看不见了。
- 无障碍：有实际含义的图标要配文字标签或 aria-label，不能只靠图形传递信息。纯装饰性的图标则设置 aria-hidden，避免读屏软件重复朗读。
- 命名与归档：按功能分类存放，文件名写清楚用途，比如 icon-upload-24-outline.svg 这类写法。团队复用起来方便，也能减少重复下载和版本混乱。
小结
阿里云小图标用得好，界面能更清楚，文档也更好读。关键是先弄清来源和授权，再统一风格和规格，最后把无障碍和多端适配做完。前期多花半小时规划，后面的维护成本会低很多。
