Kubai Icons

# Kubai Icons

Draws UI icons in one consistent style from a feature list or a codebase, with hover motion or as static SVG. A skill for Claude, made for developers and designers building a product's interface.

Made by kubai087 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: Kubai Icons is a skill for Claude that draws interface icons in one consistent style. Hand it a list of features or the code of a product, and it produces icons that match the 66 examples in its repository, either moving on hover or as static SVG files. The repository holds the rules, a drawing engine and a self-check, so the model only decides what each icon shows.

Who it suits: It suits front-end developers, designers and product teams who need icons for a set of features and want them to look like the work of one designer.

```table
Industry | Who uses it | How they use it | Example
Software products | Front-end developers | Draw icons for an app's main features straight from its code | A developer points Claude at a repository and asks for hover icons for what it does
Design and branding | Designers | Extend an existing icon set with new icons that match its look | A designer asks for two more icons that fit the set
Product teams | Product managers and marketers | Export static SVG files for slides, documents and pages | A team asks for icons it can drop into Figma
```

People who need icons in a different art style can skip it, since the style here is fixed.

Where to use it:

- Claude Code, with the skill placed in its skills folder
- Web pages and interfaces that run JavaScript, for icons that move on hover
- Design tools such as Figma, for static SVG files
- Native apps, documents and img tags, for static SVG files

```table
Use case | Who | What they get back
Icons for a feature list | Product teams | One icon per feature, drawn in the style of the set
Icons from a codebase | Developers | Icons for the main features found in a repository
New icons for an existing set | Designers | Additions that match the others in size, outline, layers and colour
Files for other tools | Designers | One self-contained SVG file per icon, with no script or stylesheet
```

How to set it up: You need Claude Code, a skills folder to put the skill in and a strong Claude model.

- Claude Code, with a skills folder under ~/.claude/skills/
- A Claude model, with Claude Opus 5.5 as the one to choose
- Node, to run the export script

1. Download the kubai-icons zip file from the latest release.
2. Unzip it into your skills folder.
3. Restart Claude Code so it picks the skill up.

```bash
unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/
```

You can also clone the repository into that folder, or ask Claude Code to install it for you. A skill marketplace that wants a version and display names takes the platform zip from the same release. To use the recommended model, start Claude Code with this command.

```bash
claude --model claude-opus-5-5
```

How to use it: Describe the icons you need in plain words. The skill triggers on icon requests, so you do not have to name it. Ask for static SVG files if you need them for a design tool.

```table
Tool | What it does
PROMPT.md | The drawing rules, from canvas and layers to light, colour and motion
src/engine.js | Shared code for colour, outside outlines, gradients, shadows and palettes
src/icons.js | 66 worked icons, each one a starting point for a new icon
scripts/check.mjs | A headless check at rest, on hover, in between, at 24px and 28px and in every palette
scripts/export.mjs | Exports icons as static SVG, with options for palette, accent, state, size and padding
```

You can export icons from the repository yourself with the export script.

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

The same script also takes --accent for one colour on every icon, --state hover for the end of the hover, --size for pixels and --pad for room around the canvas.

Example: You say, "I need an Export icon that fits with the rest." Claude reads the rules, picks an everyday object and a hover action, then draws the icon after the closest existing one. It runs the self-check next to a few existing icons and repeats until the checklist passes. The new icon is added to the gallery and the counts are updated.

For newcomers and experts: Kubai Icons lets you ask Claude for icons and get a set that looks like one designer drew it. Each icon moves the way its object would, such as a folder opening or a lock springing open, or you can take plain SVG files instead. A first small thing to try is asking for one icon for a feature you already have.

The style comes from rules and code, not from the model's taste. PROMPT.md sets hard requirements, the engine derives colour, outlines, gradients and shadows, and 66 worked icons give each new one a starting point. A dynamic icon has two keyframes per part, rest and hover. The trade-off is that dynamic icons need JavaScript, and the results depend on a strong model.

```flow
You list the features that need icons
Claude picks an object and a hover action
It draws each icon after the closest example
A headless self-check compares the results
Passing icons join the gallery
```

Good to know:

- Dynamic icons are SVG plus JavaScript, so they fit pages that run JavaScript. Static icons are plain SVG files.
- A fresh Claude session given only SKILL.md and PROMPT.md drew six test icons, including an alarm clock, a notebook and a compass.
- Claude Opus 5.5 was used to develop and blind-test the skill.
- Starting a new set for your product means the skill brings its engine, gallery and self-check files into your project folder.

## On GitHub, 7 November 2026

- Stars: 244
- Forks: 15
- Watching: 1
- Open issues and pull requests: 0
- Language: HTML
- License: see the repository
- Topics: agent-skills, animation, claude, claude-skill, design-system, hover-effects, icon-set, icons, svg, svg-icons

## Links

- Code: https://github.com/kubai087/kubai-icons
- Website: https://www.kubai.design/kubai-icons/
- Releases: https://github.com/kubai087/kubai-icons/releases
- Issues: https://github.com/kubai087/kubai-icons/issues
- Star history: https://www.star-history.com/#kubai087/kubai-icons&Date

## Get the code

```
git clone https://github.com/kubai087/kubai-icons.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  6 KB