Kubai Icons 是开发者 kubai087 开源的一套动画图标方案，MIT 授权，由编码 Agent 技能、图标库和官网三部分组成。它把一套几何、分层和动效规则写成 SKILL.md，让 Claude Code、Codex 这类编码 Agent 不再各画各的，而是按同一套规范产出风格一致的 SVG 动画图标；配套图标库已有 2,800 多个图标、近 900 个对象，覆盖 React、Vue、Web Component 和静态 SVG 四种用法，代码托管在 GitHub。项目同时提供一个支持 16 种语言的在线工具官网，用来搜索、换色、复制代码和下载图标。它不要求设计师预先画好全部图标，而是让 Agent 在写代码时按需补画，属于面向前端团队、可按需选用的实用软件。
场景痛点
已经在用 AI 编码助手写产品的前端，多半遇到过这种情况：界面上每个按钮、空状态、导出图标都得手画，或者去 iconfont 上凑现成的。凑来的图标描边粗细不一、圆角不统一，AI 每轮新画的图标更是风格漂移，同一个产品里的图标像从不同年代拼出来的。想要一套既跟随文本色、hover 时又像物体那样动起来的图标，还得自己定规范、写组件、维护换色逻辑，这也是它作为一个开源软件试图解决的问题。
主要功能特点
装进 Agent 就能画图标
把仓库 clone 到 ~/.claude/skills（Claude Code）或 ~/.agents/skills（Codex），重启后 Agent 遇到画图标需求会自动读 SKILL.md。作者用 Claude Opus 5.5 盲测，全新会话只拿这份文件就能画出合规图标，属于编码场景的 AI 工具。
图标像物体一样动
每个图标不是静态图，而是会动的物体：文件夹 hover 时打开、信封拆封、日历翻页、锁子弹开、齿轮转动。触发方式包括 hover、点击或父按钮触发。动效是 SVG 关键帧动画而非 Lottie 视频，每个部件只有 rest 和 hover 两个关键帧，描边在填充外侧保持形状，这种状态驱动的 Web 应用组件不需要额外动画库。
一个色派生所有色
渐变、描边、标记和阴影都由同一个颜色经 CSS 派生，所以图标默认跟随文本色 currentColor，不用脚本就能换色。组件层提供 size、color、variant 等参数，例如传 size=32、color=”#22C55E”。整站改一个主色，所有图标自动跟着变，省去逐图标调色，对追求效率工具落地速度的前端来说很直接。
四套接入方式
React 18+ 和 Next.js 有 kubai-icons-react 包；Vue 3 和 Nuxt 有对应包；无框架项目用 CDN 加载 element.js，写一个 < kubai-icon > 标签即可；原生 App 或设计工具直接用静态 SVG。每个图标是预渲染 ES 模块，只在动效时跑脚本，和常见软件工具一样按框架选接入层。
官网搜索换色与打包
官网支持 16 种语言，可按名称、形状或含义搜图标，在线换色、复制组件代码或给 Agent 的 prompt，也可下载单个 SVG 或 PNG，收藏一组后打包成 ZIP。需要说明，skill 仓库自带演示图标数量有限，2,800 多个正式库要到官网或 kubai-icons-static 包获取，这个图片资源站免注册即可下载，也是一个实用的网站推荐入口。
无头自检与静态导出
scripts/check.mjs 无头跑自检，逐帧比对 rest、hover 与中间帧描边颜色；src/icons.js 有 66 个 worked examples 参考。静态素材用 scripts/export.mjs 导出 SVG，支持按对象筛选、六色板重染，作为开源项目它把自检脚本交出，也给工具推荐素材留流程。
项目地址
官网 访问
GitHub 访问
图标浏览 访问
下载地址
https://pan.quark.cn/s/d7ae57be7d6f
https://www.guangyapan.com/s/1966822976931708977_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）
相关推荐
IconPark — 字节开源2000+矢量图标库，四种主题在线调参复制SVG与React、Vue组件
2026-10-23
