Better Icons

🚀 Better Icons

150以上のアイコンコレクションから20万以上のアイコンを検索して取得できます。AIエージェント用のMCPサーバーやCLIツールとして機能します。

🚀 クイックスタート

スキルの追加

スキルを使用して、基礎となるアイコンCLIの使用を有効にすることができます。

npx add-skill better-auth/better-icons

MCPサーバー (AIエージェント)

MCPサーバーを設定して、AIコーディングエージェントでアイコンツールを有効にします。

npx better-icons setup

これにより、次のAIエージェントに対してMCPサーバーが対話的に設定されます。

• Cursor
• Claude Code
• OpenCode
• Windsurf
• VS Code (Copilot)
• Google Antigravity

または、手動で設定することもできます。

CLI (直接使用)

CLIを使用して、ターミナルから直接アイコンを検索して取得できます。

# アイコンを検索する
npx better-icons search arrow
npx better-icons search home --prefix lucide --limit 10

# アイコンのSVGを取得する (標準出力に出力)
npx better-icons get lucide:home > icon.svg
npx better-icons get mdi:account --color '#333' --size 24

# スクリプト用のJSON出力
npx better-icons search settings --json | jq '.icons[:5]'
npx better-icons get heroicons:check --json

✨ 主な機能

• 20万以上のアイコン - 150以上のアイコンコレクション（Lucide、Heroicons、Material Designなど）を横断して検索できます。
• 自動学習 - 使用したアイコンコレクションを記憶し、将来の検索で優先的に表示します。
• プロジェクト同期 - アイコンを直接アイコンファイル（.tsx, .ts, .js）に書き込み、チャットにSVGを貼り付ける代わりに使用できます（トークンを節約します！）
• 一括取得 - 一度に複数のアイコンを取得できます。
• 類似アイコン - 異なるコレクションやスタイルで同じアイコンを見つけることができます。
• 最近使用したアイコン - 以前に使用したアイコンにすばやくアクセスできます。
• マルチフレームワーク - React、Vue、Svelte、Solid、および生のSVGエクスポートに対応しています。

📚 詳細ドキュメント

手動インストール

Cursor

~/.cursor/mcp.jsonに以下を追加します。

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

Claude Code (CLI)

~/.claude/settings.jsonに以下を追加します。

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

Google Antigravity

~/.gemini/antigravity/mcp_config.jsonに以下を追加します。

{
  "mcpServers": {
    "better-icons": {
      "command": "npx",
      "args": ["-y", "better-icons"]
    }
  }
}

MCPツール

AIエージェントとMCPサーバーを使用する場合、以下のツールが利用可能です。

search_icons

150以上のアイコンコレクションを横断してアイコンを検索します。

"arrow"アイコンを検索する
lucideコレクションの"home"アイコンを検索する

パラメータ:

• query (必須): 検索クエリ（例: 'arrow', 'home', 'user'）
• limit (オプション): 最大結果数（1 - 999、デフォルト: 32）
• prefix (オプション): コレクションでフィルタリング（例: 'mdi', 'lucide'）
• category (オプション): カテゴリでフィルタリング

get_icon

特定のアイコンのSVGコードを複数の使用形式で取得します。

mdi:homeのSVGを取得する
mdi:homeのURLを取得する
サイズ24のlucide:arrow-rightを取得する

パラメータ:

• icon_id (必須): 'prefix:name'形式のアイコンID（例: 'mdi:home'）
• color (オプション): アイコンの色（例: '#ff0000', 'currentColor'）
• size (オプション): アイコンのサイズ（ピクセル）
• format (オプション): 'svg'（デフォルト）または 'url'

返り値:

• 生のSVGコード
• React/JSXコンポーネントコード
• Iconifyコンポーネントの使用方法
• 直接のSVG URL（format: "url"の場合）

list_collections

利用可能なアイコンコレクション/ライブラリを一覧表示します。

