Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add nweii/agent-stuff --skill suggest-lucide-icons -a claude-code
Open on GitHub

What 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-broken and 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-code

2Manually: put the files in place

~/.claude/skills/suggest-lucide-icons/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/suggest-lucide-icons/

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

Similar skills

Everything for Design →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor