oil-icon · Style-consistent icon set generator

Generates 16 icons at once as a single 4×4 sheet, then slices each cell and removes the background to deliver a transparent-PNG icon set.

Design & UIIntermediate★ 323⑂ 30AI score 8/10Last updated: Sep 10, 2026

What it does

Produces a whole icon set in one shared style by generating a 4×4 (16-cell) or 3×3 (9-cell) sheet on a flat grey backdrop (#808080), which keeps style drift down.
Slices each cell with scripts/slice_icons.py and removes the background using floodfill (flat / hard-edge art) or rembg (soft, 3D, glossy, photoreal), exporting transparent PNGs.
Ships 9 built-in styles — linear, filled, colorblock, cartoon, isometric, render3d, sticker, realistic, animal-badge — each JSON holding the preamble, locked hex palette, cutout mode, and a construction system (grid, stroke, radius, detail budget, shared parts, motif).
Can derive a custom style-spec from your brand by reading design tokens, logos, mascots or screenshots before any generic style finish is applied.
Includes a mandatory QA step: composite the sliced icons onto a contrasting colour (e.g. magenta) and check for neighbour-cell bleed, leftover grey, and construction consistency.

Who it's for

Designers and developers who need a complete set of tab-bar, category, or feature icons rather than one-off glyphs.
Solo builders and startups wanting custom icons that follow brand colours and motifs.
Prototyping teams happy with raster PNGs to lock a visual direction fast.

Example uses

"16 linear-style icons for a fintech app" → write metaphors like settlement — a wallet with a coin, generate the 4×4 sheet, slice with floodfill, ship 16 transparent PNGs.
"Dashboard icons matching our logo colours" → read the project's design tokens, freeze the palette as hex into a custom style-spec, then apply an isometric finish.
"9 glossy 3D icons for a rewards screen" → prompt a 3×3 layout, slice with --grid 3, and cut out with rembg.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/oil-oil/oil-icon/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the SKILL.m folder from the GitHub repo oil-oil/oil-icon into my ~/.claude/skills/oil-icon/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/oil-oil/oil-icon.git ~/.claude/skills/oil-icon && bash ~/.claude/skills/oil-icon/scripts/setup.sh

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal.
Create the skills folder if needed: mkdir -p ~/.claude/skills
Clone the repo: git clone https://github.com/oil-oil/oil-icon.git ~/.claude/skills/oil-icon
Set up the Python environment for the slicer: bash ~/.claude/skills/oil-icon/scripts/setup.sh (creates .venv).
Make sure you have one image-generation backend: ① a built-in image-gen tool in your agent, ② the codex CLI, or ③ an OpenAI Images API key.
If you use an external API, configure the key as described in the repo (references/api-key-setup.md). Never paste keys into the chat.
Restart Claude Code and try: "make 16 linear-style icons for a settings screen".
Note: the doc mixes reference/ and references/ paths — run ls ~/.claude/skills/oil-icon to confirm the actual folder names.

View source on GitHub ↗License: MIT