Better Icons
CLI to search 200+ Iconify icon sets and fetch SVGs; output needs fill attrs stripped
Test report
- Verdict
- Works with setup
- Score
- Tested
- Jul 21, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 0e44f0c
INSTALL 5/5: frontmatter parses with name+description; body references no local files, only the npm package and Iconify API — spot-checked registry.npmjs.org/better-icons (200, latest 1.0.4, bin present), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). No hardcoded paths, no curl|sh, no base64, no secret exfil, no injection text. Note provenance: this is a vendored copy — upstream author is better-auth/better-icons, not dtsola. TRIGGER 5/5, all judged correctly. SHOULD fire: "I need a good trash/delete icon for this toolbar, find me one" (yes); "What icon sets have a filled bell icon? Give me the SVG" (yes); "Add a settings gear icon to the Vue sidebar component" (yes). SHOULD NOT: "Generate an app icon/logo for my macOS app at 1024x1024" (no — logo generation, not library lookup); "favicon.ico 404s in production" (no — static-asset serving bug). Caveat: the opening clause "Use when working with icons in any project" is over-broad; only the second sentence keeps case 4 from false-firing. OUTPUT 6/10, genuinely measured. Task: supply inline 24px `search` + `settings` SVGs from one consistent set for a Vue app. BASELINE (frontmatter only): I got `search` right from memory but could NOT recall Lucide's `settings` path and would have had to truncate it or fall back to adding a lucide-vue-next dependency. SKILL: `npx better-icons@1.0.4 search settings --prefix lucide` then `get` returned the exact upstream geometry — real win on the thing baseline failed at. BUT the CLI injects `fill="currentColor"` (or `--color`'s value) onto child path/circle elements inside a `<g fill="none">`, which upstream Iconify does not do. I rasterized both with rsvg-convert: CLI search icon = 46.1% dark pixels vs upstream 19.4%; visually the magnifying glass renders as a solid disc and the gear as a featureless blob with no center hole. So following the skill strictly ships broken outline icons for most of the collections it itself recommends. A one-line sed stripping child fill attrs restores correct rendering (verified). Also `--limit 3` and `--limit 8` were both ignored on unfiltered search (returned 32 each time); `--prefix` works. DOCS 4/5: SKILL.md is short and accurate on command shape, and the 200+ libraries / Iconify claim is true. Loses a point because the documented `--limit` flag does not work, the fill-injection defect is undocumented, and the 8-tool MCP table is presented as available but is unverifiable from the doc (no link to the upstream repo, no README in the skill dir). VERDICT setup rather than pass: numeric gates are met (20 total, install 5, trigger 5, outputMeasured true), but the core deliverable needs a manual correction on every `get` call, which is real per-use friction.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 6/10
- Docs & honesty 4/5
What Better Icons does
Wraps the `better-icons` npm CLI so Claude can search across 200+ Iconify icon collections (lucide, mdi, tabler, heroicons, phosphor, solar) and retrieve icon SVGs by `prefix:name` id. Triggers when a task involves finding, choosing, or adding icons to a project rather than hand-writing SVG paths from memory. Documents the CLI flags plus an optional MCP server exposing search, batch-get, recommend, and project-scan tools.
How to install Better Icons
npm install -g better-icons # or: bun add -g better-icons
# (or skip the install and prefix every command with npx/bunx)
mkdir -p ~/.claude/skills/better-icons
curl -sL https://raw.githubusercontent.com/dtsola/xiaoyaosearch/HEAD/.claude/skills/better-icons/SKILL.md \
-o ~/.claude/skills/better-icons/SKILL.md
# verify
better-icons search settings --prefix lucide
better-icons get lucide:settings
# REQUIRED post-step: the CLI injects fill= onto child elements, which fills
# outline icons solid. Strip it:
better-icons get lucide:settings | sed -E 's/(<(path|circle|rect|line|polyline|polygon)) fill="[^"]*"/\1/g'
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Better Icons
-
/better-iconsCLI to search 200+ Iconify icon sets and fetch SVGs; output needs fill attrs stripped
It also activates on plain-language prompts like these:
-
Find a shopping cart icon for this button -
Search for a settings gear icon in Iconify -
Get the SVG for this Material icon
Frequently asked questions
- Is the Better Icons skill free?
- Yes. The skill itself is free from dtsola/xiaoyaosearch. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Better Icons work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 21, 2026. Verdict: Works with setup. INSTALL 5/5: frontmatter parses with name+description; body references no local files, only the npm package and Iconify API — spot-checked registry.npmjs.org/better-icons (200, latest 1.0.4, bin present), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). No hardcoded paths, no curl|sh, no base64, no secret exfil, no injection text. Note provenance: this is a vendored copy — upstream author is better-auth/better-icons, not dtsola. TRIGGER 5/5, all judged correctly. SHOULD fire: "I need a good trash/delete icon for this toolbar, find me one" (yes); "What icon sets have a filled bell icon? Give me the SVG" (yes); "Add a settings gear icon to the Vue sidebar component" (yes). SHOULD NOT: "Generate an app icon/logo for my macOS app at 1024x1024" (no — logo generation, not library lookup); "favicon.ico 404s in production" (no — static-asset serving bug). Caveat: the opening clause "Use when working with icons in any project" is over-broad; only the second sentence keeps case 4 from false-firing. OUTPUT 6/10, genuinely measured. Task: supply inline 24px `search` + `settings` SVGs from one consistent set for a Vue app. BASELINE (frontmatter only): I got `search` right from memory but could NOT recall Lucide's `settings` path and would have had to truncate it or fall back to adding a lucide-vue-next dependency. SKILL: `npx better-icons@1.0.4 search settings --prefix lucide` then `get` returned the exact upstream geometry — real win on the thing baseline failed at. BUT the CLI injects `fill="currentColor"` (or `--color`'s value) onto child path/circle elements inside a `<g fill="none">`, which upstream Iconify does not do. I rasterized both with rsvg-convert: CLI search icon = 46.1% dark pixels vs upstream 19.4%; visually the magnifying glass renders as a solid disc and the gear as a featureless blob with no center hole. So following the skill strictly ships broken outline icons for most of the collections it itself recommends. A one-line sed stripping child fill attrs restores correct rendering (verified). Also `--limit 3` and `--limit 8` were both ignored on unfiltered search (returned 32 each time); `--prefix` works. DOCS 4/5: SKILL.md is short and accurate on command shape, and the 200+ libraries / Iconify claim is true. Loses a point because the documented `--limit` flag does not work, the fill-injection defect is undocumented, and the 8-tool MCP table is presented as available but is unverifiable from the doc (no link to the upstream repo, no README in the skill dir). VERDICT setup rather than pass: numeric gates are met (20 total, install 5, trigger 5, outputMeasured true), but the core deliverable needs a manual correction on every `get` call, which is real per-use friction.
- What is the Better Icons SkillProof Score?
- 8.0/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 6/10, docs & honesty 4/5.
- How do I install Better Icons?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Better Icons with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.