图标集授权、商标与可访问治理

大理论

产品图标至少有四层：主 UI 图标集、补充图标集、聚合 SVG 资源和品牌 logo。Lucide、Tabler、Radix Icons、Iconoir、Phosphor 这类图标集主要解决一致性和实现；Iconify、SVG Repo 解决覆盖面但授权按 set 或文件变化；Simple Icons 解决品牌 logo 索引，但商标和品牌指南仍需单独确认。

小知识点

1. 先选择一个主图标集，锁定 viewBox、grid、stroke/fill、端点、圆角、尺寸和状态规则，再决定是否允许辅集。
2. MIT、ISC、Apache 等项目授权通常适合常规 UI 图标，但仍要保留许可证和按需导入。
3. 聚合平台授权不等于具体图标授权；Iconify 按 icon set，SVG Repo 按资源页确认。
4. Simple Icons 项目数据为 CC0，但品牌 logo 仍受商标、品牌指南和使用上下文约束。
5. icon-only button 必须提供 aria-label 和可见/悬浮说明；纯装饰图标应 aria-hidden；状态图标必须配文字和颜色以外的提示。
6. 导入必须可 tree-shake：React 按单图标 import，SVG 保持 currentColor、稳定 viewBox 和可控 title/desc。

设计判断

如果一个图标无法说明它来自哪个 set、授权是什么、是否涉及商标、在当前尺寸下是否清晰、读屏如何理解它，就不能作为生产 UI 图标自动推荐。

实现建议

建立 icon source matrix：role、set、source URL、license、brand/trademark notes、viewBox、size、stroke/fill、import path、accessible name、interactive target、fallback 文案。主图标集负责 80% 常规动作和导航；辅集只用于明确缺口，并在组件 wrapper 中做尺寸和 stroke 归一。品牌 logo 只在真实品牌引用、集成、支付方式或授权合作中使用，不做装饰。

反例/风险

同一工具栏混用 15px Radix、24px Lucide 和 2px Tabler 却不归一；从 SVG Repo 下载 logo 后不看资源许可证；把 Simple Icons 的 CC0 理解为品牌商标可任意使用；icon-only button 没有名称；状态只靠红色错误图标表达。

案例分析

Radix Icons 官方说明图标为 15x15、MIT 授权并提供 React 组件，适合紧凑控件；Iconoir 标注 24px optical size、1.5 stroke、MIT 和多平台格式，适合轻量线性系统；Simple Icons 的免责声明提醒 CC0 项目并不等于每个品牌图标都没有授权或商标限制；SVG Repo 授权页列出 CC、Logo License 等多种资源边界，并说明 Logo License 不授予商标权。可学习点是：视觉一致性、资源授权和商标边界必须同时治理。

来源链接

Radix Icons: https://www.radix-ui.com/icons Iconoir: https://iconoir.com/ Simple Icons: https://simpleicons.org/ Simple Icons disclaimer: https://github.com/simple-icons/simple-icons/blob/develop/DISCLAIMER.md SVG Repo licensing: https://www.svgrepo.com/page/licensing/ Iconify icon sets: https://icon-sets.iconify.design/