一套图标看起来统一并不等于它是“系统”。真正的图标系统还要解决语义唯一性、尺寸和光学平衡、交互目标、可访问名称、代码引用和贡献治理。本文从设计到开发拆解完整流程。
图标库最容易在早期看起来很漂亮，后期却越来越乱：同一个“编辑”出现三种笔形状，同一个“下载”有实心和线性两套风格，16px 图标被直接缩放成 14px，设计师在 Figma 里叫 add-circle，代码里叫 plusRound。真正的问题不是画得不够好，而是没有建立系统。
01 一、先做语义盘点，不要从画风开始
第一步不是决定 1.5px 还是 2px Stroke，而是把产品中的动作、对象和状态列出来：新增、删除、编辑、筛选、下载、权限、通知、展开、外链、成功、警告等。检查同义词和重复图标，确定“一种核心含义对应一个主要符号”。Carbon 在图标贡献规范里明确要求新图标不要与已有图标冗余，这正是维护大型图标库最关键的规则之一。
02 二、区分 Icon、Pictogram 和 Illustration
产品 Icon 用于操作和快速识别，必须在小尺寸清晰；Pictogram 更偏概念表达，适合更大的尺寸；Illustration 则承担情绪和叙事。不要因为视觉统一，把复杂插画压缩成 16px 操作图标。Carbon 也明确将 Pictogram 与 UI Icon 分开，并建议 Pictogram 从更大尺寸使用。
03 三、尺寸是系统，不是缩放按钮
Carbon 当前图标库支持 16、20、24、32px，并强调不同尺寸需要保持视觉平衡。一个 32px 图标直接等比缩成 16px，细节很可能糊成一团。专业图标系统应该定义主力尺寸，并针对小尺寸减少细节、调整负空间和笔画。
同时要区分“视觉图标尺寸”和“可点击区域”。Carbon 的图标规范建议交互目标达到 44px 或更大；WCAG 2.2 AA 的 Target Size (Minimum) 要求目标至少能容纳 24×24 CSS px，或满足相应间距例外。也就是说，16px 图标完全可以放在 40–48px 的按钮容器里，不能因为图标小就让点击区域也只有 16px。
04 四、网格是约束，但光学校正同样重要
建议为每个标准尺寸建立固定 Artboard、Padding、安全区和关键对齐线，并尽量落在整数像素上。Carbon 的生产规范强调像素网格和整像素坐标，是为了降低小尺寸渲染模糊。
但几何中心不等于视觉中心。三角形播放图标放在数学中心往往看起来偏左，圆形和方形的视觉面积也不同。因此系统应该允许有限的光学校正，并记录原则，而不是只用自动居中。
05 五、风格规范要描述“生成规则”，而不是只放样例
一套可扩展的图标规则至少包括：线性还是实心、端点和拐角、默认笔画、填充逻辑、透视、圆角、负空间、是否允许斜线、细节最小尺寸。这样新图标可以根据规则继续生长，而不是每次靠设计师模仿旧图。
06 六、图标语义不能只靠图形猜
熟悉的搜索、关闭、下载图标通常容易理解，但权限、AI、同步、归档等抽象动作很容易产生歧义。高风险或不常见操作建议搭配文字标签；如果是只有图标的按钮，需要给控件提供可访问名称。装饰性图标则应该避免被屏幕阅读器重复朗读。
还要注意跨文化语义：某些手势、邮箱、货币和方向符号在不同地区理解可能不同。全球化产品不应把“我们团队都看懂”当作普适性证据。
07 七、颜色不要成为图标的唯一意义
错误、成功和警告可以使用颜色强化，但应同时使用形状或文字。普通图标颜色应该引用语义 Token，例如 icon-primary、icon-secondary、icon-disabled，而不是在每个 SVG 里写死 #666666。这样深色模式、主题和状态切换才能统一。
08 八、SVG 交付要考虑开发，而不是只考虑导出成功
生产用 SVG 应保持 viewBox 一致、路径简洁、避免无意义 group 和隐藏图层，并通过统一包按名称引用。不要让开发从设计稿里手工复制 SVG。图标名称、尺寸和弃用状态最好能从同一源生成 Figma 库和代码包。Carbon v11 将图标组件和尺寸 prop 统一，就是减少不同尺寸重复导出的典型做法。
09 九、图标库同样需要版本和贡献机制
每个新增图标都应该先搜索已有库，确认不存在近义重复；修改已有图标时要评估含义是否变化、是否会影响用户熟悉度和截图基线。删除图标要提供替代名称和迁移期。图标数量越大，治理的重要性越高。
10 十、图标命名和搜索体验决定规模上限
图标从几十个增长到几百个以后，最大问题往往不是画不出来，而是找不到。名称应以语义和动作优先，例如 download、filter、archive，再用 alias 补充常见同义词。不要让同一图标在 Figma 叫 arrow-down，代码叫 chevron-bottom，文档又叫 expand。搜索关键词、分类、弃用别名和替代图标都应该成为库的一部分。
11 十一、品牌图形不要混进操作图标
品牌 Logo、服务 Logo、产品 Pictogram 和 UI 操作图标应该分库管理。品牌图形强调识别和表达，操作图标强调任务清晰和高频一致性。把一个复杂品牌符号当作 16px 操作图标，会同时损伤品牌和可用性。
12 十二、最终验收不要只看一张图标墙
把图标放回真实组件：按钮、表格工具栏、侧边导航、空状态、Toast、移动端底栏。检查 100% 缩放、不同屏幕密度、深浅主题、Focus 状态和文本并排后的视觉平衡。还要用真实用户任务验证少见图标是否需要文字辅助。图标系统不是一套作品集，它是产品中被高频重复使用的语言。
常见问题
UI 图标应该统一用 16px 吗？
不必。可以定义 16、20、24、32 等标准尺寸，不同组件使用不同级别。关键是避免任意缩放和随机尺寸。
图标笔画必须完全一样粗吗？
整体风格需要一致，但复杂形状可能需要光学校正。规则应优先保证小尺寸清晰和视觉重量一致。
只有图标的按钮一定要写 Tooltip 吗？
Tooltip 可以帮助理解，但不能替代控件本身的可访问名称。高频常见图标是否需要 Tooltip要根据可理解性判断。
图标点击区域多大合适？
WCAG 2.2 AA 对 Target Size (Minimum) 提供 24×24 CSS px 的最低要求及例外；很多设计系统和移动平台会采用更大的触控目标，例如约 44px。
图标库越来越大怎么办？
加强命名和语义搜索，建立新增贡献门槛，定期合并近义图标并弃用重复项，而不是继续用分类文件夹掩盖重复。
相关服务与进一步咨询
链接复制成功
