Keyword Icons
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
Install
npx skills add ruthless-coder-ai/keyword-icons --skill keyword-iconsgit clone --depth 1 https://github.com/ruthless-coder-ai/keyword-icons.git /tmp/keyword-icons
mkdir -p ~/.claude/skills
cp -r /tmp/keyword-icons/. ~/.claude/skills/keyword-iconsPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Keyword Icons
Turn a keyword (any language) into **three alternative icon concepts**: hand-written SVG sources plus 1:1 transparent-background PNGs. The style targets classic presentation icon sets (Templafy / Fluent line icons): uniform stroke weight, rounded caps, simple geometry, recognizable even at 16 px.
## Workflow
### 1. Read the request
Extract from the user's message: the **keyword** (required), color (default near-black `#1A1A1A`), style (default `line`; use `solid` only if they ask for filled/solid icons), size (default 1024 px), output directory (default `./icons/<keyword-slug>/`, slug in lowercase English). Everything has a default — don't ask follow-up questions, just produce.
### 2. Pick three metaphors
The three concepts must be **three different visual metaphors**, not three variants of one shape. List what the concept evokes, then pick the three most recognizable. Example for "hospital":
- Concept 1: building + cross (the institution)
- Concept 2: medical cross in a circle badge (the symbol)
- Concept 3: first-aid kit (the object)
Prefer internationally understood symbols. For abstract keywords ("efficiency", "trust"), use the most conventional concrete stand-in (bolt + gear, handshake / shield).
### 3. Hand-write the SVGs
One file per concept, named `01-<slug>.svg`, `02-<slug>.svg`, `03-<slug>.svg` — slug describes the metaphor (`01-building-cross.svg`).
These rules are what make three icons look like one family:Details
- Skill name
keyword-icons- Repository
- ruthless-coder-ai/keyword-icons
- License
- MIT
- Repo updated
- 22 July 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Keyword Icons skill do?
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
How do I install the Keyword Icons skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add ruthless-coder-ai/keyword-icons --skill keyword-icons. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Keyword Icons popular?
It lives in ruthless-coder-ai/keyword-icons, which has 1 GitHub stars and 0 forks, and is included in 1 curated skill list.
Related skills
Impresario
Shushant17711/impresario
Use when building, creating, designing, redesigning, animating or polishing any website, landing page, portfolio, product page, hero, microsite, component or app screen in any frontend stack — even when the user gives only a subject ("make a website for X") with no style direction. Autonomously invents a memorable, subject-specific concept and ships heavily animated, flowing, award-level (Awwwards style) work without asking the user for style choices. Also use when a result looks generic, templated, AI-made, flat, static or lifeless.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Multi Stack MCP
VovikP/multi-stack-mcp
Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.
Anti Slop Design
2wwewtech/anti-slop-design
Autonomous Principal Design Technologist and Anti-AI-Slop Specialist. Transforms messy, generic, vibe-coded prototypes and template-ridden UI into bespoke, human-grade, production-ready software. Use whenever building, styling, refactoring, or auditing web apps, SaaS dashboards, landing pages, mobile interfaces, Tailwind CSS, component systems, or when asked to "fix my UI", "make it look professional", "clean up AI slop", "improve UX", or "review frontend design".
Pdp Audit
llizell/pdp-audit
Research-backed UX and conversion audit of ecommerce product detail pages (PDPs). Use this skill whenever the user wants to review, audit, critique, or improve a product page — including requests like "review this PDP", "audit my product page", "why isn't this page converting", "UX review of [URL]", "check this product page against best practices", or when the user shares a product page URL or screenshots and asks for feedback. Also trigger for CRO reviews, conversion audits, or design QA of product pages, even if the words "audit" or "PDP" are not used.
Tastegate
2stas4000/tastegate
Build or fix a frontend (landing page, marketing site, dashboard, app screen, component) so it looks designed, not AI-generated, and prove it in a real browser before calling it done. Picks a design direction first (taste), builds on a craft floor (impeccable-style rules), then runs scripts/gate.py, which renders the page at phone and desktop width and fails on overlapping text, sideways scroll, low contrast, tiny tap targets, AI purple gradients, gradient text, emoji icons, eyebrow labels, default fonts, three-equal-card grids and placeholder copy. Use for any UI build, redesign, polish or "m
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.