icons8

Icons8 アイコン

この MCP は Icons8 検索 API の薄いラッパーです。以下のアイコンツールを提供しますが、センスはありません。 search_icons、list_categories、list_platforms、get_icon_png_url、get_icon_animation、 および有料プランで利用できる get_icon_svg です。 デフォルトの動作には、次の 4 つの問題があります。このスキルはそれらを解決するためのものです。

1. フィルターなしで検索すると、1 つの比喩が 10 種類のスタイルで返されます。 amount=12 で search_icons("delete") を実行すると、12 種類の異なるパックから同じゴミ箱が返されます。アイデアは 1 つしか見えず、 代替案はありません。何を選んでも、5 分前に選んだアイコンとは一致しません。

2. ランキングにセンスは反映されません。 search_icons("settings") では、プレーンな歯車よりも 4 つの Apple ロゴ（apple-settings、カテゴリ Logos）が上位に表示されます。search_icons("dashboard") では、 車のダッシュボードのメーターが最初に表示されます。API は名前とタグに基づいて一致させますが、設定画面を作っていることまではわかりません。

3. SVG は遅く、有料の方法です。 get_icon_svg はアイコンごとに 1 回呼び出す必要があり（約 1 秒、逐次実行）、 ペイロードは 600 文字（Flat Color）から 46,000 文字（Color Hand Drawn、アイコン 1 つで約 11k トークン）まであります。 PNG プレビューは無料ですぐに使え、MCP の呼び出しも不要です。

4. アニメーションアイコンは、デフォルトでは落とし穴です。 約 50 個に 1 個のアイコンが動きます。 静的アイコンをアニメーション版に置き換えると、インターフェース全体がちらつきます。ルールについては、以下の アニメーションアイコンを参照してください。

手順

0. ロックを確認します。 作業中のプロジェクトの隣にある icons8.json を探します。 存在する場合は、追加のアイコンを 1 つだけ使う場合でも、例外なくそのパックだけを使います。 まだ存在しない場合は、手順 5 で作成します。

{
  "version": 2,
  "icons": {
    "pack": "m_outlined",
    "sizes": [16, 20, 24],
    "color": "currentColor",
    "items": { "settings": { "id": "82535", "commonName": "settings" } }
  },
  "illustrations": {
    "style": "notion-line-art",
    "slots": { "hero": { "id": "6a3d01f2fae3aa473512807f", "file": "assets/hero.svg" } }
  },
  "tokens": { "iconColor": "--foreground", "accent": "--primary", "radius": "--radius" }
}

ロックには、次の画面で今回の画面に合わせるために必要な情報がすべて記録されています。

• icons.pack は必ず従ってください。icons.sizes には、このプロジェクトで実際に使われているサイズが記録されているため、 次のアイコンは、誰も選んでいない新しい数値ではなく、そのいずれかのサイズでエクスポートします。
• illustrations は、ouch スキルによって同じファイルに書き込まれます。読み取るだけにし、編集しないでください。
• tokens には、プロジェクトで使われている CSS 変数の名前が記録されます。値ではありません。次のアセットも同じ変数に接続します。 値は変わることがありますが、名前は変わりません。変数を作成するのは別の人の役目です。名前を読み取るだけにし、新たに考案しないでください。

古い形式のロック。 トップレベルに pack があり、version がないファイルは最初の形式です （{"pack": …, "size": 24, "color": …, "icons": {…}}）。pack は icons.pack、 size は icons.sizes の唯一の項目、icons は icons.items として読み取ります。 新しい情報を書き込むまでは変更しないでください。書き込むときは、上記の形式で保存し、古い値をすべて引き継ぎます。 理解できなかったフィールドを、気付かれないように削除してはいけません。

