阿里巴巴图标完整使用指南：资源获取、格式规范与开发集成全攻略

如果你在某个电商 App 里点过购物车图标，在某个企业管理后台看过菜单折叠图标，在某个支付页面见过那个极简的安全锁，那些图标里有相当一部分来自同一个地方——iconfont.cn，阿里巴巴旗下的矢量图标托管平台。这个平台从 2012 年前后开始运营，最初是阿里内部设计团队的资源共享工具，后来逐步向公众开放，演变成目前国内规模最大、使用最广的图标设计资源生态。

所谓阿里巴巴图标，在日常语境里通常指两个层面的东西：一是 iconfont 平台上由阿里巴巴官方团队发布和维护的图标集，这些图标集风格严谨、品类完整，覆盖电商、金融、物流、企业服务等阿里核心业务场景；二是更宽泛意义上的"iconfont 图标"，即所有托管在 iconfont.cn 上、可供设计师和开发者使用的矢量图标资源，包括阿里官方图标和社区用户上传的图标。两者共享同一套平台基础设施，但在版权归属和授权规则上有所不同，使用前需要区分清楚。

阿里巴巴图标在阿里设计体系中的位置

阿里巴巴内部有一套完整的设计语言体系，涵盖色彩、字体、间距、组件等多个维度，图标是其中的重要组成部分。阿里巴巴图标不是孤立存在的，它与阿里旗下的 Ant Design（蚂蚁集团前端设计语言）、Fusion Design（阿里巴巴商业产品设计体系）共同构成了阿里系产品的视觉基础层。

Ant Design 本身内置了一套 icon 组件库，其底层图标资源与 iconfont 平台深度打通，开发者在 antd 项目里可以直接用 <Icon type="xxx" /> 的方式调用阿里巴巴图标，背后的 SVG 资源来自同一套图标系统。这种设计到代码的一体化路径，是阿里巴巴图标区别于很多其他图标库的核心优势——它不只是一堆图片文件，而是嵌入到了一整套研发工作流里。

为什么阿里巴巴图标在国内如此普及

有几个原因共同造就了阿里巴巴图标的高普及率。首先是中文语境的适配：很多国际图标库（比如 Font Awesome 或 Material Icons）在设计时以欧美产品场景为主，缺少"收藏"、"旺旺"、"红包"、"物流追踪"这类中国特色场景的图标，而 iconfont 平台上这类本土化图标资源极为丰富。其次是生态闭环：iconfont 不只是一个图标下载站，它同时提供在线项目管理、图标代码生成、团队协作、CDN 分发等一整套工具链，设计师和开发者可以在同一个平台上完成从搜索到集成的全部流程。

另一个不可忽视的因素是阿里的产品背书。当国内大量互联网产品（包括淘宝、天猫、钉钉、饿了么、优酷等）都在使用 iconfont 平台管理图标时，外部团队在选型时天然会优先考虑这个平台——一方面是技术熟悉度，另一方面也是对图标风格与主流产品保持视觉一致性的诉求。这种网络效应让阿里巴巴图标在国内设计和开发圈形成了接近标准的地位。

阿里巴巴图标的规模：一个量化视角

从公开信息来看，iconfont 平台的图标总量通常在数百万级，其中官方图标集的数量按品类划分，单个图标集的规模一般在 50 至 500 个图标之间。阿里官方发布的图标集涵盖通用图标（箭头、状态、操作）、行业图标（金融、电商、医疗）和品牌图标（各产品线 logo 变体）三大类。本文中提到的具体数字均以 iconfont 平台公开信息为准，平台实时数据以官网展示为准，不臆造精确值。

iconfont.cn 的产品设计思路和一般的图片素材网站有明显区别。它的核心逻辑不是"下载单个文件"，而是"管理图标项目"。你在平台上找到需要的图标后，不是直接下载一个 PNG 就结束，而是把它加入到你的"项目"里，然后平台会给你生成一个专属的资源包——可以是字体文件（TTF/WOFF/WOFF2）、可以是 SVG Sprite、也可以是一个包含所有图标的 JS 文件。这套项目化管理的设计，让图标资源的维护和版本控制变得清晰很多，特别适合团队协作场景。

平台的图标来源分为两部分：一是阿里巴巴内部设计团队上传的官方图标集，这类图标集通常有明确的品类标注和设计规范说明；二是社区用户（包括外部设计师和其他企业）上传的图标，数量庞大但质量参差不齐。对于追求图标一致性的项目，建议优先从官方图标集里选取，或者在搜索结果里过滤"官方"标签。

