使い方ガイドへスキップ
Better Icons作者 better-auth

Better Icons スキル。

既存のアイコンを探し、確認したライブラリIDでSVGを取得します。

  • アイコン検索
  • SVG
ソースレビュー · better-iconsSKILL.md
タスク 既存のアイコンを探し、確認したライブラリIDでSVGを取得します。 成果物 依頼した概念に合う候補を、具体的なアイコンIDとともに示した一覧。 始める前に ライブラリの素材を取得するワークフローであり、独自のロゴをデザインする手順ではありません。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

既存のアイコンを探し、確認したライブラリIDでSVGを取得

Better IconsのCLIまたはMCPツールでIconifyのコレクションを検索し、アイコンのスタイルを比較してSVG素材を取得します。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Better Iconsは、Iconifyのコレクションを横断してアイコンを検索・取得する具体的な方法をエージェントに提供します。検索はコレクションのプレフィックスで絞り込め、各結果にはlucide:homeのような明確な識別子があります。サイズと色を指定したSVGの取得に対応しており、曖昧なアイコンの依頼を、出所を確認できる素材選びにつなげます。

同じ機能をコマンドライン操作とMCPツールから利用できます。MCPでは、コレクションの閲覧、類似アイコンの検索、候補の推薦、プロジェクトのスキャン、同期も行えます。同じファミリーのアイコンで統一したいUIを構築したり、既存のUIを整理したりする際に役立ちます。

想定される成果物

  • 依頼した概念に合う候補を、具体的なアイコンIDとともに示した一覧。
  • 指定したサイズと色で取得したSVG素材。
  • 対応するワークフローから選んで作成した、アイコンの対応表またはプロジェクトへの組み込み。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    アイコンのファミリーを決める

    既存のアイコンを確認し、表す必要のある概念を特定します。すでにデザインの見た目が統一されている場合は、コレクションのプレフィックスを選びます。

  2. 02
    検索して比較する

    意味に基づいて検索し、返されたIDを確認します。MCPツールでは、コレクションの閲覧、用途に合うアイコンの推薦、ライブラリをまたいだ似た図柄の検索もできます。

  3. 03
    選んだ素材を取得する

    prefix:nameの識別子でSVGを取得します。サイズと色を明示し、選んだアイコンだけを、指定したプロジェクト内の場所に保存または同期します。

02 利用場面

使いどころ

ライブラリの素材を取得するワークフローであり、独自のロゴをデザインする手順ではありません。

向いているケース

  • UIのアイコンを選ぶ選んだ既存のコレクションに合う、ナビゲーション、操作、状態表示のアイコンを探します。
  • アイコンに統一感を持たせるプロジェクト内のアイコンの使用状況を確認し、対応表を記録しながら、合わないアイコンを置き換えます。

確認すべき制限

  • 既存の図柄を利用しますライブラリの素材を取得するワークフローであり、独自のロゴをデザインする手順ではありません。
  • ツールが利用できる必要がありますCLIまたはMCP連携が利用可能である必要があり、素材の取得にはIconify APIを使います。

用意する入力

  • 表したい概念アイコンで表す操作、移動先、状態を示します。
  • 希望するコレクションプレフィックスを指定するか、アウトライン、塗りつぶし、指定なしのいずれのスタイルを希望するかを伝えます。
  • 出力要件保存先、サイズ、色、対応する組み込み先のフレームワークを指定します。

03 重要な判断

重要な判断

  1. 選んだ素材を追跡できる

    選択した各素材に、明確なprefix:name形式のIDがあります。

  2. 条件をそろえて取得する

    素材を取得する際に、色とサイズを指定できます。

  3. エージェントから利用する

    MCPツールは、検索、一括取得、プロジェクト内のアイコンのスキャンを扱います。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

アイコンで表す操作、移動先、状態を示します。

アップストリームのソースファイル
https://github.com/better-auth/better-icons/blob/033316ecb8f4982235af4111a2257e80231f5ab1/skills/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
better-iconsを使い、プロジェクトのナビゲーションにある「概要」「アクティビティ」「メンバー」「請求」「設定」のアイコンを選んでください。検索する前に、リポジトリですでに使っているアイコンのファミリーを確認してください。そのコレクション内の、見た目が合うアウトラインアイコンを優先し、それぞれの正確なprefix:name形式のIDを返してください。選んだSVGは24ピクセル、currentColorで取得し、指定範囲の素材ディレクトリに配置してください。ナビゲーションのラベルとアイコンIDの対応表を残してください。今回は他のアイコンを置き換えたり、アプリ全体に新しいアイコンシステムを導入したりしないでください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 選んだすべてのアイコンIDから、期待したSVGを取得できる。
  • アイコン一式のスタイル、サイズ、色の扱いが統一されている。
  • 合意した素材と組み込み用ファイルだけが変更されている。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
better-auth
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · 033316ecb8f4

読む際の注意

  1. ライセンスの適用範囲固定したリビジョンのリポジトリのLICENSE本文を確認済みです。アーカイブ内の全ファイル名を確認したところ、このスキルのパス配下に、より限定的に適用されるLICENSE、COPYING、NOTICEファイルは見つかりませんでした。この分類は確認した提供元のソースを対象とし、生成物や第三者の依存関係は対象外です。取得するアイコンのコレクションには、それぞれ独自のライセンスが適用される場合があります。このリポジトリのMIT表記が、Iconifyから返されるすべてのアイコンのライセンスを示すわけではありません。
編集部によるソース要約
既存のアイコンを探し、確認したライブラリIDでSVGを取得します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

アイコンはどのように識別しますか?

コレクションの識別子とアイコン名を組み合わせたprefix:name形式を使います。

複数のアイコンを取得できますか?

はい。CLIでは検索結果をSVGとしてダウンロードでき、文書化されたMCPのget_icons操作は、1回のリクエストで最大20個のアイコンIDを受け付けます。広い検索で不要な素材まで追加しないよう、一括取得する前にIDを選んで確認してください。

MCPは必須ですか?

いいえ。ソースには、npmまたはBunで実行するコマンドラインからの検索・取得方法も記載されています。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/better-auth/better-icons/blob/033316ecb8f4982235af4111a2257e80231f5ab1/skills/SKILL.md