すべてのアイコンコレクションを一覧表示する
"material"コレクションを検索する

パラメータ:

• category (オプション): カテゴリでフィルタリング
• search (オプション): 名前でコレクションを検索

recommend_icons

特定のユースケースに適したアイコンの推薦を取得します。

設定ボタンにはどのアイコンを使うべきですか？
ユーザー認証用のアイコンを推薦してください

パラメータ:

• use_case (必須): 必要なものを説明する
• style (オプション): 'solid', 'outline', または 'any'
• limit (オプション): 推薦数（1 - 20）

get_icon_preferences

学習したアイコンコレクションの使用統計とともに、アイコンの使用嗜好を表示します。

私のアイコンの嗜好を表示する
私が最もよく使用するアイコンコレクションは何ですか？

clear_icon_preferences

学習したすべてのアイコンの嗜好をリセットして、最初からやり直します。

私のアイコンの嗜好をクリアする
アイコンの嗜好をリセットする

find_similar_icons

異なるコレクションやスタイルで、指定されたアイコンの類似アイコンまたはバリエーションを見つけます。

lucide:homeに似たアイコンを見つける
mdi:arrow-rightのような他の矢印アイコンはありますか？

パラメータ:

• icon_id (必須): バリエーションを見つけるアイコンID
• limit (オプション): 類似アイコンの最大数（1 - 50、デフォルト: 10）

get_icons

一度に複数のアイコンを取得します（一括取得）。複数回のget_icon呼び出しよりも効率的です。

これらのアイコンを取得する: lucide:home, lucide:settings, lucide:user

パラメータ:

• icon_ids (必須): アイコンIDの配列（最大20）
• color (オプション): すべてのアイコンの色
• size (オプション): すべてのアイコンのサイズ（ピクセル）

get_recent_icons

最近使用したアイコンを表示して、すばやく再利用できます。

私の最近使用したアイコンを表示する
私が最近使用したアイコンは何ですか？

パラメータ:

• limit (オプション): 表示する最近使用したアイコンの数（1 - 50、デフォルト: 20）

sync_icon

アイコンを取得し、自動的にプロジェクトのアイコンファイルに追加します。アイコンを追加するおすすめの方法です。

lucide:homeアイコンを私のプロジェクトに同期する
設定アイコンを私のアイコンファイルに追加する

パラメータ:

• icons_file (必須): アイコンファイルの絶対パス
• framework (必須): 'react', 'vue', 'svelte', 'solid', または 'svg'
• icon_id (必須): 'prefix:name'形式のアイコンID
• component_name (オプション): カスタムコンポーネント名
• color (オプション): アイコンの色
• size (オプション): アイコンのサイズ（ピクセル）

返り値:

• アイコンが追加された（または既に存在する）ことの確認
• 使用するためのインポート文
• 使用例

scan_project_icons

アイコンファイルをスキャンして、既に利用可能なアイコンを確認します。

私のプロジェクトに既にあるアイコンは何ですか？
私のアイコンファイルをスキャンする

パラメータ:

• icons_file (必須): アイコンファイルの絶対パス

人気のアイコンコレクション

CLIリファレンス

アイコンを検索する

150以上のアイコンコレクションを横断して検索します。

better-icons search <query> [options]

アイコンを取得する

単一のアイコンのSVGコードを取得します。

better-icons get <icon-id> [options]

アイコンIDの形式は prefix:name（例: lucide:home, mdi:arrow-right）です。

セットアップコマンド

better-icons setup              # 対話型セットアップウィザード
better-icons setup -y           # 自動承認（グローバルスコープ）
better-icons setup -s project   # 現在のプロジェクトのみを設定
better-icons config             # 手動設定の説明を表示

🔧 技術詳細

# 依存関係をインストールする
bun install

# ローカルで実行する
bun run dev

# ビルドする
bun run build

📄 ライセンス

MIT