iconfont 平台的核心功能模块

平台的功能架构大致分为四块：图标搜索与发现、项目管理与编辑、代码生成与分发、团队协作与权限。搜索功能支持关键词搜索和图形搜索（上传一张图找相似图标），可以按风格（线性/面型/多色）、颜色、上传者过滤结果。项目管理模块允许你把不同业务模块的图标分组，设置自定义前缀（避免多个项目的图标类名冲突），还可以在线调整图标颜色和大小。

代码生成是 iconfont 最有价值的功能之一。进入项目页面后，平台会实时生成 CDN 链接——这个链接指向一个动态构建的资源文件，你在项目里增减图标后，链接不变但内容会更新。这意味着你不需要每次改动都重新下载资源包、重新部署，只要更新项目配置，线上资源会自动同步。这个特性对于快速迭代的产品开发来说非常实用，但也要注意：如果你的项目对资源稳定性要求高（比如已经上线的 C 端产品），建议下载资源包到本地部署，而不是依赖平台 CDN，以避免平台维护或网络波动带来的影响。

平台账号体系与权限说明

使用 iconfont 平台需要注册账号，可以用支付宝账号直接登录。免费账号可以创建多个图标项目，使用大多数免费图标，以及生成 CDN 链接和下载资源包。平台还提供企业版服务，支持更大规模的团队协作、私有图标集管理和更完整的权限控制。对于大型企业的设计团队，企业版能解决图标资产统一管理的问题，避免不同业务线使用图标不一致的情况。

值得注意的是，iconfont 平台的图标并非全部可以免费商用。每个图标都有单独的授权说明，部分图标只允许个人和非商业使用，部分图标明确标注"允许商用"。在正式项目里使用图标前，需要逐一核查授权信息，这是很多开发者容易忽略的细节。关于商用授权的完整说明，在本文后面的授权章节里有详细展开。

同一个阿里巴巴图标，可以有完全不同的技术形态。选哪种格式，直接影响图标在项目里的渲染质量、文件体积、可维护性以及兼容性。这三种格式不是谁比谁好，而是各有最适合的使用场景。

SVG（可缩放矢量图形）是最接近图标本质的格式。它的内容是一段描述路径、填充和变换的 XML 文本，不依赖像素，在任何分辨率下都不会失真。SVG 文件可以直接嵌入 HTML，也可以用 CSS 修改颜色和大小，还可以用 JavaScript 操作其内部节点做动效。对于现代 Web 项目，SVG 是首选格式，特别是在需要支持多分辨率屏幕（包括 2x、3x Retina 屏）的场景下，SVG 不需要输出多套位图，一份文件搞定所有尺寸。

PNG是位图格式，适合需要固定尺寸输出或在不支持 SVG 的环境里使用的场景。PNG 图标在放大后会模糊，所以需要为不同分辨率分别导出（通常是 1x、2x、3x 三套）。PNG 的优势是兼容性极强，几乎所有图形处理场景都能用，也方便在 Word 文档、PPT 等非 Web 环境里使用。设计评审稿里的图标通常用 PNG，上线项目里则应尽量用 SVG 替代。

IconFont是把图标编码进自定义字体文件的技术方案。图标被当作字符处理，用 CSS 的 font-family 引入，用 content 属性的 Unicode 码点或 CSS 类名来调用。IconFont 的核心优势是文件体积小（一个包含几百个图标的字体文件通常只有几十 KB）、CSS 控制方便（颜色、大小、阴影都可以用 CSS 直接改）。但它有一个明显限制：只支持单色图标，不能表达多色渐变效果。

三种格式的选型建议

给一个实际的选型判断框架：如果你在做一个 2024 年之后启动的新 Web 项目，优先选 SVG Symbol 方案，它同时具备 IconFont 的集中管理优势和 SVG 的多色/无损优势，是目前最均衡的选择；如果你在维护一个图标数量超过 300 个的旧项目，Font Class 方案迁移成本低，稳定性好，不需要动；如果你要给运营同学准备可以直接拖入 PPT 的图标素材，给 PNG，别给 SVG，格式兼容性更重要。

难度：初级  |  预计耗时：10–15 分钟（首次配置）

1. 注册并登录 iconfont.cn

   访问 iconfont.cn，点击右上角「登录」，使用支付宝账号扫码授权登录（国内用户最方便），或用邮箱注册一个独立账号。登录后进入个人中心，建议先在「我的项目」里新建一个项目，命名为当前业务模块（如「订单系统图标」），设置好图标前缀（如 icon-order-），这样后续批量添加图标时不会和其他项目的类名冲突。

