前端开发必备：两大图标资源网站详解 — Flaticon 与 Iconfont
作者：XD / 发表： 2026年3月24日 07:01 / 更新： 2026年3月24日 07:01 / 编程笔记 / 阅读量：9
在前端开发和设计工作中，图标是不可或缺的 UI 元素。手动绘制每个图标既耗时又不现实，因此善用图标资源平台可以极大提升工作效率。本文将详细介绍两个主流的图标网站：Flaticon 和 Iconfont（阿里巴巴矢量图标库），帮助你快速上手并在项目中灵活运用。
一、Flaticon
1.1 简介
Flaticon 是全球最大的免费矢量图标库之一，拥有超过 1800 万 个图标和贴纸资源。它由 Freepik 公司运营，面向设计师和开发者，提供多种格式的图标下载。
1.2 核心特点
- 海量资源：1800 万+ 图标，涵盖各类主题（商务、教育、社交、食品等）
- 多种格式：支持 SVG、PNG、EPS、PSD、BASE64 等格式下载
- UI 图标系统（Uicons）：提供 50,400+ 免费 UI 图标，分为 Bold、Regular、Solid、Thin 等 9 种风格
- 动态图标：支持 Animated Icons（动效图标），适合现代交互设计
- 在线编辑器：可在线修改图标颜色、尺寸后再下载
- 集合管理：可创建 Collections（图标集合），方便整理和批量下载
- Figma 插件：可直接在 Figma 中搜索和插入图标
1.3 免费 vs 付费
| | 免费版 | Premium（$8.25/月） | |---|---|---| | 图标数量 | 部分免费图标 | 全部 1800 万+ | | 下载格式 | PNG、SVG（部分） | SVG、EPS、PSD、BASE64 | | 署名要求 | 需要注明出处 | 无需署名 | | 广告 | 有广告 | 无广告 | | 集合数量 | 最多 3 个，每个 100 图标 | 无限制 |
1.4 使用方式
方式一：直接下载
- 在首页搜索关键词（如 "user"、"settings"）
- 选择合适风格的图标
- 选择格式和尺寸，点击下载
- 将文件引入项目中使用
方式二：Web Font 引用
Flaticon 提供 Uicons 字体图标方案，在 HTML 中通过 CDN 链接引入即可：
<!-- 在 head 中引入 -->
<link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css">
<!-- 在页面中使用 -->
<i class="fi fi-rr-home"></i>
<i class="fi fi-rr-user"></i>
方式三：Figma 插件
安装 Flaticon 的 Figma 插件后，可直接在设计稿中搜索并拖入 SVG 图标。
二、Iconfont（阿里巴巴矢量图标库）
2.1 简介
Iconfont 是阿里巴巴推出的矢量图标管理与分发平台，拥有超过 1600 万 个图标资源。它是国内最主流的图标库，支持中文搜索，特别适合国内开发者使用。
2.2 核心特点
- 中文友好：完善的中文界面和中文关键词搜索支持
- 项目管理：可创建项目并将图标分组管理，支持团队协作
- 三种引用方式：Unicode、Font Class、Symbol（SVG），满足不同场景
- 在线生成字体：选中图标后可自动生成字体文件，并部署到阿里云 CDN
- 按需选取：只打包项目用到的图标，减小字体文件体积
- 免费使用：大部分图标免费，但部分图标有版权限制，商用需注意
2.3 使用方式
第一步：注册并搜索图标
- 通过 GitHub 或微博登录 iconfont.cn
- 搜索图标关键词（如"首页"、"设置"）
- 将喜欢的图标添加到购物车（点击购物车图标）
第二步：创建项目并添加图标
- 点击右上角购物车图标
- 选择"添加至项目"，新建或选择已有项目
- 图标会被添加到项目管理页面
第三步：在代码中使用
Iconfont 提供三种使用方式，推荐按场景选择：
方式一：Font Class（推荐，语义化好）
<!-- 1. 引入在线链接 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_xxxxx.css">
<!-- 2. 使用 class 名引用 -->
<span class="iconfont icon-home"></span>
<span class="iconfont icon-user"></span>
方式二：Unicode（兼容性最好）
<!-- 1. 引入字体 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_xxxxx.css">
<!-- 2. 使用 Unicode 编码 -->
<span class="iconfont"></span>
方式三：Symbol（支持多色图标）
<!-- 1. 引入 JS -->
<script src="//at.alicdn.com/t/c/font_xxxxx.js"></script>
<!-- 2. 添加通用样式 -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<!-- 3. 使用 SVG 引用 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
第四步：样式自定义
图标本质是字体，可以通过 CSS 灵活控制：
.iconfont {
font-size: 24px;
color: #333;
}
/* 悬停效果 */
.iconfont:hover {
color: #1890ff;
}
三、两者对比
- 语言与搜索
- Flaticon：英文界面，英文搜索为主
-
Iconfont：中文界面，中文/英文搜索均支持
-
资源数量
- Flaticon：1800 万+
-
Iconfont：1600 万+
-
下载格式
- Flaticon：SVG、PNG、EPS、PSD、BASE64
-
Iconfont：SVG、AI、PNG、字体文件（Web Font）
-
在线字体生成
- Flaticon：支持 Uicons 字体方案
-
Iconfont：支持项目级字体打包，自动上传 CDN
-
费用
- Flaticon：免费 + Premium 付费方案
-
Iconfont：免费（商用需注意版权）
-
CDN 加速
- Flaticon：自有 CDN
-
Iconfont：阿里云 CDN 免费加速
-
适合人群
- Flaticon：国际化项目、需要高质量设计素材
- Iconfont：国内项目、前端开发、快速集成
四、实际建议
- 国内项目优先用 Iconfont：CDN 在国内访问速度快，中文搜索方便，Font Class 引用方式与前端框架集成简单。
- 国际化或设计驱动的项目用 Flaticon：图标风格更加多样化，设计质量高，Figma 插件方便设计师直接使用。
- 注意版权：Flaticon 免费图标需注明出处（attribution），Iconfont 部分图标有版权限制，商用项目务必确认授权。
- 按需打包：两个平台都支持只选取需要的图标，避免引入整个图标库导致资源浪费。
- 统一风格：在同一个项目中，尽量使用同一风格（线性/填充/粗细一致）的图标，保持 UI 一致性。
五、总结
Flaticon 和 Iconfont 各有优势，分别覆盖了国际和国内的图标需求场景。在实际开发中，可以根据项目特点灵活选择，甚至两者结合使用。掌握这两个平台的使用方法，能让你在开发和设计工作中事半功倍。
