kubai087/kubai-icons

Kubai Icons

An agent skill that draws animated icons in one consistent style.
Plus 2,800+ open-source icons drawn with it, for React, Vue and the web.

Install the skill · Browse the icons · Use them in code · Docs

What's included

| Part | What you get | | --- | --- | | Agent skill | The rules, engine and self-check that draw every icon in one hand. Give Claude Code, Codex or another coding agent a product, and it draws the icons that product needs. | | Icon library | 2,800+ icons: nearly 900 objects, plus badged and slashed "off" versions. For React, Vue, plain JavaScript, web components and static SVG. MIT licensed. | | Website | icons.kubai.design, in 16 languages. Search every icon by name, shape or meaning, recolor it, copy its code or a prompt for your agent, download it as SVG or PNG, and save a collection as a ZIP. |

Install the skill

Copy this into your agent and send it:

Install the Kubai Icons skill for me:
clone https://github.com/kubai087/kubai-icons into your skills folder as kubai-icons
(~/.claude/skills in Claude Code, ~/.agents/skills in Codex;
if it's already there, pull the latest version instead),
make sure SKILL.md exists in that folder, and tell me when it's ready.

Restart your agent, and the skill is ready. An agent without skill support can read SKILL.md from the cloned folder and follow it.

[!TIP]

The skill asks for careful geometry and several rounds of looking at its own screenshots, so use a capable model that can read images. It was developed and blind-tested with Claude Opus 5.5, which we recommend. Other models, such as GPT in Codex, can use the same skill. In Claude Code, run claude --model claude-opus-5-5.

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

unzip kubai-icons-v*.zip -d ~/.claude/skills/

Ask for icons

Describe what you need in plain words. The skill triggers on requests about icons, so you don't need to name it.

• "Read this repository and draw dynamic icons for its main features."
• "Add a scissors icon and a map icon to this set."
• "We need an icon for Export that matches the others."
• "Give me static SVG files I can drop into Figma."

1. Reads the rules and writes one line per feature: an everyday object and what it does on hover ("a folder opens", "a lock springs open"). 2. Draws each icon after the closest existing one, reusing the engine. 3. Runs the self-check beside existing icons, compares sizes, outlines, layers and colors, and repeats until every item on the checklist passes.

To start a set for your own product, the skill copies the engine, gallery and self-check into your project and works there.

_{Drawn by a fresh Claude session that had nothing but SKILL.md and PROMPT.md. Each blind test closes the gaps it finds in the rules.}

Use the icons

| Package | For | | --- | --- | | kubai-icons-react | React 18+ and Next.js, server rendering included | | kubai-icons-vue | Vue 3 and Nuxt | | kubai-icons | Any page: a framework-free API and the `` web component | | kubai-icons-static | Standalone SVG files for , design tools, native apps and CDNs |

npm i kubai-icons-react

import { Folder, CalendarCheck } from "kubai-icons-react";
// 24px, follows the text color
// Any CSS color, the soft look, a green badge
// Plays when the button is hovered
Open

No build step? One script tag loads any icon on demand:

• Moves like the object. A folder opens, an envelope unseals, a calendar turns to the next day. Hover, focus, a tap, a parent element or your own state can play it.
• One accent, every color. Gradients, outlines, marks and shadows derive from one color through CSS, so icons follow currentColor and recolor without script.
• Pay for what you use. One side-effect-free ES module per icon, pre-rendered markup, server rendering, and a tiny runtime that only runs while an icon moves.

How an icon is built

Every icon is a back piece, optional white content and a front piece, like a folder holding a sheet of paper. Outlines sit outside the fill, so shapes keep their full size. Every gradient, outline and shadow derives from one accent color, so a single value repaints the whole icon. Each part has exactly two keyframes, rest and hover.

The complete rules are in PROMPT.md.

Reference

node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载

npm install
npm run build        # every package, from icons/ and badges/
npm run validate     # names, metadata and markup of every icon
npm test
node tools/check.mjs --only folder,mail --with download   # contact sheets in check-out/lib
npm run site:dev     # the website

Contributing

• Improve the skill. Report a rule that left you guessing, run a blind test with a fresh session, or fix a script. Rule changes start from an issue.
• Add an icon. Draw it with the skill or by hand as a module in icons/, check it with tools/check.mjs, and open a pull request. Merged icons are credited to you on the website.
• Submit an icon without a pull request. The submission page checks your files and prepares an issue.
• Request an icon. Open an icon request with the object and what it should do on hover.

License

| Part | License | In short | | --- | --- | --- | | Icons (icons/, badges/) and the four packages | MIT | Use, change and redistribute them in any project, commercial or not. | | The skill | Kubai Icons License | Source-available. See below. | | Website (site/, tools/, tests/, docs/) | All rights reserved | You may read the source and run it to prepare a contribution, but not copy or host it. |

Under the Kubai Icons License:

• Your icons are yours. Icons you make with the skill belong to you, for any use including commercial, with no credit required.
• Ship the engine with them. You may copy the engine, the gallery, the example icons and the self-check into your own icon set's project, change them, and ship that project, as long as the copyright notice at the top of each file stays.
• Use and share the skill freely. You may run it for any work, change it for your own use, and share exact, unmodified copies for free.
• Don't republish it as something else. Don't distribute a modified or translated version of the rules (PROMPT.md, SKILL.md), sell the skill, remove its notices, or present it under another name or as your own work.