2. 关键词搜索并精准筛选

   在顶部搜索框输入中文关键词（如"购物车""箭头""删除"），平台会返回所有匹配的图标。搜索结果默认混合展示官方图标和社区图标，建议在左侧筛选面板里勾选「官方图标集」过滤，或者按风格选择「线性」「面型」等，保证图标风格统一。也可以直接浏览阿里官方的图标集页面，从完整的图标集里批量选取，比逐个搜索效率高很多。

3. 加入购物车并收录到项目

   鼠标悬停在图标上，会出现「加入购物车」和「下载」两个按钮。选好多个图标后，点右上角购物车，选择「批量加入项目」，把图标收录到你刚才创建的项目里。也可以直接把整个官方图标集加入项目，然后在项目里删除不需要的图标——这比逐个搜索要快。加入项目后，可以在项目管理页对图标进行重命名（改成语义化的 icon-cart、icon-close 等命名），方便后续在代码里引用。

4. 生成代码链接并集成到项目

   进入项目管理页，顶部有三个 tab：「Unicode」「Font Class」「Symbol」，选择你需要的引用方式后，平台会显示对应的 CDN 链接和示例代码。CDN 链接格式类似 //at.alicdn.com/t/font_XXXXXX_XXXXXXXXX.js，把这个链接加入你项目的 HTML 即可在线使用。如果需要离线使用，点「下载至本地」会得到一个 ZIP 压缩包，里面包含字体文件（TTF/WOFF/WOFF2）、CSS 文件和 Demo HTML。

一分钟走一遍：从搜索到页面显示

1. 搜索「购物车」图标

   在 iconfont 搜索"购物车"，找到一个线性风格的官方图标，点「加入项目」选择已有项目。此时项目里新增了 icon-cart（已提前重命名）一个图标。

2. 切到 Symbol tab，复制 JS 链接

   进入项目页，点「Symbol」tab，复制 JS CDN 链接，格式为 //at.alicdn.com/t/font_XXXXX.js。在 HTML 的 <head> 里加 <script src="这个链接"></script>。

3. 在页面里调用图标

   在 HTML 里写 <svg class="icon"><use href="#icon-cart"></use></svg>，加上 CSS .icon { width:24px; height:24px; fill:currentColor; }，刷新页面，购物车图标出现在页面上。整个过程不超过 3 分钟。

方式一：Unicode 引用

Unicode 是最早期的引用方式，本质上是把图标当成字符来显示。你需要引入平台生成的字体文件，然后在 CSS 里定义字体，在 HTML 里用 &#x{unicode码点}; 或者直接写 Unicode 字符来调用图标。

这种方式的最大问题是可读性差——代码里只有一个 Unicode 码点，没有语义信息，维护时很难知道这个字符对应哪个图标。好处是浏览器兼容性最好，连 IE6 都能用。在 2018 年之前这是主流方案，现在除非有严苛的老浏览器兼容需求，否则不建议新项目采用。

/* CSS */
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2') format('woff2'),
       url('iconfont.woff') format('woff');
}
.iconfont { font-family: "iconfont"; font-style: normal; }

/* HTML */
<span class="iconfont">&#xe6b2;</span>

方式二：Font Class 引用

Font Class 是对 Unicode 方式的改进。平台会自动生成一个 CSS 文件，把每个 Unicode 码点映射到一个语义化的类名（如 .icon-cart），你只需要在 HTML 里写 <span class="iconfont icon-cart"></span> 就能显示对应图标。类名是可读的，维护起来比 Unicode 方便很多。

Font Class 的使用门槛低，不需要了解 SVG 知识，CSS 控制颜色和大小非常直观，是目前国内很多旧项目的存量方案。它的局限和 Unicode 一样：只支持单色图标，图标本质上是字体字符，有时候会被浏览器的字体渲染引擎处理，在某些操作系统上可能出现轻微的渲染差异。

/* 在 head 里引入平台生成的 CSS */
<link rel="stylesheet" href="//at.alicdn.com/t/font_XXXXX.css">

/* HTML 中使用 */
<span class="iconfont icon-cart" style="font-size:24px;color:#333"></span>

方式三：Symbol 引用（推荐）

