AgentSkillsCN

better-icons

在任何项目中处理图标时均可使用此功能。提供 CLI 工具,支持搜索 200 多个图标库(Iconify),并一键获取 SVG 图标。命令包括:`better-icons search <query>` 用于查找图标,`better-icons get <id>` 用于获取 SVG 图标。此外,该工具还可用作 MCP 服务器,为 AI 代理提供支持。

SKILL.md
--- frontmatter
name: better-icons
description: "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."

Better Icons

Search and retrieve icons from 200+ libraries via Iconify.

CLI

bash
# 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

bash
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)

ToolDescription
search_iconsSearch across all libraries
get_iconGet single icon SVG
get_iconsBatch retrieve multiple icons
list_collectionsBrowse available icon sets
recommend_iconsSmart recommendations for use cases
find_similar_iconsFind variations across collections
sync_iconAdd icon to project file
scan_project_iconsList icons in project

TypeScript Interfaces

typescript
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