1. 検索する前に、必要な概念をすべて列挙します。 画面に必要なアイコンの完全なリストを書き出します （ナビゲーション、アクション、状態、空の状態）。パックの選択は、最初のアイコンではなく、リスト全体をどれだけカバーできるかで決まります。 どのパックでも、約 40 個の概念のうち 2 個は必ず見つかりません。

2. パックを一度だけ選びます。 references/PACKS.md を参照してください。以下のコンテキスト表から選び、 プロジェクトごとに 1 つのパックを使用します。正確な apiCode を指定してください。部分的な名前は使わないでください。 wired は黙って Dusk_Wired に、material は androidL（Material Filled）に、office は office40 に解決されます。 一方、forma、glyph、sf、tiny は結果が 0 件になります。

3. 各概念につき、必ず platform を指定して 1 回だけ検索します。 search_icons(query="settings", platform="m_outlined", animated=False, amount=10) フィルターを使うことで検索が役立つようになります。返される 10 件は、1 つの比喩の 10 種類のスタイルではなく、 10 種類の異なる比喩になります。amount=10 では約 1k トークン、30 では 2.6k トークンです（最大 100）。 同じ概念を 2 回検索したり、選んだアイコンを「再確認」するためにもう一度検索したりしないでください。 animated=False を指定すると、静的な画面で上位に表示されるアニメーション付きの --vN バリエーションを除外できます。 アニメーションさせるアイコンに限り、この指定を外してください。

4. 以下のルールで候補を評価し、それから実際に見ます。 コンタクトシートを 1 つ作成して開きます。 MCP の呼び出しは不要です。

open sheet.html でユーザーにシートを見せてください。判断に迷うアイコンがあれば、PNG をダウンロードして自分で確認してください。これは実際の確認であり、Read を 1 回消費します。

誰も見ていない場合。 サブエージェント、バッチジョブ、または人間が応答を待っていない実行では、シートを開くのは見せかけにすぎません。誰も見ないからです。それでもシートを作成して自分で確認し、どのアイコンの選択に迷ったかをレポートに記載してください。誰も異議を唱えられない、説明のない選択は、迷いを明記した選択よりも問題です。

5. PNG でプロトタイプを作り、ロックを書き込む。 HTML/JSX では URL を直接使用します。 https://img.icons8.com/?id=82535&format=png&size=24。単色アイコンの色を変更するには &color=1F2937 を追加します（カラーパックでは無視されます）。MCP 呼び出しはゼロ、遅延はゼロで、無料アイコンにも有料アイコンにも使えます。その後、次のセッションや次のエージェントでも同じパックを使えるように icons8.json を書き込みます。icons.pack、icons.sizes、icons.color、icons.items を書き込み、illustrations と tokens は見つけた状態のままにします。プロジェクトの隣に別の ouch.json がある場合は、その内容をここの illustrations に取り込み、古いファイルはディスク上に残し、レポートで置き換えられたことを伝えてください。許可なく他人のファイルを削除するかどうかは、あなたが決めることではありません。

6. SVG の取得は最後に、承認されたアイコンだけに行う。 プロトタイプの内容が合意されたら、そのアイコンについて get_icon_svg を呼び出し、インライン化します。承認を得る段階を挟まずに、最初の一度で作り上げる場合は、「承認済み」とは「画面で使ったアイコン一式」を意味します。PNG でレイアウトを完成させて確認し、その後、最終的に残ったアイコンだけ SVG を取得してください。このルールは、選定中に SVG を 40 個も取得するのを防ぐためのものであり、プロジェクトがベクターを求めているのに PNG を納品させるためのものではありません。単色アイコンには fill="currentColor" を設定し、CSS で色を制御できるようにしてください。カラー、3D、手描きのパックではこの手順をすべて省略してください。SVG は非常に大きく、2x の PNG のほうが適切なアセットです。

避けるもの

ユーザーの不満は「設定アイコンは、余計なパーツが付いた歯車ではなく、普通の歯車にしてほしい」です。具体的には次のとおりです。

