kubai087/kubai-icons

What this is

Kubai Icons has two parts that share one drawing system. The first is an agent skill: coding agents such as Claude Code and Codex read PROMPT.md and use the bundled engine to draw new animated icons in the same style as the existing set. The second is a library of 2,800+ icons (nearly 900 objects plus badged and slashed variants) shipped for React, Vue, plain JavaScript, web components and static SVG. A browser site lets you search, recolor, preview and copy icons.

The icons animate by moving the object itself: a folder opens, an envelope unseals, a calendar turns a page. Every icon is built from a back piece, optional white content and a front piece, and all gradients, outlines and shadows derive from a single accent color, so icons recolour with currentColor and need no script to repaint. Animations are defined by exactly two keyframes (rest and hover). The design rules are in PROMPT.md, and the color/interpolation engine is in engine.js.

It suits front-end teams that want a consistent animated icon set, and developers who want an agent to extend that set for their own product.

Quick start

Using the React package

Requires React 18+. Install the package and import icons by name:

npm i kubai-icons-react

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

<Folder />
<CalendarCheck size={32} color="#22C55E" variant="soft" badgeColor="semantic" />

<button data-kubai-trigger>
  <Folder size={18} trigger="parent" /> Open
</button>

currentColor is followed by default; trigger="parent" plays the animation when the parent element is hovered. Per-framework install and usage details are in the React, Vue, core/web component and static SVG packages. The website's icon browser lets you search by name, shape or meaning, recolour, copy code or PNG/SVG, and save a collection as a ZIP.

Installing the agent skill

Copy the install request from the README into your agent and send it; the agent clones the repository into its skills folder (~/.claude/skills for Claude Code, ~/.agents/skills for Codex) and confirms SKILL.md is present. Alternatively clone it yourself:

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

Restart the agent, then describe the icons you need. A typical agent run reads the rules, writes one line per feature (the object and what it does on hover), draws each icon starting from the closest existing example, and runs the headless self-check against existing icons until it passes. Expect better results from a model that can read images; the README reports blind testing with Claude Opus 5.5. The skill itself is not copied automatically: starting a set for your own product means copying the engine, gallery and self-check into your project.

Running the self-check

The self-check requires Node.js 18+ and Chrome and runs headless:

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

Screenshots land in check-out/ unless --out is set. The skill's own example icons use Chinese names and palettes; pass --palette or --accent to choose colours. Static export uses the same Chinese naming, e.g. node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/.

Constraints

• Licensing differs by part. Icons and the four packages are MIT, usable commercially. The skill is source-available under the Kubai Icons License: icons you generate are yours, but you may not resell the skill, redistribute modified rule files, or rebrand them. The website, tools, tests and docs are all rights reserved, and the Kubai/Lumno names and logos are not licensed for reuse. LICENSING.md maps each file to its license.
• Node and browser requirements. Self-check and export need Node.js 18+ and Chrome; library/website development needs Node.js 20+. CHROME overrides the browser path. Generating README media also needs ffmpeg and img2webp.
• Agent support. The skill is designed for Claude Code and Codex; agents without skill support can read SKILL.md directly, but animation quality depends on the model's ability to follow the rules and inspect rendered images.
• Animation model. Each icon has only a rest and a hover keyframe. More elaborate motion would require changing the engine and rules rather than adding keyframes per icon.

HotRepo's take

There is no recorded GitHub daily rank for the repository. The trackable data is a single "new" JavaScript list snapshot on 2026-11-09, showing 68 stars gained in the roughly 24 hours from 2026-11-08T02:45Z to 2026-11-09T02:45Z. The sampled star curve rises from 104 on 2026-11-04 to 326 by 2026-11-09, with the last sampled hour jumping from 282 to 326; because that is one sampling interval, it supports only a late surge and not a sustained trend. The project is recent, created 2026-11-03, so long-term adoption cannot be judged yet. What stands out technically is the combination of a source-available design skill with an MIT icon library and a browser front end, letting a team extend the set with its own agent rather than hand-drawing each icon.