IconPark — 字节开源2000+矢量图标库，四种主题在线调参复制SVG与React、Vue组件

IconPark 是字节跳动开源的高质量矢量图标库，提供 2000 多个手画在 48×48 网格内的 SVG 图标，按 29 个分类组织，并通过 fill、stroke 等属性把单一源文件派生出多种主题。它覆盖界面常用的操作、状态、文件、社交等符号，设计师和开发者可在同一图库取用，不必分别去找设计素材包和前端组件库。免费提供在线定制、代码复制和组件包，无需注册即可取用，代码以 Apache 2.0 协议开源，个人与商业项目都能使用。属于开源软件与图标资源结合的开源项目，仓库托管在 GitHub。

场景痛点

做界面或演示时，图标风格常常东拼西凑：这个来自一套免费包，那个临时从素材站下载，粗细、圆角、配色各不一样，拼在一个页面里显得杂乱。设计师想要能调颜色和线粗的矢量源文件，开发者又想要直接可用的组件，而不是一张张导出 PNG 再处理。自己从零画一整套风格统一的图标成本很高，付费图标库的授权范围也未必覆盖商用项目，换个场景又要重新找素材，来回占用不少时间，最后只能在风格不齐的图标里将就，页面观感也跟着打折，改一处颜色还要逐个导出处理。

主要功能特点

2000+ 矢量图标与 29 个分类

库内收录 2000 多个高质量矢量图标，按业务、工具、文件、社交等 29 个分类归类，搜索关键词或按分类筛选即可定位。每个图标都在 48×48 网格内手工编码，用 SVG 描边实现，便于后续调整样式尺寸，放大缩小不失真。这属于设计资源里可直接检索取用的集中图库，也归入网站推荐里国内可直接访问的在线资源。

单一 SVG 派生四种主题

不需要为每种主题维护一套独立 SVG 源文件，IconPark 通过修改节点的 fill 与 stroke 属性，把单一图标派生出 outline 线性、filled 填充、two-tone 双色、multi-color 四色四种主题。开发者在组件上设置 theme、size、fill 参数即可切换，这属于 UI设计里用属性驱动风格的做法，避免重复存储多份图形。

在线调参实时预览

官网定制器可调颜色、尺寸、stroke-width 线条粗细、stroke-linejoin 拐点、stroke-linecap 端点等属性，调整过程实时预览。设计师不必先导出再到软件里改，在页面上看到满意效果再取用，线粗和端点变化会直接反映到笔画收笔形状。这是在线工具轻量的图标调校入口，也属于设计工具面向网页设计的一环。

复制组件代码与下载 PNG/SVG

定制完成后可一键复制 SVG 源码、React 图标组件或 Vue 组件，也能直接下载 PNG 和 SVG 文件。复制出的代码可直接粘进项目，下载文件可用于 Figma、Sketch、Photoshop、PPT 等软件，不必再格式转换。这属于工具推荐里减少二次加工的取用方式，不同用途对应不同导出通道。

React/Vue2/Vue3/纯 SVG 组件包

官方提供四套 NPM 组件包：@icon-park/react 用于 React，@icon-park/vue 对应 Vue2，@icon-park/vue-next 对应 Vue3，@icon-park/svg 是纯 SVG 字符串。按框架装包后按组件调用，不必自己维护图标文件。这属于前端开发标准化引入图标的做法。

Apache 2.0 免费商用边界

IconPark 代码以 Apache License 2.0 发布，可免费用于个人与商业项目，允许修改与再分发，使用时按协议保留版权、许可声明与 NOTICE 即可，不能单独转卖图标本身。作为 Web应用在线图库，它已用于字节系多款商用产品，风格统一度经过内部检验，具体授权与署名要求以仓库 LICENSE 文本为准。

官方网站

官网 https://iconpark.oceanengine.com/

GitHub https://github.com/bytedance/IconPark

下载地址

https://pan.quark.cn/s/6822db7dfefe

IconPark — 字节开源2000+矢量图标库，四种主题在线调参复制SVG与React、Vue组件

场景痛点