suggest-lucide-icons — Claude Code skill: pick Lucide icons
Turns a concept, a UI spot or a screenshot into three verified Lucide icon names, then names the best one. No invented icons.
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a claude-codeWhat suggest-lucide-icons does
Give the skill a concept, an action or a screenshot, and it returns three confirmed Lucide icons plus a single recommendation with reasoning. Names come from the catalog, not from guesswork: scripts/lucide.py pulls the full tag set from unpkg.com/lucide-static@latest/tags.json once, keeps it cached for about a day, and searches locally after that. Run search "<terms>" to get real icons ranked with their tags, or validate <name>... to check a name you assembled yourself — a missing name exits nonzero and comes back with near matches.
Python 3 is the only requirement, and the script has no dependencies. Without it you can fetch the same tags.json by hand, or test one icon at https://unpkg.com/lucide-static@latest/icons/<name>.svg: a 200 means it exists, a 404 means it does not, and the 302 redirect has to be followed. That route is slower since nothing is cached.
Lucide names follow tight rules. Kebab-case, international English (color, not colour), a variant appended to its group (badge-plus), the larger element first when sizes differ (circle-person), and modifiers after the element (circle-dashed). When three candidates do not survive a search, the skill tries other terms; if nothing fits after that, it says so instead of padding the list. Each icon you actually need gets its own recommendation.
What it helps with
- find an icon that matches a concept or action
- confirm a Lucide icon name really exists
- choose an icon for a button or a section header
- fill the icon field in note frontmatter
- assemble a compound name like
circle-dashed-heart-brokenand check it
Example prompts for the agent
- What Lucide icon fits a scheduling section?
- Suggest an icon for a delete button and validate the name.
- Here is a screenshot of my sidebar — pick icons for each menu item.
How to install suggest-lucide-icons
1Skills CLI (Vercel)
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a claude-code2Manually: put the files in place
~/.claude/skills/suggest-lucide-icons/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/suggest-lucide-icons/
1Skills CLI (Vercel)
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a codex2Manually: put the files in place
.agents/skills/suggest-lucide-icons/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a cursor2Manually: put the files in place
.cursor/skills/suggest-lucide-icons/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install nweii/agent-stuff suggest-lucide-icons2Manually: put the files in place
.github/skills/suggest-lucide-icons/SKILL.md1Skills CLI (Vercel)
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a gemini-cli2Platform CLI
gemini skills install https://github.com/nweii/agent-stuff --path skills/suggest-lucide-iconsManually: put the files in place
.devin/skills/suggest-lucide-icons/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about suggest-lucide-icons
How do I install suggest-lucide-icons in Claude Code?
Run npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a claude-code. The skill lands in ~/.claude/skills/suggest-lucide-icons/SKILL.md.
What does suggest-lucide-icons do?
It searches the whole Lucide catalog and offers three real icons for a concept or UI placement, then picks the strongest one and explains why.
Does the skill need Python?
scripts/lucide.py runs on Python 3 and pulls in no dependencies. Without Python you can download tags.json directly or check icons one URL at a time.
Source text
SKILL.md · MIT
---
name: suggest-lucide-icons
description: "Pick Lucide icons for a concept, UI placement, or vault note. Searches the full Lucide catalog for real, verified icon names. Use when the user says 'what icon for X', 'suggest a Lucide icon', 'pick an icon', or needs an icon for note frontmatter, a button, or a section header."
metadata:
author: nweii
version: "1.4.1"
---
# Suggest Lucide Icons
Suggest the most relevant icons from the [Lucide open source icon pack](https://lucide.dev) to symbolize a concept or fit specific UI placements. Reason about symbolic associations broadly — across culture, science, and design — rather than only literal matches.
## Input
Provide one or both:
- **Concept**: The idea, action, or meaning to represent
- **Screenshot**: UI context showing where icons are needed
## The catalog script
`scripts/lucide.py` (Python 3, no dependencies) fetches the entire Lucide set once from `unpkg.com/lucide-static@latest/tags.json`, caches it ~24h, and searches and validates locally — so you never fetch icons one at a time:
- `search "<terms>"` — real icons matching a concept by name and semantic tag, ranked. Every result is an icon that exists, listed with its tags so you can see why it fits.
- `validate <name>...` — confirm specific names (e.g. a compound you built by hand). Misses come back with near-match suggestions, and the exit code is nonzero if any name is missing.
If Python 3 isn't available, fetch that URL directly (it's `{name: [tags]}`), or check one icon at `https://unpkg.com/lucide-static@latest/icons/<name>.svg` (200 exists, 404 doesn't; follow the 302 redirect).
## Naming conventions
Icon names follow strict rules — apply these when reading results or building compound candidates to validate:
- **kebab-case**: `arrow-up` not `Arrow Up`
- **International English**: `color` not `colour`
- **Group variants**: `<group>-<variant>` — e.g. `badge-plus` is based on `badge`
- **Multiple elements, different sizes**: list largest first — `circle-person` if circle is bigger
- **Element with modifier**: `[element]-[modifier]` — `circle-dashed` not `dashed-circle`; combined: `circle-dashed-heart-broken`
## Process
1. **Brainstorm associations** — key ideas, visual metaphors, and screenshot context clues. Turn them into a handful of search terms.
2. **Search the catalog** — pull candidates from the script's results rather than guessing names:
```bash
python3 scripts/lucide.py search "calendar schedule date"
```
The tags show why each fits. If you build a compound name from the naming conventions, confirm it before suggesting:
```bash
python3 scripts/lucide.py validate circle-dashed-heart-broken
```
3. **Present 3 confirmed candidates** — icon name, and why it fits (symbolic meaning, visual clarity, context appropriateness).
4. **Recommend best choice** — single strongest option, with rationale.
## Guidelines
- Only suggest icons confirmed by `search` (results are real) or `validate` (for hand-built names) — never a made-up name.
- If fewer than 3 candidates survive, search more terms before giving up.
- If no good matches exist after thorough searching, say so.
- For screenshots, tailor to the specific design context.
- Provide a distinct recommendation for each icon needed.
- Ready for multiple feedback rounds to refine suggestions.
## Output Format
**Brainstorm**: [Key associations and metaphors]
**Candidate Icons**:
1. **icon-name** — Explanation of fit
2. **icon-name** — Explanation of fit
3. **icon-name** — Explanation of fit
**Recommendation**: **icon-name** — Why this is the strongest choice for [context]
© nweii · MIT · nweii/agent-stuff