避けるもの	理由	実例
唯一のカテゴリが Logos であるもの、または名前が -logo で終わるもの	UI アイコンではなく、ブランドアイコンです	settings → apple-settings（上位 4 件）
UI 操作に Industry、Transport、Household が付いたもの	機械部品そのものを表しており、ツールバーでは不自然です	settings → gear、gears、automatic、settings-3；dashboard → 車の計器
代わりにシンプルなアイコンがある場合の複合アイコン	余分なオブジェクトが、求めていない意味を加えます	シンプルな設定項目に laptop-settings、sync-settings、api-settings
シンプルな commonName が存在し、見た目も適切な場合の --v2 / --v3（アニメーションさせるアイコンは対象外です。そうした ID には接尾辞が付いています）	接尾辞付きのバリエーションは別案であり、装飾が加えられていることがよくあります	m_outlined の star--v2 と star--v3 は、星の中に星があります。filled-star がすっきりしています
表示名がコンセプトと一致しないアイコン	検索で一致したのは部分文字列であり、意図したものではありません	webhook → webtoon-logo；dark mode → do-not-disturb、film-noir
16-24px でのカラーまたは 3D パック	細部がつぶれて見づらくなります	プロダクト UI での plasticine、isometric、badges
96px 以上での 1px ストロークのモノクロパック	線が細く、仕上がりが不完全に見えます	ランディングページのヒーローでの p1em、tiny-glyph
画面内にある 2 つ目のパック	ユーザーが気づくのはこれだけです	どちらもモノクロですが、m_outlined と ios7 は目に見えて統一感がありません

次の順に優先してください。完全一致するシンプルな commonName、次に category: Popular または User Interface、その次にコンセプトの意味を保てる最短の名前です。

category はカンマ区切りのリストです。集合として扱ってください。項目に不適切なラベルが 1 つ含まれていても、そのアイコンが不適切とは限りません。シンプルなベルには Business,Logos,User Interface、標準的な警告三角形 error には Industry,User Interface が付いています。部分文字列だけで判定するカテゴリルールでは、この両方が除外されてしまいます。

コンテキスト別の基準

コンテキスト	サイズ	パック	重視する点
プロダクト UI、ツールバー、ナビゲーション	16-24	モノクロのみ：m_outlined、ios7、fluent-systems-regular、forma-light、16 の p1em	ファミリーを統一すること。非アクティブ／アクティブ状態にはアウトライン版と塗りつぶし版のペアを選ぶこと（ios7 + ios_filled、m_outlined + androidL）。光学的な太さを揃え、currentColor で色を変更すること
マーケティング、ランディングページ、機能グリッド	48-128	カラー：color、plumpy、pulsar-color、liquid-glass、dusk、cotton	文字どおりの正確さより、ブランドカラーとの調和を重視すること。200px 以上では、拡大したアイコンよりイラストが適しています（Ouch! は社内制作で、この MCP には含まれていません）
スライド、プレゼン資料、ドキュメント	40-80	color、office40、m_two_tone、ultraviolet	プロジェクターから離れても読めること。すべてのスライドで同じパックを使うこと
親しみやすく、くだけた、人間味のある雰囲気	50-100	claude-hand-drawn、carbon_copy、plasticine、doodle	PNG のみ。これらの SVG をインラインで使用しないこと
開発者向けドキュメント、密度の高い表、IDE 風の UI	16	p1em、tiny-glyph、glyph-neue	16px で読みやすいことだけを基準にすること
OS ネイティブのモックアップ	ネイティブ	iOS は ios7／ios_filled／ios11、Windows は fluent-systems-filled、Android は m_*	モックアップが表現するプラットフォームに合わせること

時間を無駄にしやすい注意点

