Svg/icons MCP

Svg/icons MCP

Svg/icons MCP サーバーは、AI コーディングツールをsvgicons.comに接続します。ここには32万点以上のオープンソース SVG アイコンが収録されています。アシスタントは、アカウント登録なしでアイコンやアイコンセットを検索したり、アイコンのメタデータを取得したり、UI 向けのアイコンのおすすめを得たりできます。Pro アカウント（OAuth またはスコープを設定した API トークン）があれば、SVG の生のマークアップの取得、PNG 形式でのエクスポート、カスタムスタイルのアイコンを含む永続的なアイコンコレクションの作成、読み取り、拡張、エクスポートも可能です。これにより、アイコン探しの工程を開発ワークフローから離さずに済みます。

このサーバーは、Streamable HTTP（HTTP POST による JSON-RPC リクエスト）を使用するホスト型のリモート MCP サーバーです。ローカルへのインストールは不要で、ローカル版の Svg/icons MCP サーバーパッケージもありません。

エンドポイント：

https://svgicons.com/mcp

現在の MCP サーバーのバージョン：0.3.2（プロトコル 2025-06-18）。

Official MCP Registry 名：com.svgicons/mcp — Official MCP Registry の掲載ページを参照してください。

このリポジトリの内容

このリポジトリでは、ホスト型 MCP エンドポイントについて説明しています。サーバーコードは含まれていません。

• クライアントの接続手順と設定例
• ライブツールのリファレンス
• 認証とスコープに関するガイダンス
• プロンプト作成のガイダンスとプロンプトライブラリ
• ワークフローの例に関するドキュメント
• セキュリティに関するガイダンスとトラブルシューティング
• REST API および CLI の各リポジトリとの関係
• コミュニティ向けユースケースのテンプレート

製品の最新ドキュメントが正確な情報源です：MCP サーバーのドキュメントとMCP 開発者向け概要を参照してください。

ライブ MCP ツール

ホスト型エンドポイントでは、以下の12個のライブツールのみを公開しています。

検索と読み取り（メタデータは匿名で利用可能、SVG の生データには Pro が必要）：

• search_icons — クエリ、カテゴリ、アイコンセットのプレフィックスでアイコンのメタデータを検索します。Pro トークンを使用して SVG の生データを取得するには、includeSvg を追加します。
• search_icon_sets — アイコンセットを名前、プレフィックス、作者、カテゴリ、説明で検索し、統一感のあるビジュアルファミリーを選びます。
• get_icon — ID でアイコンを1つ取得します。メタデータは公開されていますが、SVG の生データには Pro トークンが必要です。

おすすめ（匿名で利用可能）：

• recommend_icons_for_ui — UI や画面について説明すると、簡潔な理由を添えてアイコン候補を提示します。

アイコンコレクション — 作成、読み取り、拡張（Pro）：

• create_icon_kit — 永続的なアイコンコレクションを作成します。必要に応じてアイコン ID を初期登録できます。
• generate_icon_kit_for_project — プロジェクトの概要、画面の一覧、または必要なコンセプトをもとに、アイコンコレクションを生成します。
• list_icon_collections — アイコン数、任意の名前／slug フィルター、ページネーションとともに、アイコンコレクションを一覧表示します。
• get_icon_collection — カスタムアイコンのエントリーとカスタマイズ済み SVG 本体を含む、1つのコレクションのエントリーをページネーション付きで読み取ります。
• add_icons_to_collection — カタログのアイコンを既存のコレクションに追加します。冪等に動作し、すでに存在するアイコンはスキップされます。
• remove_icon_from_collection — コレクションからアイコンを削除します。デフォルトではエントリー単位で削除し、アイコンのすべてのエントリーを削除するには allVariants: true を指定します。

エクスポート（Pro）：

• export_icon_png — 1つのアイコンを PNG ファイル、または PNG のバリエーションをまとめた ZIP としてレンダリングし、JSON で扱える Base64 ペイロードを返します。
• export_icon_collection — アイコンコレクションのエクスポートをキューに登録します。SVG フォルダー、SVG スプライト、React／Vue／Svelte／Solid／Blade コンポーネント、Storybook ギャラリー、npm パッケージのひな形、PNG パック、Iconify JSON、JSON／ライセンスマニフェストをエクスポートできます。

確認済みの入力フィールド、出力に関する注意事項、アクセス要件、安全なプロンプトの例については、docs/TOOLS.mdを参照してください。

知っておきたいエクスポートの動作

• コレクション内のカスタムアイコン項目は、カスタマイズされたスナップショットを一意の派生ファイル名でエクスポートします。カスタマイズは保持され、カタログのアイコンに置き換えられることはありません。
• colorPolicy を指定しない場合、スタイルが適用されているコレクションやカスタムアイコン項目を含むコレクションは、デフォルトで preserve になり、カスタマイズで定義された色がエクスポートファイルに保持されます。通常のコレクションでは、デフォルトの currentColor が維持されます。明示的に colorPolicy を指定した場合は、常にその指定が優先されます。
• formats: ["png"] を png-pack の省略形として使用できます。

