IconPark图标样式转换工具

IconPark 是字节跳动开源的一个 SVG 图标转换工具，能把一个 SVG 源文件转成四种主题，并生成 React、Vue、SVG 三种形式的组件。对做前端开发、需要统一图标风格的人来说，它省去了维护多套 SVG 源文件的麻烦。

适合谁

• 前端开发者：React 或 Vue 项目里要引入图标，直接装对应的 npm 包就能用，不用手动下载 SVG 再转格式。
• 组件库维护者：需要一套风格统一、支持多主题的图标基础库，IconPark 的四种主题切换机制可以直接借鉴或使用。
• 设计师转开发的同学：在官网调好颜色、粗细、圆角，直接复制组件代码进项目，不用自己写 SVG 属性。

能解决什么问题

1. 多主题图标维护：传统做法是每个主题一套 SVG 源文件，改起来要同步多个文件。IconPark 用一个源文件，通过 fill 和 stroke 两个属性变换出 outline、filled、two-tone、multi-color 四种主题。

2. 跨框架复用：同一套图标，React 项目用 @icon-park/react，Vue2 用 @icon-park/vue，Vue3 用 @icon-park/vue-next，纯 SVG 场景用 @icon-park/svg。换框架不用重新找图标库。

3. 在线定制与导出：官网支持调整颜色、尺寸、stroke-width、stroke-linejoin、stroke-linecap 等属性，调完可以复制 SVG、复制 React/Vue 组件代码，或下载 PNG/SVG，方便在 Figma、Sketch、PPT 里用。

怎么开始用

以 React 为例，安装：

npm install @icon-park/react

然后在组件里引入：

import { Camera } from '@icon-park/react';

<Camera theme="outline" size="32" fill="#000000" />

换主题只需要改 theme 和 fill：

<Camera theme="filled" size="32" fill="#333" />
<Camera theme="two-tone" size="32" fill={['#333', '#2F88FF']} />
<Camera theme="multi-color" size="32" fill={['#333', '#2F88FF', '#FFF', '#43CCF8']} />

Vue3 用 @icon-park/vue-next，Vue2 用 @icon-park/vue，纯 SVG 用 @icon-park/svg。需要图标名、作者、分类、标签、创建时间等附加信息时，用每个 npm 包根目录的 icons.json。

优点和坑

优点：

• 图标数量多且风格统一：超过 2000 个高质量图标，全部在 48x48 网格内手写，用 SVG stroke 实现，线条风格一致。
• 主题切换成本低：改 theme 和 fill 两个属性就能换主题，不用换源文件，适合需要多套配色方案的项目。
• 协议宽松：Apache-2.0 协议，star 9034、fork 557，项目创建于 2020-07-27，最近更新 2026-11-08，可以放心用。

坑：

• 文档以英文为主：README 有中英文两个版本，但部分包说明只有英文，英文不好的同学要花点时间。
• 官网定制依赖网络：在线调整颜色、下载 PNG/SVG 这些功能都在网页上，离线环境下只能靠 npm 包本身的能力。
• 图标风格偏线性/科技感：适合后台、工具类产品，想找拟物或插画风图标的话，这套不合适。
• 更新节奏不算快：项目跨度较长，新功能节奏需要自己看 CHANGELOG 判断，别指望高频迭代。

适合你吗

适合：React/Vue 项目需要一套可定制主题的图标库，或者想统一多个项目图标风格的开发者。2000+ 图标加四种主题，覆盖大多数中后台场景。

不适合：只需要几个图标、不想引入完整依赖的场景，直接复制单个 SVG 更省事；需要插画风、拟物风图标的话，这套风格对不上。

---

常见问题

IconPark 是什么工具？

IconPark 是字节跳动开源的一款 SVG 图标转换工具。它可以将一个 SVG 源文件转换成 outline、filled、two-tone、multi-color 四种主题，并生成 React、Vue、SVG 三种形式的组件，帮助前端开发者和设计师统一管理图标风格。

IconPark 图标库怎么使用？

以 React 项目为例，先通过命令 npm install @icon-park/react 安装。然后在组件中引入图标，如 import { Camera } from '@icon-park/react';，并通过修改 theme 和 fill 属性来切换主题和颜色。Vue 项目也有对应的 npm 包。

IconPark 图标可以商用吗？

可以商用。IconPark 采用 Apache-2.0 开源协议，这是一个非常宽松的协议，允许个人和商业项目免费使用、修改和分发。项目在 GitHub 上拥有超过 9000 个 star，更新维护记录良好。

IconPark 素材网站提供了哪些功能？

IconPark 官网提供了在线定制功能，你可以调整图标的颜色、尺寸、线条粗细、端点样式等属性。调整后可以直接复制 SVG 代码、React/Vue 组件代码，或下载 PNG/SVG 文件，方便在 Figma、Sketch 或 PPT 中使用。

IconPark 是免费的吗？有什么限制？

IconPark 是完全免费开源的。它提供了超过 2000 个高质量图标，支持四种主题和多种框架。主要限制是图标风格偏向线性科技感，不适合需要拟物或插画风格的场景，且部分文档以英文为主。

相关工具推荐

• Dashboard Icons 开源仪表盘与 AI 助手图标库
• MDBootstrap：Material Design for Bootstrap 组件库
• Web Font Loader 网页字体加载控制库