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

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."

The agent then:

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

npm i kubai-icons-react

import { Folder, CalendarCheck } from "kubai-icons-react";

// 24px, follows the text color
<Folder />

// Any CSS color, the soft look, a green badge
<CalendarCheck size={32} color="#22C55E" variant="soft" badgeColor="semantic" />

// Plays when the button is hovered
<button data-kubai-trigger>
  <Folder size={18} trigger="parent" /> Open
</button>

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

<script type="module" src="https://cdn.jsdelivr.net/npm/kubai-icons@0/dist/cdn/element.js"></script>
<kubai-icon name="folder-plus" size="32" color="#6366F1"></kubai-icon>

• 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.

Find an icon and copy its code on the website. Guides for every package are in the documentation.

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.

See CONTRIBUTING.md and the code of conduct. Security issues go through SECURITY.md.

License

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.

LICENSING.md lists which file falls under which license. The Kubai and Lumno names and logos are not licensed for reuse. The construction comes from the bookmark folder icon in Lumno.