Agent skill
better-icons
Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search <query>` to find icons, `better-icons get <id>` to get SVG. Also available as MCP server for AI agents.
Install this agent skill to your Project
npx add-skill https://github.com/onmax/claude-config/tree/main/skills/better-icons
SKILL.md
Better Icons
Search and retrieve icons from 200+ libraries via Iconify.
CLI
# Search icons
better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]
# Get icon SVG (outputs to stdout)
better-icons get <icon-id> [--color <color>] [--size <px>] [--json]
# Setup MCP server for AI agents
better-icons setup [-a cursor,claude-code] [-s global|project]
Examples
better-icons search arrow --limit 10
better-icons search home --json | jq '.icons[0]'
better-icons get lucide:home > icon.svg
better-icons get mdi:home --color '#333' --json
Icon ID Format
prefix:name - e.g., lucide:home, mdi:arrow-right, heroicons:check
Popular Collections
lucide, mdi, heroicons, tabler, ph, ri, solar, iconamoon
MCP Tools (for AI agents)
| Tool | Description |
|---|---|
search_icons |
Search across all libraries |
get_icon |
Get single icon SVG |
get_icons |
Batch retrieve multiple icons |
list_collections |
Browse available icon sets |
recommend_icons |
Smart recommendations for use cases |
find_similar_icons |
Find variations across collections |
sync_icon |
Add icon to project file |
scan_project_icons |
List icons in project |
TypeScript Interfaces
interface SearchIcons {
query: string
limit?: number // 1-999, default 32
prefix?: string // e.g., 'mdi', 'lucide'
category?: string // e.g., 'General', 'Emoji'
}
interface GetIcon {
icon_id: string // 'prefix:name' format
color?: string // e.g., '#ff0000', 'currentColor'
size?: number // pixels
}
interface GetIcons {
icon_ids: string[] // max 20
color?: string
size?: number
}
interface RecommendIcons {
use_case: string // e.g., 'navigation menu'
style?: 'solid' | 'outline' | 'any'
limit?: number // default 10
}
interface SyncIcon {
icons_file: string // absolute path
framework: 'react' | 'vue' | 'svelte' | 'solid' | 'svg'
icon_id: string
component_name?: string
}
API
All icons from https://api.iconify.design
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
pnpm
Use when managing Node.js dependencies with pnpm - provides workspace setup, catalogs, CLI commands, overrides, and CI configuration
writer
Iterative writing loop. Gemini 3 Pro writes, Claude Agent SDK reviews autonomously. Use for blog posts, docs, technical content needing quality iteration.
nuxt-seo
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
ts-library
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
motion
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
vue
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
Didn't find tool you were looking for?