keyword-icons

A Claude Code skill that turns a keyword into clean, presentation-ready PNG icons.

Say "make me an icon for hospital" and get three distinct concepts — 1:1, transparent background, uniform line style — ready to drop into PowerPoint, Keynote, or any doc. Works with keywords in any language (「医院」 works just as well as "hospital").

Examples

"hospital" → three concepts:

building + cross cross badge first-aid kit

"contract" → three concepts:

signed document signing pen sealed document

Recolor any concept ("use concept 2 in #0F6CBD"):

How it works

  1. For each keyword, the skill picks three different visual metaphors (not three variants of one shape).
  2. Each concept is written as a small SVG on a shared 100×100 grid — stroke width 6, rounded caps, currentColor only. That's what makes the icons look like one family and stay recolorable.
  3. A Playwright script renders each SVG to a transparent square PNG (1024 px by default).
  4. The SVG stays as the source of truth: recoloring and resizing are lossless re-renders, and any detail can be tweaked by editing the SVG.
icons/hospital/
├── 01-building-cross.svg   ← editable source
├── 01-building-cross.png   ← 1024×1024, transparent
├── 02-cross-badge.svg
├── 02-cross-badge.png
├── 03-first-aid-kit.svg
└── 03-first-aid-kit.png

Install

git clone https://github.com/ruthless-coder-ai/keyword-icons.git ~/.claude/skills/keyword-icons
pip install playwright && playwright install chromium

That's it. Claude Code picks the skill up automatically.

Usage

Just ask in plain language:

  • "Make me an icon for growth"
  • "I need a simple pictogram for data security in my slides"
  • "给我做个「合作」的图标"
  • "Use concept 3, but in our brand blue #0F6CBD"
  • "The cross in concept 1 is too small, make it bigger"

The render script also works standalone:

python3 scripts/render_icons.py ./icons/hospital/ --color "#1A1A1A" --size 1024
python3 scripts/render_icons.py ./icons/hospital/02-*.svg --color "#0F6CBD" --suffix blue

Tips

  • The PNGs have transparent backgrounds — drag them straight into PowerPoint.
  • To change an icon's color, re-render it instead of using PowerPoint's picture recolor (which washes icons out).
  • Icons are designed to stay readable when scaled down to 16 px.

Requirements

License

MIT