better-icons

Better Icons

Iconify 経由で 200 以上のライブラリからアイコンを検索、取得できます。

インストール

better-icons コマンドを使用する前に、環境でツールが利用可能であることを確認してください。

オプション 1 — グローバルにインストールする（推奨。以下のすべての例と同じ方法です）：

# Using npm
npm install -g better-icons

# Using Bun (faster)
bun add -g better-icons

オプション 2 — インストールせずに実行する（各コマンドの先頭に npx または bunx を付けます）：

# Using npx (npm)
npx better-icons search arrow --limit 10
npx better-icons get lucide:home > icon.svg

# Using bunx (Bun — faster)
bunx better-icons search arrow --limit 10
bunx better-icons get lucide:home > icon.svg

AI エージェント向け： better-icons が $PATH に含まれ、以下のコマンドをそのまま実行できるように、グローバルインストールを推奨します。環境のセットアップ時に一度インストールし、その後は npx／bunx を付けずにコマンドを使用してください。

CLI

# Search icons
better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]

# Search and download all found icons as SVG files
better-icons search <query> -d [dir] [--color <color>] [--size <px>]

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

例

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

# Batch download all search results
better-icons search arrow -d              # saves to ./icons/
better-icons search check -d ./my-icons   # saves to ./my-icons/
better-icons search star -d -c '#000' -s 24 --limit 64

アイコン ID の形式

prefix:name - 例：lucide:home、mdi:arrow-right、heroicons:check

人気のコレクション

lucide、mdi、heroicons、tabler、ph、ri、solar、iconamoon

---

MCP ツール（AI エージェント向け）

ツール	説明
search_icons	すべてのライブラリを対象に検索します
get_icon	単一のアイコン SVG を取得します
get_icons	複数のアイコンを一括取得します
list_collections	利用可能なアイコンセットを閲覧します
recommend_icons	用途に応じてスマートにおすすめを提示します
find_similar_icons	コレクション間でバリエーションを検索します
sync_icon	アイコンをプロジェクトファイルに追加します
scan_project_icons	プロジェクト内のアイコンを一覧表示します

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

すべてのアイコンは https://api.iconify.design から取得します。