IconPark：字节开源 2000+ 矢量图标库，在线调参一键复制组件

30 秒速读：做页面时图标东拼西凑，粗细、圆角、配色各不一样；设计师想要能调颜色线粗的矢量源文件，开发者想要直接可用的组件。IconPark 是字节跳动开源的矢量图标库：2000 多个图标手工画在 48×48 网格上，一套 SVG 靠 fill、stroke 属性派生出 4 种主题；官网可在线调颜色、线粗实时预览，一键复制 SVG、React、Vue 组件或下载 PNG。本篇讲清它的主题派生逻辑、四套 NPM 包怎么选，以及 Apache 2.0 商用的边界。

项目信息表

核心功能

• 2000+ 矢量图标：收录 2000 多个高质量图标，按业务、工具、文件、社交等 29 个分类组织，关键词或分类检索即可定位；每个图标都在 48×48 网格内手工编码，放大缩小不失真。
• 一套 SVG 派生四种主题：不必为每种主题维护独立源文件，通过修改节点的 fill 与 stroke 属性，把单一图标派生出 outline 线性、filled 填充、two-tone 双色、multi-color 四色四种主题，组件上设 theme、size、fill 参数即切换。
• 在线调参实时预览：官网定制器可调颜色、尺寸、stroke-width 线条粗细、stroke-linejoin 拐点、stroke-linecap 端点，调整过程实时预览，满意再取用。
• 多种取用通道：一键复制 SVG 源码、React 图标组件或 Vue 组件，也可直接下载 PNG 和 SVG 文件，用于 Figma、Sketch、Photoshop、PPT 等软件，不必格式转换。
• 四套 NPM 组件包：@icon-park/react 用于 React，@icon-park/vue 对应 Vue2，@icon-park/vue-next 对应 Vue3，@icon-park/svg 是纯 SVG 字符串，按框架装包后按组件调用。

上手指南

1. 先找图标：打开官网定制器，用关键词搜索或按 29 个分类筛选，先确认库里有没有你想要的图标——这是第一步，别装完包才发现缺图标。
2. 在线调参：调好颜色、线条粗细、端点样式，实时预览满意为止；设计师可以直接在这个环节定稿，不必导出后再进设计软件改。
3. 按用途取用：直接贴页面用→复制 SVG 源码；React/Vue 项目→装对应 NPM 包按组件调用；要离线文件→下载 PNG/SVG。
4. 组件化接入：npm 装包后在代码里按组件引入，通过 theme、size、fill 参数统一控制全站图标风格，换主题改一处即可。

独家整理：四套 NPM 包怎么选

一句话：有框架按框架选包，无框架或要离线文件用 @icon-park/svg 或直接下载；Vue2 老项目才用 @icon-park/vue。

注意事项

1. 商用边界：Apache 2.0 可免费用于个人与商业项目，允许修改与再分发，但使用时要保留版权、许可声明与 NOTICE，不能单独转卖图标本身。
2. 仓库低频维护：最近提交在 2023-02-24，新图标增加慢；选型前先在官网确认你需要的图标在库里，别指望提 issue 很快有人画。
3. 导出后再改颜色要重导：在线调的是 SVG 属性，导出成 PNG 后再想换颜色只能重新导出；建议定稿后再批量导出。
4. 风格统一：图标是 48 网格描边风格，如果页面里混搭了其他风格图标，先统一视觉再上线，否则还不如不用。
5. 国内可直接访问：官网定制器无需注册即可取用，设计师和开发者可在同一图库取用，不必分别找素材包和组件库。

适用人群

需要风格统一图标的前端开发者和 UI 设计师；以及想一套代码同时服务 React、Vue、静态页面的团队，一次选型、全端统一。

网盘下载

国内网盘下载（备用）

开源地址

前往 GitHub 仓库

GitHub 国内访问较慢，如打不开可多刷新几次

推广

关注「软件教程管家」

回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。

相关推荐

开源项目WallpaperMachine 免费下载开发node-rs 免费下载｜Rust 原生绑定包集合开发Roundhouse 免费下载｜Ruby 静态分析开发Flatcar Container Linux 免费下载开发Nature Skills 免费下载开发bddisasm 免费下载｜轻量级 C 指令解码库