Icons8 MCP Server

Icons8 MCP サーバー

Icons8 MCP Server を使うと、AI コーディング環境から、130 種類以上のデザインスタイルに対応した 420,000 点以上の Icons8 アイコンと、340 種類以上のスタイルに対応した 110,000 点以上のイラストにすぐアクセスできます。Claude、Cursor、Windsurf、VS Code、または任意の MCP ホストを接続し、一度サインインするだけで、高解像度 PNG を無料で取得できます。有料プランに登録すれば SVG も利用できるため、プロトタイピング、本番コード、迅速な UI 実験に最適です。

ユースケース

• 既存プロジェクトのアイコンセット全体を、一貫性のあるトレンドに合ったスタイルに置き換えます。
• IDE を離れることなく、箇条書き、機能の強調表示、手順、ダッシュボードにアイコンを追加します。
• 無料の PNG プレビューで素早くプロトタイプを作成し、本番環境で使えるアセットが必要になったら SVG にアップグレードします。
• アイコンを検索、プレビューし、コードに直接追加する AI 支援ワークフローを構築します。
• 絵文字が降るデモ、SF 風ダッシュボード、商品カタログなど、すぐに使えるデモでインタラクティブ性をアピールします。

---

仕組み

Icons8 MCP エンドポイントは https://mcp.icons8.com/mcp/ でホストされ、MCP Streamable HTTP トランスポートを使用します。クライアントはエンドポイントに直接接続するため、ローカルプロセスをインストールしたり、エディターと並行して実行したりする必要はありません。

前提条件

1. MCP 対応のエディターまたはエージェントホスト（Claude Code、Cursor、Windsurf、VS Code など）。
2. Icons8 アカウント。サーバーは OAuth で認証するため、初回接続時にブラウザーが開き、サインインを求められます。

ステップ 1：接続する

1 つの設定ですべてを利用できます。クライアントからエンドポイントを指定します。

{
  "mcpServers": {
    "icons8mcp": {
      "type": "http",
      "url": "https://mcp.icons8.com/mcp/"
    }
  }
}

ブラウザーが開いたらサインインすると、そこから検索と高解像度 PNG の取得を利用できます。次の 4 つのツールが表示されます。 search_icons、list_categories、list_platforms、get_icon_png_url。

ステップ 2：必要に応じて SVG を利用する

SVG は本番環境向けの形式で、有料プランで利用できます。15 ドルで登録すると、すでにサインインしているアカウントにプランが適用されます。サーバーを別途追加したり、設定を切り替えたりする必要はありません。5 つ目のツール get_icon_svg が、ほかの 4 つに加わります。

エージェントがまだ PNG を返す場合は、新しいプランを反映させるため、もう一度サインインしてください。Claude Code では /mcp、Codex では codex mcp login icons8mcp、Cursor では Connect を使用します。

OAuth に対応していないクライアント

代わりに API キーを送信します。Icons8 アカウントの MCP タブには、キーが入力済みのスニペットがあります。または、ヘッダーを手動で追加します。

