IconPark图标库

IconPark是什么

IconPark 是字节跳动推出的一个开源矢量图标库，核心是“技术驱动图标样式”——用一个 SVG 源文件，通过调整描边、填充这些属性，在线就能生成线性、填充、双色、多色四种主题。现在有 2600+ 个图标，分了 29 个类，React、Vue2/3、SVG 都支持，用的是 Apache 2.0 协议，商业项目也能免费用。

IconPark功能特征

• 图标规模：2600+ 基础图标，分了 29 个类，像通用 UI、通讯、数据、媒体、编辑、交通、健康这些场景都覆盖了。

• 四主题切换：线性（Outline）、填充（Filled）、双色（TwoTone）、多色（MultiColor），都是用同一个 SVG 源文件变出来的，不用存好几份素材。

• 在线定制：在官网就能直接调颜色、尺寸、线宽、端点/拐角类型（Round/Butt/Square 这些），改完马上就能看到效果。

• 多平台代码：能复制 SVG 代码、React 组件、Vue 组件，也能下载 PNG/SVG 文件；前端项目用 NPM 装 @icon-park/react、@icon-park/vue-next 这些包就能用。

• 项目协作：支持建项目文件夹、上传自定义图标、邀请人一起搞，还能管权限。

• 中文友好：图标用中文命名和分类，搜起来没啥门槛，国内设计师和开发者用着顺手。

IconPark应用场景

• Web/App 前端开发：直接引入 React/Vue 的图标组件，用 props 动态控制主题、颜色、大小，省了设计切图的麻烦。

• 设计系统搭建：要是做中后台产品或者 B 端系统，需要统一图标风格，可以用 IconPark 当底层规范，保证多产品线风格一致。

• PPT/运营物料：在线调好颜色和粗细，下载 SVG/PNG 直接拖进 Keynote、PPT 或者即时设计这些工具就行。

• 内容创作平台：像字节系产品那样，给用户提供可定制的图标能力，丰富创作素材。

IconPark优劣势

优势

• 完全免费还能商用，大厂开源，质量有保障。

• 技术驱动的换肤方案很省资源，一套源文件能出四种风格，维护成本低。

• 对开发者特别友好，NPM 装上就能用，支持按需加载和 Tree Shaking。

• 中文检索和分类很直观，不用死记硬背英文名。

劣势

• 图标风格比较统一，都是 48×48 网格下的描边风格，要是想要特别有个性的插画感图标，选择不多。

• 仓库已经归档了，后续不加新图标也不修问题，长期项目得自己评估维护风险。

• 纯设计师上手可能得适应一下“技术参数”（像 stroke-width、linecap 这些）的思路。

IconPark常见问题

Q：IconPark可以商用吗？收费吗？

A：完全免费，用的是 Apache 2.0 协议，商业项目放心用。

Q：支持哪些前端框架？

A：官方给了 React、Vue 2、Vue 3、纯 SVG 包；社区还有 Flutter、Blazor 这些封装版本。

Q：双色/多色图标怎么设置颜色？

A：用 fill 属性传数组就行，比如 <Camera theme="two-tone" fill={['#333', '#2F88FF']} />。

Q：IconPark 还在维护吗？

A：GitHub 仓库 2025 年 12 月 8 日归档成只读了，不再更新，现有的 1.4.2 版本功能是稳定的。

Q：找不到需要的图标怎么办？

A：因为仓库归档了，官方不接新图标需求。建议在现有库里找替代，或者转到其他还在活跃维护的图标库。

IconPark怎么使用

设计师用法：访问 iconpark.oceanengine.com → 搜图标 → 右边调颜色、大小、线宽、风格 → 复制 SVG 或下载 PNG/SVG → 粘到 Figma、Sketch、PPT 这些工具里。

开发者用法：

安装依赖：npm install @icon-park/react（或者 vue-next / vue / svg）。

引入使用：

import { Home } from '@icon-park/react';
<Home theme="filled" size="24" fill="#333" />

如需全局注册，参考官方文档做批量引入就行。

IconPark与其它类似网站对比