Icons8 MCP

🚀 Icons8 MCP server

Icons8 MCP Serverを使用すると、AIコーディング環境から116のデザインスタイルにまたがる368,865以上のIcons8アイコンに即座にアクセスできます。Claude、Cursor、Windsurf、VS Code、またはSSE対応の任意のMCPホストを接続することで、高解像度のPNGを無料でストリーミングしたり、APIキーを使用して完全なSVG配信を解除したりできます。これは、プロトタイピング、本番コード、および迅速なUI実験に最適です。

✨ 主な機能

• 既存のプロジェクト内のアイコンセット全体を、一貫したトレンドのスタイルに置き換えます。
• IDEを離れることなく、箇条書きリスト、機能のハイライト、プロセスのステップ、およびダッシュボードにアイコンを追加します。
• 無料のPNGプレビューで迅速にプロトタイピングし、その後、本番環境で使用できるアセットとしてSVGにアップグレードします。
• アイコンを検索、プレビューし、直接コードに挿入するAI支援ワークフローを構築します。
• 落下する絵文字、サイエンスフィクションのダッシュボード、および製品カタログなどの完成済みのデモを使用して、インタラクティビティを展示します。

🚀 クイックスタート

動作原理

Icons8 MCPエンドポイントは https://mcp.icons8.com/mcp/ にホストされており、Server-Sent Eventsをサポートする任意のMCPクライアントで動作します。

前提条件

1. ローカルに Node.js をインストールします。
2. MCP互換のエディタまたはエージェントホスト（Claude Code、Cursor、Windsurf、VS Codeなど）が必要です。

プランの選択

無料の高解像度PNGアイコン

この設定を使用すると、認証なしで高解像度のPNGプレビューをストリーミングできます。

{
  "mcpServers": {
    "icons8mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.icons8.com/mcp/"
      ]
    }
  }
}

完全なSVGアクセス（APIキーが必要）

SVGプランを15ドルで購読 し、APIキーをベアラートークンとして渡します。

{
  "mcpServers": {
    "icons8mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.icons8.com/mcp/",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer YOUR_API_KEY"
      }
    }
  }
}

💡 使用アドバイス

必要に応じて設定を切り替えてください。無料のプレビューにはPNG設定を、本番環境で使用する場合はSVG設定を使用します。

クライアントの設定

Claude Code

1. ターミナルを開き、以下のコマンドを実行します。

   claude mcp add icons8mcp -- \
     npx mcp-remote \
     "https://mcp.icons8.com/mcp/" \
     --header "Authorization: Bearer YOUR_API_KEY"
   

2. サーバーが登録されていることを確認します。

   claude mcp list
   

Cursor

1. Cursor → Settings → Cursor Settings → MCPタブを選択します。
2. + Add new global MCP server をクリックします。
3. 選択したプランのJSONを貼り付けます（無料のPNGプランの場合はヘッダーを省略します）。

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）を開き、エージェントモードに切り替え、MCP Server: Icons8 MCP の下にあるツールを探します。ツールがすぐに表示されない場合は、VS Codeを再起動します。

その他のSSE対応ツール npx mcp-remote を使用して同じJSONテンプレートを使用し、SVGアクセスの場合はオプションの Authorization ヘッダーを指定します。MCPサーバーの設定を貼り付ける場所については、ホストのドキュメントを参照してください。

アイコンを使った開発の開始

AIアシスタントに必要なアイコンを要求します。例えば、「カラースタイルの分析用SVGアイコンを使用したダッシュボードを作成」または「iOSグリフスタイルのMCPサーバーアイコンSVGを追加」などです。インスピレーションを得るために以下の ライブデモ を探索し、期待通りに動作しない場合は FAQ を確認してください。

📚 ドキュメント

ライブデモ

• Falling Emojis Animation
• Solar System in Tufte Style
• Sci-Fi Control Interface
• Product Catalog Showcase

FAQ

「No API key」と表示された場合はどうすればいいですか？
15ドルでサブスクライブ して、APIキーを取得してください。

具体的にSVGアイコンを取得するにはどうすればいいですか？
プロンプトにSVGアイコンの明示的な要求を含め、設定でベアラートークンを渡すことを確認してください。

どの形式が利用可能ですか？
PNGプレビューはすべてのユーザーが利用できます。SVGのダウンロードには有効なAPIキーが必要です。

PNGアイコンを無料でダウンロードできますか？
はい。MCPサーバーに接続すると、認証なしでPNGアイコンのプレビューを利用できます。

無料プランのライセンス条項はどうなっていますか？
無料のPNGの使用には、Icons8へのリンクを含む帰属表示が必要です。詳細については Icons8ライセンス を確認してください。

APIキーが必要ですか？
SVGの配信にのみ必要です。PNGプレビューはキー不要です。

SVGを要求したがPNGが届いた。何が起こったのですか？
明示的なSVG要求を含めて再度要求し、APIキーが設定されていることを確認してください。

アイコンを一括でダウンロードできますか？
一括ダウンロード機能は開発中です。今後のアップデートをお楽しみに。

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

📄 ライセンス

• Product Hunt “Product of the Day” のランチ認定。
• © 2025 Icons8 — 利用規約、プライバシーポリシー、およびサポートへのリンクは icons8.com で確認できます。