{
  "mcpServers": {
    "icons8mcp": {
      "type": "http",
      "url": "https://mcp.icons8.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

API キーを使えばブラウザーを開く必要がありません。そのため、サインインする人がいないビルドサーバーや CI でも利用できます。以前に API キーで設定済みの場合は、そのまま使えます。

クライアントを設定する

Claude Code

1. ターミナルを開き、次を実行します。

   claude mcp add --transport http icons8mcp https://mcp.icons8.com/mcp/
   

2. サーバーが登録されていることを確認し、/mcp でサインインします。

   claude mcp list
   

   サインイン前はステータスに Needs authentication と表示されます。これはエンドポイントから応答があったという意味であり、設定に誤りがあるということではありません。

Codex

1. サーバーを追加してサインインします。

   codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/
   codex mcp login icons8mcp
   

Cursor

1. Cursor → Settings → Cursor Settings → MCP タブを開きます。
2. + Add new global MCP server をクリックします。
3. Step 1 の JSON を貼り付け、Connect をクリックしてサインインします。

Windsurf

1. Windsurf → Settings → Windsurf Settings → MCP セクションを開きます。
2. Manage plugins → View raw config を選択します。
3. JSON 設定を貼り付けて保存します。

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

1. Code → Settings → Settings を開き、「MCP」を検索します。
2. Edit in settings.json を選択します。
3. JSON 設定を追加します。
4. チャットツールバー（⌥⌘B）を開き、Agent モードに切り替えて、MCP Server: Icons8 MCP の下にツールが表示されることを確認します。ツールがすぐに表示されない場合は、VS Code を再起動してください。

その他の MCP ホスト Step 1 と同じ JSON を使用します。ホストが OAuth に対応している場合は、サインインの手順が表示されます。対応していない場合は、上記の Authorization ヘッダーを追加してください。MCP サーバーの設定を貼り付ける場所については、ホストのドキュメントを参照してください。

ホストによって、このトランスポートの名称は http、streamable-http、または名称変更前のクライアントでは SSE と異なります。いずれも HTTP 経由の同じリモートエンドポイントを指すため、ホストで選べるものを選択し、上記の URL を指定してください。

アイコンを使った開発を始める

必要なアイコンについて AI アシスタントに依頼してください。たとえば、「カラーのスタイルで分析用 SVG アイコンを使ったダッシュボードを作成」や、「iOS グリフスタイルで MCP サーバーの SVG アイコンを追加」と依頼できます。下記のライブデモを参考にし、期待どおりに動作しない場合はFAQをご確認ください。

---

ライブデモ

• 落下する絵文字のアニメーション
• テュフテスタイルの太陽系
• SF風コントロールインターフェース
• 製品カタログのショーケース

---

FAQ

クライアントにサーバーの認証が必要だと言われます。何か問題がありますか？
いいえ。サインインする前は通常の状態です。エンドポイントから応答があり、サインインを待っています。Claude Code では /mcp、Codex では codex mcp login icons8mcp、Cursor では 接続 を使ってサインインしてください。

SVG アイコンを指定して取得するにはどうすればよいですか？
プロンプトで SVG アイコンを明示的にリクエストし、接続に有料プランが適用されていることを確認してください。サインインしたアカウント、または Authorization ヘッダー内の API キーのいずれかが必要です。

利用できる形式は何ですか？
PNG はすべてのプランで利用できます。SVG のダウンロードには有料プランが必要です。

PNG アイコンは無料でダウンロードできますか？
はい。サインインすれば、高解像度 PNG を無料で利用できます。有料プランも API キーも必要ありません。

無料プランのライセンス条件は何ですか？
無料プランで PNG を使用するには、Icons8 へのリンクを付けてクレジットを表示する必要があります。詳細は Icons8 のライセンスをご確認ください。

API キーは必要ですか？
クライアントが OAuth に対応していない場合、またはサインインできる人がいないビルドサーバーでのみ必要です。それ以外では、サインインすればキーの代わりになります。プランが適用されるのはキーではなく、アカウントです。

SVG をリクエストしたのに PNG が返されました。どうしてですか？
get_icon_svg は接続に有料プランが適用されている場合にのみ表示されるため、エージェントは PNG にフォールバックしました。接続後にサブスクリプションに登録した場合は、新しいプランを反映するために再度サインインしてから、SVG を明示的にリクエストしてください。

Node.js や npx mcp-remote は引き続き必要ですか？
いいえ。サーバーは Streamable HTTP に対応しているため、クライアントから直接接続できます。古い npx mcp-remote の設定も引き続き機能しますが、上記の通常の URL に置き換えることができます。

アイコンをまとめてダウンロードできますか？
一括ダウンロードは現在準備中です。続報をお待ちください。

サポートが必要ですか？
上記のセットアップ手順をご確認いただくか、チャットでお問い合わせください。

---

Icons8 のその他のサービス

アイコンはほんの始まりにすぎません。Icons8 では、340 以上のスタイル（3D Casual Life、Cherry、3D Stickle）の**110,000 点以上のイラストに加え、グラフィック全体を作成できるMega Creator**も提供しています。

クレジット

• Product Hunt「Product of the Day」ローンチでの表彰。
• © 2025 Icons8 — 利用規約、プライバシー、サポートへのリンクは icons8.com でご確認いただけます。