IconPark
IconPark 是字节跳动开源的矢量图标库,通过单个 SVG 源文件即可切换线性、填充、双色和多色等多种主题风格,提供了 2600 多个基础图标,覆盖 29 个常用分类。所有图标均按统一规范在 24×24 与 48×48 网格下绘制,可在浏览器中实时调整描边粗细、端点类型与颜色,再一键复制 SVG 或导出 PNG。官方同时提供 React、Vue、Vue3 与 SVG 四种 npm 包,方便在主流前端框架中按需引入。图标在 Apache 2.0 协议下开源免费商用,已覆盖字节跳动商业化产品系的所有平台。对于需要在产品中维持统一视觉风格的团队来说,IconPark 既能节省设计成本,也降低了工程师在多端维护多份资源的成本。
网站&在线应用
简介
✅❌优缺点
- ✅ 图标量与分类覆盖广:官方图标库共收录 2600 多个基础图标,覆盖 29 种日常 UI 分类,从箭头、交互、设备到多媒体、文件均可检索使用。
- ✅ 技术驱动多主题样式:单一 SVG 源文件即可切换线性、填充、双色与多色四种主题,颜色、描边与端点类型可通过参数控制,无需维护多份图标资源。
- ✅ 多框架官方代码包:除可直接下载 SVG 外,还提供 React、Vue、Vue3 与 SVG 四种 npm 包,工程师可在 Web、移动端或桌面端项目中按需引用。
- ✅ 完全开源可商用:所有图标以 Apache License 2.0 发布,个人项目与商业产品均可自由使用、再发布,并已覆盖字节跳动商业化产品系。
- ❌ 仍在 BETA 阶段:官方页面右上有 BETA 标识,部分分类与图标仍在持续更新,正式 1.0 之前偶有结构与字段调整。
使用方法
- 进入官方网站首页,点击「官方图标库」进入图标浏览页,使用左侧分类或搜索栏定位到目标图标。
- 点击单个图标打开详情面板,调节描边粗细、端点类型(圆/方)以及线框、填充、双色、多色四种主题,实时预览效果。
- 右侧「下载」区提供 SVG、PNG 两种图片格式,以及 React、Vue、Vue3 组件代码片段,按需求复制或下载。
- 前端工程师可使用 npm 安装 @icon-park/react、@icon-park/vue、@icon-park/vue-next 或 @icon-park/svg 包,并按官方文档中
<Icon />标签的方式引入。 - 若团队需要对图标统一管理,可申请加入「项目管理」平台,或在 GitHub 仓库中以 Issue、PR 形式反馈建议与提交新图标。
收费与许可
IconPark 全部图标以 Apache License 2.0 协议开源,个人使用、商业产品、修改与再分发都不需要付费,亦无需提交授权申请。官方网站提供的图标浏览、搜索、定制与下载功能完全免费。如需私有定制或专属图标体系,可联系字节跳动商业化团队对接。
支持平台
IconPark 主入口为网页端,提供 2600 多个图标的浏览、搜索、定制与下载;同时提供 SVG、PNG 资源,兼容 Windows、macOS、Linux 等桌面端的设计工具,以及 iOS、Android 端的移动应用界面资源。通过官方 npm 包,工程师可在 React、Vue、Vue3、纯 HTML 项目中跨平台调用同一套图标资源。
截图
相关链接
功能标签
特色
数量丰富
官方图标库共收录 2600 多个图标,分布于 29 种常用分类,覆盖箭头、设备、文件、交互等场景。
多主题样式
通过单一 SVG 源文件即可切换线性、填充、双色与多色四种主题,颜色与端点可通过参数调整。
框架齐全
提供 React、Vue、Vue3 与 SVG 四种 npm 代码包,工程师可在主流前端工程中按需引用。
完全开源
图标以 Apache License 2.0 开源,个人项目与商业产品均可免费使用与再分发。
字节内用
已被字节跳动商业化产品系所有平台覆盖,并被 12 个外部产品作为底层图标资源统一调用。
在线定制
官方网页提供描边、端点与主题切换面板,实时预览后可一键复制 SVG 或下载 PNG。
替代方案
设计素材
Feather Icons
Feather Icons 是一套由 C…
Remix Icon
Remix Icon 是一套开源的中性风…
Pixeden
Pixeden 是一家面向设计师和创意工…
Mockup World
Mockup World 是一个专注于免…
Font Squirrel
Font Squirrel 是一个专注免…
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END












