Icons8 MCP server

Icons8 MCP server

130スタイルの422,674個のSVGおよびPNGアイコンを、すでに使用しているAIエディタに直接

無料で使用

Product Hunt

本日のプロダクト

1つのスタイルで最大40,000個のアイコンを収録した巨大なアイコンパック

選択可能な130スタイル

対応

Claude Code,

Codex,

Cursor,

Windsurf

およびその他のAIコーディングツール

プロジェクト内のすべてのアイコンをトレンディなものに置き換える

または他の任意のスタイル

すべての箇条書きリストと機能ブロックにアイコンを追加

プロセスステップ、ナビゲーションなど

Icons8 MCPを使用したデモ

Emojiスタイル · 36アイコン

29アイコン、SVGとしてインライン化

10アイコン、1つのアウトラインスタイル

Colorスタイル · 27アイコン

Icons8 MCPの使用方法

必要なもの

• Claude Code、Codex、Cursor、Windsurf、VS Code、または類似のAIコーディングツール
• Claude CodeおよびCodexのプラグインルートにはNode.jsが必要です。バンドルされたサーバーはnpx mcp-remoteを介して実行されます。Cursor、Windsurf、VS Codeの手動設定はHTTPを直接使用するため、インストールは不要です。

ステップ1: Icons8に接続

Claude Code

Codex

Cursor

Windsurf

VS Code

その他

ターミナルで1行実行するだけで、MCPサーバーとicons8スキルの両方がインストールされます:

claude plugin marketplace add icons8/agent-skills && claude plugin install icons8@icons8

コードをコピー

初回使用時にサーバーを承認し、/mcpで確認してください。これでセットアップは完了です。

Claude Code内で完結させたいですか？ 次の2つでも同じことができます:

/plugin marketplace add icons8/agent-skills

コードをコピー

/plugin install icons8@icons8

コードをコピー

icons8スキルが追加するもの

• プロジェクトごとに1つのスタイルをicons8.jsonに保存します。コミットすると、次のセッションでは新しいスタイルを選ばずにそのスタイルが維持されます。
• 設定にはブランドロゴではなく、シンプルな歯車アイコンを使用します。
• 反復中は無料のPNGプレビューを利用でき、承認したセットにのみSVGが提供されます。

MCPはエージェントにカタログを提供し、スキルはルールを提供します。これがないと、エージェントは各ラベルの最初の検索結果を取得し、その結果、1つの画面に4つの異なるスタイルのアイコンが混在することになります。Apache-2.0ライセンスのオープンソースです: github.com/icons8/agent-skills

ステップ2: 必要なときにSVGをアンロック

上記のすべてはすでに機能します: 検索、PNGプレビュー、任意のサイズの高解像度PNG。SVGは本番用フォーマットであり、キーが必要です。

キーは5番目のツールget_icon_svgをアンロックします: カタログ内の任意のスタイルの実際のSVGで、クリーンにスケーリングされ、テキストの色に追従します。PNGはIcons8へのリンク付きで無料のままです。$15でサブスクライブし、アカウントのMCPタブから準備済みのセットアップコードを取得してください: キーが入力済みです。または、任意の設定に手動でキーを追加することもできます:

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

コードをコピー

Claude Codeでは、同じことを1つのコマンドで実行できます:

claude mcp add --transport http icons8mcp-svg https://mcp.icons8.com/mcp/ --header "Authorization: Bearer YOUR_API_KEY"

コードをコピー

キーが有効かどうかを確認するには、claude mcp listを実行してください。ツールが5つあればキーが届いており、5番目はget_icon_svgです。4つしかない場合は、ヘッダーがサーバーに届いていません。

ステップ1でプラグインをインストールしましたか？ その場合、サーバーはバンドルされたキー不要のものなので、何を要求してもSVGはロックされたままです。上記のキー付きサーバーを追加してください: 2つは並行して動作し、PNGツールが2回表示されるだけです。キー不要のものはクライアントで無効にできます。

ステップ3: プロジェクトにアイコンを取得

必要なものをリクエストしてください。希望のスタイルがあれば名前を指定し、ない場合はまずいくつか表示してもらいましょう: PNGプレビューは無料でキーも不要なので、比較にコストはかかりません。

• 「設定アイコンを6つの異なるIcons8スタイルでPNGプレビューとして表示し、各スタイルの名前を教えてください。」
• 「設定画面を構築してください。アイコンはIcons8、Material Outlined、24pxで。」
• 「このプロジェクトのすべてのアイコンをFlat Colorに置き換え、現在のサイズを維持してください。」
• 「ランディングページの6つの機能ブロックにアイコンを追加してください。1つのスタイル、48pxで。」