• 不正な ID で get_icon_svg を実行すると、エラーなしで {"svg": ""} が返されます。ファイルを書き込む前に、文字列が空でないことを必ず確認してください。
• img.icons8.com に format=svg を指定すると、403 PAID_FORMAT が返されます。SVG はアカウントのキーを使用する MCP 経由でのみ取得できます。回避策はありません。
• list_platforms は 98 個のパックを返しますが、稼働中のパック（検索では使える fluent と fluent-systems-regular）が一覧に含まれていないことがあります。コードが見つからないからといって、パックがなくなったとは限りません。
• category フィルターには表示名（Logos を指定すると 0 件）ではなく、apiCode（user-interface）を指定します。category="free-icons" は利用可能な無料アイコンのみのフィルターです。
• プラットフォームコードでは大文字と小文字が区別されます。FLUENT を指定すると 0 件になります。
• commonName がパック間で共有されるのは、そのパックに該当するアイコンがある場合のみです（filled-trash は 12 個のパックにありますが、ios7 ではゴミ箱アイコンを full-trash と呼びます）。セットを別のパックに移す場合は、ID を置き換えるのではなく、検索をやり直してください。
• isFree: true は無料セットを示します（帰属表示が必要です）。それ以外はライセンスが必要です。PNG プレビューには影響せず、どちらも使用できます。アセットをプロダクトに含める場合は、有料アイコンを引き渡す前にライセンスを確認してください。

アニメーションアイコン

デフォルトは静止状態です。アニメーションアイコンは、ユーザーの操作に応じて一度だけ再生します。たとえば、状態が変わるクリック（保存、送信）、単独要素へのマウスホバー、または処理中に限って、その処理が続く間だけ再生します。トグル（「いいね」、ブックマークなど）は、オンのときに半サイクル、オフのときに半サイクル再生します。キーボードフォーカスではアニメーションを開始しません。ホバーやクリックでループ再生することはなく、ナビゲーション、リストの行、空の状態、エラー状態も動かしません。ホバーとクリックに使えるのは Lottie のみです。gif と apng は仕様上、無限にループします。動きは操作の意味を伝える必要があります（m_outlined にある唯一のアニメーションリンクは分解します。「リンク解除」には合いますが、「リンクをコピー」には合いません）。迷ったら静止状態にしてください。アニメーションを追加する前に references/ANIMATION.md を読んでください。

検索に失敗したときの対処

結果が 0 件だったり、無関係な結果が出たりする場合、アイコンがないのではなく、検索語が適切ではありません。検索では名前とタグが一致するため、Icons8 が描きそうなオブジェクトを指定してください。

代わりに使う語	検索語	検索結果
ellipsis、changelog、onboarding	more、document、guide	more は 3 つの点です
webhook、integration	api、code、plugin	api、source-code、plugin
dark mode	moon	full-moon、moon
trending up	growth	positive-dynamic、bullish
notification	bell	appointment-reminders（シンプルなベル）
warning	error	error は ! の付いた三角形、high-priority はひし形です

countAll が 1〜2 で、唯一のヒットがロゴの場合は、見つからなかったものとして扱い、別の表現で検索してください。全体の対応表は references/VOCABULARY.md を参照してください。

参照ファイル

• references/PACKS.md：用途ごとのパック、概要と記入済みの組み合わせ、網羅率。
• references/VOCABULARY.md：コンセプトから commonName への対応表。目視で検証済みで、注意点も記載されています。
• references/ANIMATION.md：アイコンを動かせる条件、アクションに合った動き、3 つの形式、1 回だけ再生する Lottie のスニペット、切り替え設定、ロックフィールド。
• references/KITS.md：SaaS UI、ランディングページ、E コマース、開発者向けドキュメント、分析、空の状態向けのすぐ使えるコンセプト一覧。一覧を一から作らず、キットから始めてください。

提出する内容

アイコンごとに、commonName、id、パック、プレビュー URL を記載してください。id を作成したり組み立てたりしないでください。id は search_icons からのみ取得できます。MCP ツールを利用できない場合は、その旨を伝えて終了してください。