官方入口：iconfont.cn
阿里图标库的官方域名是 iconfont.cn，全称「阿里巴巴矢量图标库」，由阿里巴巴团队维护，是一个以图标为主的矢量素材平台。 它不需要下载客户端，浏览器打开即可搜索、预览、加入项目并下载，注册登录后还能把图标整理成项目、生成前端可直接引用的代码。
它的使用人群其实分成两类，需求完全不同：设计师用它找图标做原型和界面，关心的是风格统一与格式（SVG、AI、PNG）；前端开发用它把图标变成字体或 SVG 符号，关心的是体积、颜色控制与调用方式。同一份素材，两类人下载的东西不一样，这一点在后面的引用方式里会展开。
| 入口 | 地址 | 说明 |
|---|---|---|
| 官网首页 | https://www.iconfont.cn | 搜索、素材库、项目管理的总入口 |
| 图标库检索 | 首页搜索框 | 支持中文、英文、拼音描述检索，也可用一句话描述找图标 |
| 素材库 | 首页「图标库 / 矢量插画库 / 3D 插画库 / Lottie 库 / 字体库」 | 按素材类型分区，不只是图标 |
| 项目管理 | 登录后右上角「我的项目」 | 建项目、批量加图标、生成引用代码 |
| 帮助中心 | 站内「帮助」 | 引用方式、上传规范、常见问题 |
| 移动端 | 手机浏览器访问官网 | 可浏览与收藏，下载与项目管理建议在电脑上做 |
需要说明的是，平台以免费使用为主，个别素材或增值功能可能标注权限差异，具体以下载页与素材详情页的标注为准，不要默认所有内容都无限制可用。
四步完成一次下载
第一步：搜索并筛风格
在搜索框输入关键词，比如「购物车」「设置」「箭头」。结果页会给出风格筛选（线性、面性、手绘、渐变等）与配色筛选。先定风格再挑单个图标，否则从不同图标库里各拿一个，最后拼出来的界面风格是散的。
搜不到时有两个办法：换同义词（「删除」换「垃圾桶」「清空」），或者用描述式检索找相近图形。图标命名习惯差异很大，同一个概念可能叫「设置」「齿轮」「偏好」。
第二步：加入项目，而不是逐个下载
这是最关键的一步，也是新手最容易跳过的一步。点图标右上角的加号，把它加入购物车或直接加入项目；没有项目就先新建一个，命名按用途来（如「后台导航」「移动端通用」）。
为什么要走项目，而不是一个个下载 SVG？ 因为项目会把图标集合成一套字体或一个 SVG 符号文件，前端只需要引一次，后续新增图标时重新下载覆盖即可，不用改动页面代码。如果你只做一两张图、临时用一下，直接下载 SVG 或 PNG 更快；但只要是成体系的产品界面，都应该走项目。
第三步：选择下载格式
在项目页点「下载至本地」，会得到一个压缩包，里面包含不同引用方式所需的文件。项目页同时提供「下载素材」按钮，可以单独拿到 SVG、AI、PNG 三种格式：
- SVG：矢量，可无损缩放，能直接在代码里改颜色，设计稿与前端通用
- AI：Illustrator 源文件，适合二次编辑路径
- PNG：位图，适合 PPT、文档、不支持矢量的场景，放大后会糊
格式选错是最常见的浪费。用 PNG 做高分辨率界面会失真，用 AI 源文件塞进网页则完全没必要。
第四步：按引用方式接入
压缩包里的说明文件会给出对应的引入代码。三种方式的差别见下一节。无论选哪种，都要注意图标颜色由 CSS 的 color 控制，不要试图改图片本身的颜色——这是字体图标相对图片的核心优势。
三种引用方式的差别
| 方式 | 原理 | 优点 | 局限 | 适用场景 |
|---|---|---|---|---|
| unicode | 图标作为字体字符插入，用编码引用 | 兼容性最好，支持动态调整大小与颜色 | 语义不直观，编码难记，读代码时看不出是什么图标 | 老项目、需要兼容低版本浏览器 |
| font-class | 在 unicode 基础上封装类名 | 书写直观，语义清晰，改图标只改类名 | 本质上仍是字体，多色图标支持有限 | 大多数常规 Web 项目 |
| symbol | 以 SVG 符号形式注入，用 use 引用 | 支持多色图标，矢量清晰，可按 CSS 控制 | 需要引入一段脚本，旧浏览器兼容性弱于字体方案 | 新项目、需要彩色图标 |
一句话选择：新项目直接用 symbol，维护中的老项目顺着原有方式加，不要为了统一而重构整个图标体系。 字体图标改起来牵一发动全身，收益往往抵不过风险。
还有一个细节值得说清：三种方式都支持「只引入用到的图标」。如果你把整个图标库的字体文件全量引入，文件会明显变大，首屏加载受影响。项目里选完图标后再下载，就是为了只打包这几个。
上传自有图标：四条硬规范
如果团队要维护自己的图标库，把原创图标上传到平台是常见做法。上传环节失败率高，多数不是平台的问题，而是文件不符合规范：
- 描边必须轮廓化。设计师习惯用描边画线，但字体转换只认闭合的填充图形，未轮廓化的线条转出来会变成细缝或者直接丢失。
- 画布按 1024×1024 绘制，图形撑满对齐框。画布太小会让不同图标的视觉大小不一致，一个看起来偏大、一个偏小，排在一起很明显。
- 纯色填充，不用渐变。字体图标的颜色由 CSS 控制，渐变填充在转换后会被压成单色，效果和设计稿完全不同。
- 存储为 SVG 而不是导出为 SVG。导出会附带大量编辑器的元数据与图层结构，平台解析时容易报错或路径错乱。
命名同样重要。建议按「用途-模块-序号」的格式，并补齐中英文标签，检索时才能被搜到。团队协作时，命名规范比图标数量更影响效率——一个叫「icon-1」的图标，三个月后没人记得它是干什么的。
授权：平台是素材托管方，不是版权方
这是使用阿里图标库时最需要弄清、也最容易被忽略的一点：iconfont 上的图标由不同设计师、设计团队或公司上传，版权归上传方，平台提供的是托管、检索与格式转换服务，并不统一授予商用许可。
因此会遇到三种情况：
- 图标详情页或所属图标库明确写了「可商用」「遵循某开源协议」——按标注使用
- 只写了作者与团队名，没有授权说明——需要自行联系作者确认，不能默认可以商用
- 标注「仅供学习交流」——商用场景应避开
判断方法很简单：点进图标，看它属于哪个图标库、库里有没有授权说明。 这一步花三十秒，能避免后面很麻烦的纠纷。企业项目尤其要注意，很多公司会把「素材来源与授权」写进设计规范，就是为了留痕。
另外，把字体图标嵌进产品时，字体文件本身也属于软件资源。不要把整个字体包当作自有资产再分发，这和自己用是两件事。
常见问题
阿里图标库官网是哪个？ 官方域名是 iconfont.cn，中文全称「阿里巴巴矢量图标库」，由阿里巴巴团队维护。浏览器直接访问即可使用，不需要安装客户端。
用阿里图标库要注册吗？ 浏览和搜索不需要登录，但下载、加入项目、生成引用代码都需要登录账号。平台支持第三方账号登录，具体可用的登录方式以登录页显示为准。
下载的图标能商用吗？ 取决于图标上传者设定的授权，平台不统一授予商用许可。使用前应查看图标所属图标库的授权说明，没有明确说明时需联系作者确认，标注仅供学习交流的不建议商用。
为什么下载的图标改不了颜色？ 如果下载的是 PNG 或彩色 SVG，颜色已经固定。要改色应使用字体图标（unicode 或 font-class），通过 CSS 的 color 属性控制；symbol 方式则可对 SVG 内部路径单独设色。
图标显示成方块或问号怎么办？ 通常是字体文件没加载成功，依次检查：CSS 里的字体路径是否正确、字体文件是否被服务器正确返回、跨域配置是否允许字体加载。另外，编码写错（少写 &#x 前缀或分号）也会显示成方块。
避坑提示
- 只认 iconfont.cn。出现
iconfont.com、iconfont.cn.com、aliicon.net这类近似域名的站点，不是官方入口，页面上的「高速下载」「一键打包」按钮多为诱导。 - 不需要装任何客户端。官方是网页工具，任何要求「安装图标助手才能下载」的安装包都应停手。
- 警惕「代下素材包」。搜索结果里卖「百万图标合集」的，多数是把公开素材重新打包，既无法追溯授权，也可能夹带推广文件。
- 同一套界面别混多个图标库。不同图标库的线条粗细、圆角半径、视觉重心都不一样，混用会让界面看起来廉价，这比版权问题更早暴露。
- 上线前检查体积。图标字体全量引入是常见的性能坑，一个几百 KB 的字体文件会直接影响首屏。
最后补一句实用建议：如果团队长期做同一类产品，值得在项目里维护一个「自有图标库」，把常用图标统一上传、统一命名、统一风格，后续所有人从这一个库里取。这比每次临时搜索要省事得多，也是图标管理真正成熟的做法。
