Supericons MCP について
Supericons MCPは、コーディングエージェントが11のライブラリから意味に基づいてSVGアイコンを探し、利用するためのサービスです。MCPツールでセマンティック検索、セットの提案、取得、プレビューができます。
主な機能
- 01意味や説明からアイコンを検索
- 02最大20のUI枠向けにセットを提案
- 03アイコンIDとライブラリを指定してSVGを取得
- 04検索結果をプレビュー・比較
- 05利用可能な11のアイコンライブラリを一覧
活用シーン
- 01UIの概念に合うアイコンを探す
- 02指定したUI枠に統一感のあるセットを選ぶ
- 03候補アイコンを視覚的に比較
MCP 対応
アイコン検索、提案、取得、プレビュー、ライブラリ一覧のツールをMCPクライアントに提供します。ホスト型エンドポイントへの接続と、npm MCPランタイムのローカル実行に対応します。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://mcp.supericons.dev/mcpclaude mcp add --transport http supericons https://mcp.supericons.dev/mcp{"mcpServers":{"supericons":{"type":"http","url":"https://mcp.supericons.dev/mcp"}}}Cursor で開く{"servers":{"supericons":{"type":"http","url":"https://mcp.supericons.dev/mcp"}}}VS Code で開く{"mcpServers":{"supericons":{"type":"http","url":"https://mcp.supericons.dev/mcp"}}}{"mcpServers":{"supericons":{"serverUrl":"https://mcp.supericons.dev/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
13| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| library | string | いいえ | 無料ライブラリで絞り込みます:lucide、tabler、phosphor、heroicons、bootstrap、iconoir、ionicons、material、simpleicons、または mingcute |
| limit | number | いいえ | 結果の最大数(1~50、デフォルトは 10) |
| locale | enum | いいえ | 多言語検索語に使用する任意のロケールです。対応する値:zh-Hans、zh-Hant、ja、ko、es、de、pt、ar、hi、vi、th。zh-Hans | zh-Hant | ja | ko | es | de | pt | ar | hi | vi | th |
| query | string | はい | 検索語(例:"heart"、"login"、"download arrow") |
| style | enum | いいえ | 任意のスタイル指定です。塗りつぶしまたはソリッドのバリエーションがあるライブラリでのみ `solid` を使用してください。any | outline | solid |
詳細
Supericons v2.0
AI コーディングエージェント向けの、意味に基づく SVG アイコン検索、プレビュー、推奨機能です。
Supericons を使うと、エージェントはファイル名だけでなく、意味からアイコンを探せます。11 のライブラリにある 20,000 件以上の無料アイコンを検索でき、SVG コードまたは視覚的な比較結果を返します。
リリースバージョン
Supericons では、製品プラグインと MCP ランタイムに別々のバージョンを使用しています。
| コンポーネント | 現在のリリース |
|---|---|
| Supericons プラグイン | 2.0.0 |
| npm MCP ランタイム | @supericons/[email protected] |
| ホスト型 MCP ランタイム | 0.4.22 |
v2.0 プラグインでは、現在の MCP ランタイムを使用します。@supericons/[email protected] という npm パッケージはありません。
クイックスタート
リモート MCP サーバーに対応したクライアントでは、ホスト型エンドポイントを使用してください。
https://mcp.supericons.dev/mcp
ローカル MCP コマンドを使用するクライアントでは、次を使用してください。
{
"mcpServers": {
"supericons": {
"command": "npx",
"args": ["-y", "@supericons/mcp@latest"]
}
}
}
無料ツールの使用に Supericons API キーは必要ありません。
プラグインファイル
このリポジトリには、Codex、Claude Code、および互換性のあるエージェントディレクトリ用の公開プラグインマニフェストが含まれています。
.plugin/plugin.json
.codex-plugin/plugin.json
.claude-plugin/plugin.json
.agents/plugins/marketplace.json
Codex プラグインでは、次も使用します。
.codex-mcp.json
skills/supericons-icon-search/SKILL.md
手動セットアップ項目
クライアントに設定ファイルではなくフォームが表示される場合は、次を入力してください。
Name: supericons
Transport: stdio
Command: npx
Arguments:
-y
@supericons/mcp@latest
引数の入力欄が 1 つの場合は、次を入力してください。
-y @supericons/mcp@latest
ホスト型ツール
search_icons
: 意味、ラベル、視覚的な説明、タグ、同義語、および対応する多言語の用語から検索します。
recommend_icons
: 最大 20 個の名前付き UI スロットに、一貫性のあるアイコンセットを推奨します。
get_icon
: アイコン ID とライブラリがわかっている場合に、指定された SVG アイコンを取得します。
preview_icons
: 検索結果または既知のアイコン参照を、ホスト型のプレビューページまたは画像で比較します。
list_libraries
: ホスト型サーバーから利用できる 11 の無料アイコンライブラリを一覧表示します。
プロンプトの例
Use Supericons to find a Lucide database icon. Show the icon id, library, and SVG.
Use Supericons to recommend icons for an AI dashboard sidebar: model, prompt, dataset, evaluation, deployment, and monitoring. Prefer Lucide outline icons.
Use Supericons to preview the strongest camera scan icons so I can compare them visually.
Pro のセットアップ
Pro にアクセスするには、API キーを環境変数として追加してください。
SUPERICONS_API_KEY=<YOUR_SUPERICONS_API_KEY>
API キーを公開の issue、スクリーンショット、コミットする設定ファイル、または共有チャットに貼り付けないでください。
リンク
- Web サイト:https://supericons.dev
- MCP のセットアップ:https://supericons.dev/mcp/
- npm パッケージ:https://www.npmjs.com/package/@supericons/mcp
- ホスト型 MCP:https://mcp.supericons.dev/mcp
- サーバーカード:https://mcp.supericons.dev/.well-known/mcp/server-card.json
公開リポジトリの対象範囲
このリポジトリは、Supericons の公開セットアップおよびディレクトリ用ラッパーです。公開マニフェスト、インストール例、サポート情報、ブランドアセットが含まれています。非公開の製品コード、認証情報、顧客データ、内部運用データは、このリポジトリに含まれていません。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。