Symbol 是目前最推荐的引用方式。平台会生成一个 JS 文件，里面包含一个隐藏的 SVG 元素，其中定义了所有图标的 <symbol>。你引入这个 JS 后，在页面任意位置用 <svg><use href="#icon-name"></use></svg> 就能复用对应的图标，不会产生额外的 HTTP 请求。

Symbol 方案的优势是：支持多色图标（每个 path 可以有独立的颜色）、支持 CSS 动效、语义化好、不依赖字体渲染，图标在任何设备上的显示效果更稳定。唯一的历史包袱是 IE 不支持 <use href>（IE 只认 xlink:href），如果需要兼容 IE11 以下，需要额外的 polyfill（如 svg4everybody）。但在 2026 年，IE 支持已经不是大多数项目的必须项了。

/* 在 body 末尾引入 JS */
<script src="//at.alicdn.com/t/font_XXXXX.js"></script>

/*
CSS 全局样式 */
.icon { width: 24px; height: 24px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

/* HTML 中使用 */
<svg class="icon" aria-hidden="true">
  <use href="#icon-cart"></use>
</svg>

方式四：SVG 直接内联

从 iconfont 下载单个 SVG 文件后，可以直接把 SVG 代码粘贴进 HTML。这种方式不需要任何额外引用，图标的 path 数据直接在 DOM 里，CSS 和 JS 都可以精确操作每一个节点。对于需要做图标动效（路径动画、颜色渐变过渡）的场景，内联 SVG 是唯一能完整实现的方案。代价是 HTML 体积增大，图标多了之后代码可读性下降，通常配合构建工具（如 vite-plugin-svg-icons）自动化处理。

图标设计不是随意画一个小图形那么简单。阿里巴巴图标体系背后有一套完整的栅格规则和尺寸标准，遵守这套规则的图标在不同尺寸下都能保持清晰、对齐和视觉一致性；不遵守的图标放到产品里会显得"不合群"，在小尺寸下尤其明显。

画布与栅格基准

iconfont 平台要求上传的图标画布尺寸为 1024 × 1024 px，这是设计基准尺寸。图标的实际内容区域通常不会铺满整个画布，而是留有约 10%–15% 的内边距，即内容区大约在 870–900 px 的范围内。这个内边距的作用是保证图标在和文字或其他元素对齐时有视觉上的呼吸感，不会显得太"顶边"。

栅格基准单位是 8 px。Web 端图标的常用渲染尺寸——16、24、32、48 px——都是 8 的倍数，这不是巧合。8px 栅格系统是 Google Material Design 和 Ant Design 共同采用的间距体系，图标尺寸和间距都遵循这个基准，能保证在不同组件里的视觉对齐。在 Figma 或 Sketch 里设计图标时，建议开启 8px 栅格显示，图标的关键节点（路径端点、转角）尽量落在栅格线上，这样在小尺寸渲染时像素对齐更准确，不会出现模糊的半像素边缘。

描边与填充规范

阿里巴巴图标体系里的线性图标（outline style）有明确的描边粗细规范：在 1024px 画布上，描边宽度通常在 60–80 px 之间（对应实际渲染 24px 时约 1.5–2 px 的视觉粗细）。描边太细（低于 40px）在小尺寸下会消失；太粗（超过 100px）会让图标显得笨重。上传到 iconfont 之前，必须把描边转换为填充路径（Outline Stroke），否则平台生成的字体文件会丢失描边信息。

面型图标（solid/filled style）则完全用填充路径表达，没有描边，视觉重量更大，适合需要强调的操作按钮或状态指示。在同一个产品里，线性图标和面型图标通常不混用，或者只在"选中/未选中"状态切换时使用（未选中用线性，选中用面型）。

多色图标的使用规范

iconfont 平台支持多色图标，但使用时有几个注意点。多色图标只能通过 Symbol 方式引用，Font Class 和 Unicode 方式不支持多色。多色图标的颜色在 SVG 里是硬编码的，不能像单色图标那样通过 CSS 的 color 属性统一修改，如果需要主题色切换，需要在 SVG 里用 CSS 变量替换颜色值，或者通过 JS 动态修改 SVG 属性。在设计多色图标时，建议控制颜色数量在 3 种以内，颜色过多会让图标在小尺寸下显得杂乱。

这是很多开发者和设计师最容易踩坑的地方。iconfont 平台上的图标并不是"全部免费商用"，这个误解在网上流传很广，但实际上每个图标都有独立的版权归属和授权协议。平台在图标详情页会显示授权类型，常见的有：「个人使用」（只能用于非商业项目）、「允许商用」（可以用于商业项目，无需额外申请）、「需授权」（商用前需联系作者获得书面授权）。

阿里巴巴官方团队发布的图标集，其授权规则通常比社区图标更明确。官方通用图标集（如箭头、状态、操作类图标）一般允许在遵守平台使用协议的前提下商用；但涉及阿里巴巴品牌标识的图标（如天猫 logo、淘宝 logo、支付宝 logo 等），属于注册商标，第三方不得在商业场景中使用，这是法律层面的硬性限制，不是平台授权能覆盖的范围。

商用前的核查清单

在正式项目里使用阿里巴巴图标之前，建议做以下几步核查：第一，进入每个图标的详情页，查看「版权信息」或「授权」标签，确认是否允许商用；第二，如果图标来自某个图标集，查看该图标集的整体授权说明，有时候图标集层面的授权会覆盖单个图标；第三，如果图标标注「需授权」，通过平台的私信功能联系作者，获取书面授权后保存记录；第四，定期检查项目里使用的图标授权状态，因为作者有权修改授权条款，之前允许商用的图标可能在某次更新后改变了授权。

本站整理的授权信息以 iconfont 平台公开资料为准，具体图标的授权状态以平台实时显示为准，不臆造授权结论。如有法律疑问，建议咨询专业知识产权律师。

不提供未经授权的图标资源下载路径，也不建议绕过平台授权机制使用图标。尊重原创设计师的劳动成果，是维持 iconfont 这个生态健康运转的基础。

在现代前端框架里使用阿里巴巴图标，不只是把 CDN 链接粘贴进 HTML 那么简单。一个做得好的图标集成方案，应该支持按需加载（不把用不到的图标打进包里）、类型安全（TypeScript 项目里图标名有自动补全）、主题色响应（图标颜色跟随设计 token 变化），以及方便的封装组件（不用每次都写一长串 SVG 标签）。

React 项目：Symbol 方案封装

最简单的 React 集成方式是封装一个 Icon 组件，内部用 SVG use 标签引用 Symbol。这个方案不需要额外的构建配置，图标资源通过 iconfont 的 CDN JS 文件统一加载。

// components/Icon.tsx
interface IconProps {
  name: string;
  size?: number;
  color?: string;
  className?: string;
}

export const Icon = ({ name, size = 24, color = 'currentColor', className }: IconProps) => (
  <svg
    className={className}
    width={size}
    height={size}
    style={{ fill: color, verticalAlign: '-0.15em', overflow: 'hidden' }}
    aria-hidden="true"
  >
    <use href={`#icon-${name}`} />
  </svg>
);

// 使用方式
<Icon name="cart" size={24} color="#333" />

React 项目：@svgr/webpack 按需引入方案

对于追求打包体积优化的项目，推荐用 @svgr/webpack 把 SVG 文件转成 React 组件。这个方案的优势是 Tree-shaking 友好——只有实际用到的图标才会被打进最终 bundle，没用到的图标不占体积。配置完成后，可以像导入普通组件一样导入图标。

import { defineConfig } from 'vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[name]',
    }),
  ],
});