見た目を説明するのも有効です: 「細いアウトライン、無色、24px」、「ランディングページ用のフラットカラー」、「手描き」。スキルはエージェントが選択したスタイルをicons8.jsonに保存するため、後続のセッションでは自動的に維持されます。130すべてのスタイルはicons8.com/iconsで閲覧できます。

プロンプトに入れる価値のある3つのこと

• スタイル。 一度指定すると、スキルはプロジェクト全体でicons8.jsonにロックします。IDはスタイル固有のため、後でスタイルを変更すると、すべてのアイコンを再選択する必要があります。
• サイズ。 各スタイルは16pxのグリフから64pxのカラーシーンまで、1つのサイズ用に描かれています。選択したスタイルがどのサイズ用に描かれたかをエージェントに尋ね、そのサイズまたはその2倍を使用してください。50pxのアイコンを16pxに縮小すると、読みやすさを支えていた詳細が失われます。
• フォーマット。 PNGプレビューは無料ですぐに利用できるため、それらで反復し、セットが確定したらSVGをリクエストしてください。SVGにはキーが必要です。ステップ2を参照してください。

同じ画面を2回構築した例です: 左側はスタイルが指定されていないため、エージェントは各ラベルの最初の結果を取得しました。右側は画面全体に1つのスタイルが指定されています。

スタイル未指定

アイコンは4つの異なるスタイルから取得されます: 設定にはブランドロゴ、モノクロのサイドバーにはフルカラーのアバター、ステータスには絵文字。

Material Outlined, 24px

18アイコン、1つのストローク幅、1つの外観。すべてのアイコンがテキストの色に追従するため、ダークモードとテーマ設定は無料で利用できます。

インスピレーションを得るためにライブデモをご覧ください。うまくいかない場合はFAQを参照してください。

よくある質問

「APIキーがありません」と表示される場合は？

$15でサブスクライブし、Icons8アカウントのMCPタブでセットアップコードを確認してください。または、Icons8デベロッパーポータルからAPIキーを取得することもできます。

プロジェクト全体で1つのアイコンスタイルを維持するには？

ステップ1のicons8スキルがこれを実行します: プロジェクト全体で1つのパックを選択し、icons8.jsonにロックします。ファイルをコミットすると、次のセッションまたは別のエージェントでも同じスタイルが維持されます。スキルがない場合は、最初のプロンプトでスタイルを指定し、後でアイコンを追加するたびに繰り返してください。IDはスタイル固有です: 同じアイコンでもスタイルごとにIDが異なるため、後でスタイルを変更するとすべてのアイコンを再選択する必要があります。

どの形式が得られますか？

SVG（APIキー付き）、PNGプレビューはすべてのユーザーが利用できます。

MCPサーバーでPNGアイコンを無料でダウンロードできますか？

はい、Icons8 MCPサーバーに接続すると、APIキーなしでPNGアイコンのプレビューを利用できます。

無料版のライセンス条件は？

MCPを通じてダウンロードしたすべてのPNGアイコンは、本番環境でも、当社へのリンクを提供すれば無料で使用できます。ライセンスはこちらで確認してください。本番UIでスケーリングするアセットには、APIキー付きのSVGを使用してください。

これはオープンソースですか？

スキルとプラグインはGitHub上でApache-2.0であり、skills.shのリストはSocket、Snyk、Gen Agent Trust Hubのセキュリティ監査に合格しています。アイコン自体は別途ライセンスされています: 帰属表示付きで無料、SVGは有料プランで利用できます。

APIキーは必要ですか？

PNGはキーなしで動作しますが、SVGのダウンロードには有料のAPIキーが必要です。アカウントのMCPタブで確認できます。

SVGをリクエストしているのにPNGが返ってくる

claude mcp listを実行してツールの数を数えてください。4つならキーがサーバーに届いていないため、設定のAuthorizationヘッダーを確認するか、MCPタブから準備済みのものをコピーしてください。5つあるのにPNGのままなら、プロンプトで形式を指定し、プラグインをインストールした場合は、エージェントがバンドルされたキー不要のサーバーではなくキー付きサーバーを使用していることを確認してください。

どのアイコンサイズをリクエストすべきですか？

スタイルが描かれたサイズです: Simple Smallは16px、MaterialとWindows 11は24px、iOSは30〜50px、カラースタイルは48px以上。大きなスタイルを小さく使用すると詳細が失われます。エージェントは任意のスタイルが描かれたサイズを教えてくれます。

アイコンを一括ダウンロードできますか？

まだできませんが、まさに現在積極的に開発中の機能です。

OpenAI Codexで動作しますか？

はい。codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/を実行し、npx skills add icons8/agent-skills --skill icons8でスキルを追加してください。SVGの場合は、--bearer-token-env-varでCodexにキーを指定してください。ステップ2を参照してください。

ヘルプが必要ですか？

ドキュメントを確認するか、チャットでお問い合わせください。