アクセス階層と認証

匿名（アカウント不要）： search_icons、search_icon_sets、get_icon、recommend_icons_for_ui を使用したメタデータのみのアクセスが可能です。匿名リクエストにはメソッドごとにレート制限があり、現在、検索またはレコメンド1回あたり最大10個のアイコンに制限されています。生の SVG、PNG エクスポート、およびすべての Icon Collection ツールは匿名では利用できません。

Pro： 次のいずれかで認証します。

• OAuth 2.0 — PKCE を使用した認可コードフローと Dynamic Client Registration を利用します。クライアントは https://svgicons.com/.well-known/oauth-authorization-server（リソースメタデータは /.well-known/oauth-protected-resource/mcp）で設定を取得し、動的に登録した後、svgicons.com に移動してサインインし、アクセスを承認します。
• Pro API トークン — アカウントページで作成する、スコープを指定した個人用アクセストークンです。プライベートヘッダーに対応したクライアントで Authorization: Bearer YOUR_API_TOKEN として送信します。

Pro では検索上限が引き上げられ（検索1回あたり最大50個のアイコン）、生の SVG、PNG エクスポート、Icon Collection ツールおよびエクスポートツールが利用可能になります。

トークンのスコープ — 各クライアントには、必要最小限のスコープを付与してください。

スコープ	利用可能になる機能
mcp:use	認証が必要な MCP 呼び出しすべてに必要です。
search:read	検索ワークフロー。
icons:read	生の SVG と PNG エクスポートの入力。
collections:read	Icon Collection の一覧表示と読み取り。
collections:write	Icon Collection の作成と拡張。
exports:create	PNG エクスポートと Icon Collection のエクスポートワークフロー。

Pro Plan は月額 €6/$7、または買い切り €69/$79 です。詳しくは料金をご覧ください。ウェブサイトでは、無料の Member アカウントでも、Pro クレジット15件分の1回限りのトライアル枠を利用して Icon Collection を使用できます。MCP と API へのアクセスには、常に Pro トークンが必要です。

docs/AUTHENTICATION.md と MCP サーバーのドキュメントをご覧ください。

クライアントの接続

Claude Code

claude mcp add --transport http svgicons https://svgicons.com/mcp

続いて、Claude Code 内で /mcp を実行し、OAuth サインインを完了します。代わりに Pro API トークンを使用する場合は、次のとおりです。

claude mcp add --transport http svgicons https://svgicons.com/mcp \
  --header "Authorization: Bearer YOUR_API_TOKEN"

Claude.ai と Claude Desktop（カスタムコネクタ）

1. Customize → Connectors を開き、Add custom connector をクリックします。
2. https://svgicons.com/mcp を入力し、Add をクリックします。
3. OAuth のプロンプトに従って svgicons.com にサインインします（Dynamic Client Registration のため、クライアント ID は不要です）。
4. 会話ごとに + メニュー → Connectors からコネクタを有効にします。

Team／Enterprise のオーナーは、Organization settings → Connectors → Add → Custom → Web から追加します。その後、メンバーが個別に接続します。

Cursor

プロジェクトの .cursor/mcp.json またはグローバルの ~/.cursor/mcp.json：

{
  "mcpServers": {
    "svgicons": {
      "url": "https://svgicons.com/mcp"
    }
  }
}

Cursor の OAuth フローを使用するには headers を省略します。トークンを追加する場合は、次のとおりです。

{
  "mcpServers": {
    "svgicons": {
      "url": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "svgicons": {
      "serverUrl": "https://svgicons.com/mcp"
    }
  }
}

OAuth を使用するには headers を省略します。環境変数を参照する場合は、次のとおりです。

{
  "mcpServers": {
    "svgicons": {
      "serverUrl": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:SVGICONS_API_TOKEN}"
      }
    }
  }
}

VS Code（GitHub Copilot エージェントモード）

ワークスペースの .vscode/mcp.json：

{
  "servers": {
    "svgicons": {
      "type": "http",
      "url": "https://svgicons.com/mcp"
    }
  }
}

ChatGPT と Codex

ChatGPT は Dynamic Client Registration を使用した OAuth で認証します。Codex 形式のクライアントでは、ベアラートークンを使用できます。ウェブサイトのガイド「ChatGPT と Codex で MCP を使用する」に加え、configs/chatgpt-codex.md と configs/codex.example.md をご覧ください。

その他のクライアント

リモート HTTP MCP サーバーに対応したクライアントは、次の汎用的な形式で接続できます。