Vue 3 项目：全局 Icon 组件注册

Vue 3 项目里的集成思路和 React 类似，封装一个全局 Icon 组件后，在 main.ts 里注册，之后在任意模板里直接用 <Icon name="cart" /> 调用，不需要每个文件单独导入。

在 main.ts 里 app.component('Icon', Icon) 全局注册后，模板里直接写 <Icon name="cart" :size="20" /> 即可。如果项目用了 TypeScript，可以额外维护一个图标名称的联合类型，让 IDE 在输入图标名时有自动补全提示，减少拼写错误。

移动端图标适配是很多设计师和开发者容易忽略的环节。Web 端用 SVG 可以一份文件搞定所有分辨率，但原生 App（iOS 和 Android）的图标资源管理逻辑完全不同，需要针对不同屏幕密度分别导出位图资源，或者使用矢量格式的原生支持方案。

iOS 适配：三倍图导出流程

iOS 的屏幕密度分为 @1x（非 Retina，基本已淘汰）、@2x（普通 Retina）、@3x（Plus/Pro 系列高密度屏）三档。从 iconfont 下载 SVG 后，在 Sketch 或 Figma 里按设计稿尺寸（通常以 @2x 为基准，即 375pt 宽度的设计稿对应 750px 的画布）导出三套 PNG：假设设计稿里图标是 24pt，则导出 24px（@1x）、48px（@2x）、72px（@3x）三套，文件命名规则为 icon_cart.png、icon_cart@2x.png、icon_cart@3x.png，放入 Xcode 的 Assets.xcassets 里对应的 Image Set 即可。

