Flat Icon Design
日本统一风格、色彩明快且可商用的扁平图标素材
我把 Carbon 的官方仓库、图标包说明和许可文件逐项对过一遍。Carbon Icons 是 Carbon Design System 的开源界面图标包，面向网页、应用和软件产品。它既能直接取得 SVG 源文件，也能通过 npm 接入前端项目。
这套图标的相关源码目录可以匿名公开读取，没有试用期、会员、积分或付费解锁。当前核验的固定提交为 6ecd79c0，包版本是 11.91.0，许可为 Apache License 2.0。免费使用仍要遵守再分发、商标与第三方素材的边界。
核心信息
| 项目 | 说明 |
|---|---|
| 资源类型 | 界面图标与前端图标包 |
| 主要格式 | SVG、JavaScript 模块 |
| 接入方式 | 原始 SVG、Vanilla JavaScript、React、Vue |
| 账号要求 | 浏览仓库和下载固定提交无需注册 |
| 免费范围 | 完整的 @carbon/icons 包与公开源目录，不含付费层或功能解锁 |
| 许可 | Apache License 2.0 |
| 商用 | 允许用于商业项目，也允许修改和再分发，但要继续履行许可条件 |
| 署名与文件 | 再分发时保留适用的版权、许可和通知材料，修改过的文件要说明改动 |
资源里有什么
固定提交的 packages/icons/src/svg/32 目录共列出 2779 个 SVG 文件。名称覆盖导航、文件、编辑、数据、开发、通信、状态提示和行业场景。官方包还会把图标构建成 ES 模块与 CommonJS 文件，按图标名和尺寸导入即可，不必把整包都塞进页面。
官方说明同时列出 React 与 Vue 的第一方框架包。只做设计稿的人可以在图标预览页按名称查找，再回到固定提交下载 SVG。开发者更适合安装 @carbon/icons，随后按项目使用的模块格式导入。
如何查找和下载
- 先打开官方图标预览页，用英文名称查找图标，并记下名称与尺寸。
- 需要单个文件时进入 packages/icons/src/svg/32 目录，在固定提交中下载对应 SVG。
- 需要在前端项目中持续使用时，通过 npm 安装 @carbon/icons，并按 ESM 或 CommonJS 的写法导入。
- 使用 React 或 Vue 时优先查看仓库中的第一方框架包，避免自己重复封装无障碍属性和组件接口。
- 正式上线以前检查图标在浅色、深色和高对比度界面中的显示效果，纯图标按钮还要补上可读名称。
许可与商用边界
| 使用方式 | 边界 |
|---|---|
| 商业界面 | Apache License 2.0 允许复制、修改、公开展示、再分发和商业使用。 |
| 修改图标 | 可以改线条、尺寸和组合方式。再分发修改文件时应留下明确的改动说明。 |
| 再分发源码 | 需要附上许可文本，并保留与所分发内容有关的版权、专利、商标和署名通知。 |
| 商标使用 | Apache License 2.0 不授予 IBM、Carbon 或其他项目名称与标志的商标使用权。 |
| 专利条款 | 许可包含有条件的专利授权。若发起许可中所述的专利诉讼，相关专利授权可能终止。 |
| 第三方素材 | 仓库其他目录可能采用不同条款。本文的免费结论只覆盖核验过的 @carbon/icons 包和图标源目录。 |
公开下载和开源许可已经覆盖这套图标的核心用途。把图标用于客户项目、付费应用或企业后台通常没有许可费。若要重新打包出售图标库、使用 IBM 商标做宣传，仍应让法务按实际分发方式复核。
限制与注意事项
@carbon/icons 安装后会调用 IBM Telemetry，官方说明它收集去标识化和匿名化的指标数据，也提供退出方法。对隐私、离线构建或供应链要求严格的团队，应在接入前阅读遥测文档，按官方方式关闭收集，并把设置写进构建环境。
图标多不等于每个语义都能直接套用。部分名称依赖 Carbon 的产品语境，放进自己的界面前要检查用户是否看得懂。SVG 默认颜色、视口和尺寸也要跟现有设计系统对齐，按钮图标不能替代文本标签和无障碍说明。
适合谁
正在做后台系统、数据产品和企业应用的设计师，可以把它当作成体系的界面图标来源。使用 Vanilla JavaScript、React 或 Vue 的开发者，能够直接采用官方包并按需导入。需要长期维护组件库的团队更适合固定版本与提交号，把许可文件、遥测设置和图标清单一起归档，后续升级时容易核对变化。
