Iconoteka

iconoteka-mcp

Iconoteka の MCP サーバーです。AI アシスタントが1,400個のアイコンを検索し、そのまま貼り付けられる SVG を返します。

「中くらいの太さの通知ベル」のように頼むと、アシスタントはパスをでっち上げたり、たまたま覚えているライブラリから選んだりせず、実際のアイコンを返します。

セットアップ

各クライアントは独自の形式で MCP サーバーを登録するため、お使いのクライアントに合った項目を使用してください。

Claude Code

claude mcp add --scope user iconoteka -- npx -y iconoteka-mcp

Codex

codex mcp add iconoteka -- npx -y iconoteka-mcp

または ~/.codex/config.toml に設定します。

[mcp_servers.iconoteka]
command = "npx"
args = ["-y", "iconoteka-mcp"]

VS Code (GitHub Copilot)

code --add-mcp '{"name":"iconoteka","command":"npx","args":["-y","iconoteka-mcp"]}'

または、ワークスペースごとに .vscode/mcp.json に設定します。キーは servers です。

{
  "servers": {
    "iconoteka": {
      "command": "npx",
      "args": ["-y", "iconoteka-mcp"]
    }
  }
}

Cursor、Claude Desktop、Windsurf、Gemini CLI は同じ形式を使い、それぞれ別のファイルに設定します。

クライアント	ファイル
Cursor	~/.cursor/mcp.json、またはプロジェクト内の .cursor/mcp.json
Claude Desktop	~/Library/Application Support/Claude/claude_desktop_config.json（macOS）、%APPDATA%\Claude\claude_desktop_config.json（Windows）
Windsurf	~/.codeium/windsurf/mcp_config.json
Gemini CLI	~/.gemini/settings.json、またはプロジェクト内の .gemini/settings.json

{
  "mcpServers": {
    "iconoteka": {
      "command": "npx",
      "args": ["-y", "iconoteka-mcp"]
    }
  }
}

Zed — settings.json の context_servers の下に設定します。

{
  "context_servers": {
    "iconoteka": {
      "command": "npx",
      "args": ["-y", "iconoteka-mcp"],
      "env": {}
    }
  }
}

アイコンデータはパッケージに含まれているため、オフラインで動作します。

ツール

search_icons — 意味や名前でアイコンを検索します。関連度順に並んだ候補と、それぞれに用意されている太さやスタイル、その他のキーワードを返します。

search_icons({ query: "notification bell" })
→ bell  [Interface] ★popular  score 949
      variants: 7 weights, fill varies by weight
      also matches: notification, notify, reminder, ring, sound

category と limit は省略可能です。

get_icon — 1つまたは複数のアイコンの SVG マークアップを取得します。

get_icon({ name: "bell", weight: "medium", style: "fill" })
→ bell — medium fill — Interface

  <svg width="24" height="24" viewBox="0 0 24 24" …>
    <path d="M12 22.25C10.375…" fill="currentColor"/>
  </svg>

配列を渡すと、一度のリクエストで最大24個のアイコンを取得できるため、ツールバー全体をまとめて取得できます。

get_icon({ name: ["bell", "trash", "pen"] })
→ one block per icon, separated by ---

weight は thin ultralight light regular medium semibold bold（デフォルトは regular）、style は stroke または fill（デフォルトは stroke）です。パスは currentColor を使用するため、周囲のテキストの色を引き継ぎます。

name にはアイコン本来の名前のほか、よく使われる呼び名を指定できます。trash、edit、settings はそれぞれ適切なアイコンに解決されます。

ほとんどのアイコンには14種類すべてのバリエーションがありますが、7種類または8種類のものもあります。存在しないバリエーションを指定すると、サーバーは代わりに使えるものを案内します。たとえば、"download" has no fill; it is a stroke-only icon. Use style "stroke". のように返します。

list_categories — すべての23カテゴリと、各カテゴリのアイコン数を返します。

サポート

Iconoteka は、個人が作成し、保守している無料のオープンソースライブラリです。月額のPatreon サブスクリプション、または一度限りのKo-fi 寄付を通じて、今後の開発を支援できます。

ライセンス

MIT — このサーバーとアイコンの両方が対象です。クローズドソースを含め、個人利用および商用利用は無料です。帰属表示は不要です。

Iconoteka の名称とロゴは、MIT ライセンスの対象外です。