
suggest-lucide-icons
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.
- Installs
- 618
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nweii/agent-stuff --skill suggest-lucide-icons- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads suggest-lucide-icons automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Suggest Lucide Icons
Suggest the most relevant icons from the Lucide open source icon pack 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-upnotArrow Up - International English:
colornotcolour - Group variants:
<group>-<variant>— e.g.badge-plusis based onbadge - Multiple elements, different sizes: list largest first —
circle-personif circle is bigger - Element with modifier:
[element]-[modifier]—circle-dashednotdashed-circle; combined:circle-dashed-heart-broken
Process
-
Brainstorm associations — key ideas, visual metaphors, and screenshot context clues. Turn them into a handful of search terms.
-
Search the catalog — pull candidates from the script's results rather than guessing names:
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:
python3 scripts/lucide.py validate circle-dashed-heart-broken -
Present 3 confirmed candidates — icon name, and why it fits (symbolic meaning, visual clarity, context appropriateness).
-
Recommend best choice — single strongest option, with rationale.
Guidelines
- Only suggest icons confirmed by
search(results are real) orvalidate(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:
- icon-name — Explanation of fit
- icon-name — Explanation of fit
- icon-name — Explanation of fit
Recommendation: icon-name — Why this is the strongest choice for [context]
FAQ
What does the suggest-lucide-icons skill do?
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.
How do I install suggest-lucide-icons?
Run npx skills add https://github.com/nweii/agent-stuff --skill suggest-lucide-icons in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/suggest-lucide-icons/ (personal) or .claude/skills/suggest-lucide-icons/ (project).
Which AI agents can use suggest-lucide-icons?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is suggest-lucide-icons safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains suggest-lucide-icons?
It is published by nweii in nweii/agent-stuff. It has 618 recorded installs.
More from nweii/agent-stuff
obsidian-templater
nweii/agent-stuff
Open the skill to read its SKILL.md instructions.
validating-startup-ideas
nweii/agent-stuff
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.