{
  "mcpServers": {
    "svgicons": {
      "type": "http",
      "url": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

コマンドベースのローカル MCP サーバーのみを起動できるクライアントは、mcp-remote を介して接続できます。

{
  "mcpServers": {
    "svgicons": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://svgicons.com/mcp",
        "--header",
        "Authorization: Bearer ${SVGICONS_API_TOKEN}"
      ],
      "env": {
        "SVGICONS_API_TOKEN": "YOUR_API_TOKEN"
      }
    }
  }
}

その他のクライアント向けガイダンス：docs/CLIENTS.md および configs/README.md。

公式 MCP レジストリへの掲載

このサーバーは、公式 MCP レジストリに com.svgicons/mcp として公開されています。最新の掲載内容を確認してください。

curl -s "https://registry.modelcontextprotocol.io/v0/servers?search=com.svgicons"

PulseMCP など、公式レジストリを取り込むディレクトリには、自動的に掲載されます。

公開メタデータから始める

ターミナルでの使い方は、CLI 公開メタデータのクイックスタートを参照してください。CLI 0.1.0 は、2026 年 10 月 17 日に Windows で、匿名検索、メタデータの確認、ファミリーによる絞り込み、ページネーションについて検証済みです。これは CLI の経路を検証するものであり、すべての MCP クライアントや認証済みエクスポートを検証するものではありません。

検索とメタデータの確認では、生の SVG ファイルはダウンロードされません。検索から生の SVG、PNG、またはコレクションのエクスポートに進むには、上記で説明した Pro のアクセス権とスコープが必要です。React の filebar の例では、ローカルで調整した Lucide コンポーネントを使用しています。認証済みの Pro コレクションエクスポートの証拠ではありません。

エージェント向けプロンプトの例

1. 「16px で使えるシンプルなロックアイコンを探して、アプリの Icon Collection に追加してください。」
2. 「請求設定ページ向けのアイコンを提案してください。必要なのは、支払い方法、請求書、返金のコンセプトです。最適なアイコンを選んで、'Billing UI' というコレクションを作成してください。」
3. 「'Dashboard' コレクションを、デフォルトサイズ 20px の React TypeScript コンポーネントとしてエクスポートし、PNG パックを 2x の密度でダウンロードしてください。」

プロンプトライブラリには、検索、React コンポーネント、ダッシュボードのナビゲーション、絵文字の置き換え、アクセシビリティのレビュー、テーマに対応したアイコン、デザインシステムのレビュー、Icon Collections、PNG エクスポート用のコピー可能なワークフローが含まれています。アイコンの検索から始め、ツール呼び出しと選択したアイコンを確認してから、コードやエクスポート向けのプロンプトに進んでください。

例とユースケース

• 例では、ホスト型 MCP の実践的なワークフローを紹介しています。これらはドキュメント用の例であり、実行可能なローカル MCP サーバーアプリではありません。
• コミュニティのユースケースでは、ワークフローを安全に共有する方法を説明しています。
• ユースケースのテンプレートでは、再利用可能な投稿形式を提供しています。
• GitHub の Issue テンプレートは、ユースケース、セットアップのサポート、フィードバック、バグ報告に対応しています。

サンプルのユースケースには、実際の顧客からの投稿ではなく、例であることが明記されています。変更をコミットする前に、生成された SVG とコードを確認してください。

検証

変更を提案する前に、ローカルでチェックを実行してください。

npm ci
npm run validate

CI は、ライブ MCP 呼び出し、認証トークン、公開、デプロイを行わずに、同じ検証を実行します。

関連リポジトリとドキュメント

• Web サイトの MCP 開発者向けページ：https://svgicons.com/developers/mcp
• MCP サーバーのドキュメント：https://svgicons.com/docs/mcp-server
• ChatGPT と Codex のセットアップドキュメント：https://svgicons.com/docs/chatgpt-codex-mcp-setup
• REST API リポジトリ：https://github.com/svgicons-com/api
• CLI リポジトリ：https://github.com/svgicons-com/cli

リポジトリの役割：

• MCP リポジトリ：AI コーディングツールのワークフロー、ホスト型 MCP のセットアップ、プロンプト、例、セキュリティに関する注意事項、トラブルシューティング。
• API リポジトリ：REST API、OpenAPI、SDK、例、プログラムからの直接連携。
• CLI リポジトリ：ターミナルでのワークフロー、エクスポートの自動化、プロジェクトコマンド。

docs/API_RELATIONSHIP.mdを参照してください。

セキュリティの概要

• トークンを公開プロンプト、Issue、スクリーンショット、コミット、リポジトリに貼り付けないでください。
• MCP クライアントが対応している場合は、OAuth を使用してください。
• ベアラートークンは、対応クライアントでのみ使用し、他人に知られないようにしてください。
• 各クライアントには必要最小限のスコープのみを付与し、使用していないトークンは失効させてください。
• 承認する前に、ツール呼び出しを確認してください。
• AI が生成した SVG とコードは、コミットする前に確認してください。
• SVG の挿入は、コードとコンテンツの挿入として扱ってください。

SECURITY.md と docs/SECURITY.md を参照してください。

まずはこちら

• 認証
• ツール
• クライアントのセットアップ概要
• 設定例
• トラブルシューティング
• API の関係
• MCP のセキュリティ
• プロンプトガイド
• プロンプトライブラリ
• 例
• コミュニティのユースケース