更现代的做法是在 iOS 项目里直接使用 PDF 矢量格式——把 SVG 转成 PDF 后导入 Xcode，勾选「Preserve Vector Data」，系统会自动在不同密度屏幕上渲染合适的尺寸，不需要手动导出多套 PNG。这个方案减少了资源文件数量，但在某些复杂图标上可能有渲染细节差异，需要实机测试确认。

Android 适配：多密度资源目录

Android 的屏幕密度分级更细，标准的五档是：mdpi（160dpi，1×）、hdpi（240dpi，1.5×）、xhdpi（320dpi，2×）、xxhdpi（480dpi，3×）、xxxhdpi（640dpi，4×）。对应的图标资源放在 drawable-mdpi、drawable-hdpi 等目录下，系统会根据设备密度自动选取合适的资源。

Android 5.0 以上支持 Vector Drawable（XML 格式的矢量图），可以直接把 SVG 转成 Vector Drawable XML，放在 drawable 目录下，一份文件适配所有密度。Android Studio 提供了 SVG 转 Vector Drawable 的工具（File → New → Vector Asset），转换时需要注意：复杂的 SVG 路径（如渐变、滤镜、剪切蒙版）可能无法完整转换，转换后需要在不同尺寸下实机验证渲染效果。

图标发虚问题排查

移动端图标发虚是最常见的适配问题，通常有几个原因：一是导出的 PNG 尺寸不对，比如设计稿是 @2x 但只导出了 @1x 的图；二是图标路径节点没有对齐像素栅格，在小尺寸下出现半像素渲染；三是 Android 上 Vector Drawable 的 strokeWidth 在不同密度下没有正确缩放。排查时先用 Xcode 的 Debug View Hierarchy 或 Android Studio 的 Layout Inspector 检查图标的实际渲染尺寸，确认是资源问题还是布局问题，再针对性处理。

很多项目的图标需求不能完全靠 iconfont 平台上的现成图标满足——可能是品牌专属图标、某个业务场景的定制图形，或者是从其他设计师那里拿到的 SVG 文件。iconfont 支持把自定义 SVG 上传到你的项目里，和平台上的阿里巴巴图标混合管理，统一生成一套资源文件。

上传前的 SVG 预处理

上传到 iconfont 的 SVG 有几个硬性要求：画布尺寸必须是正方形（推荐 1024×1024 px）；图形必须全部转为路径（Path），不能包含文本对象、嵌入图片或不支持的 SVG 滤镜；描边必须扩展为填充（Outline Stroke），否则上传后描边信息会丢失；图形不能有空路径或重叠路径（会导致生成的字体文件出现渲染异常）。在 Adobe Illustrator 里处理的标准流程是：选中所有对象 → 对象 → 扩展外观 → 路径 → 轮廓化描边 → 合并路径（Pathfinder 面板）→ 另存为 SVG。

上传后的项目管理

自定义图标上传后，在项目里和平台图标没有视觉区别，可以统一设置前缀、重命名、调整顺序。需要注意的是，自定义图标的版权归上传者所有，平台不会对上传内容做版权审查，使用者需要自行确保上传的图标有合法的使用权。如果是团队项目，建议在项目说明里记录每个自定义图标的来源和授权情况，方便后续审计。

混用场景下的一个常见问题是图标风格不统一——平台图标和自定义图标的描边粗细、圆角大小、视觉重量可能有差异。解决办法是在上传自定义图标前，先在设计软件里把它调整到和平台图标一致的规格（参照前面的描边规范），保证混用后视觉上是一套风格。

选图标库不是选谁"最好"，而是选谁最适合你的项目。下面这张对比表从几个实际决策维度来看这几个主流图标库的差异。

从这张表可以看出，阿里巴巴图标在中文本土化场景下有明显优势，但在开箱即用的框架组件支持上不如 Font Awesome 和 Material Icons 完善——后两者都有官方维护的 React/Vue 组件包，而 iconfont 需要自己封装。如果你的项目是面向国内用户的电商或企业应用，iconfont 几乎是默认选择；如果是面向国际市场的 SaaS 产品，Font Awesome 或 Heroicons 可能更合适。

数据来源：搜索引擎（Bing 站长工具）相关搜索，近 30 天印象量，仅供参考，不代表精确实时数据。