VS Codeのエージェントモードを拡張するには、を試してください！

製品アイコンテーマ

Visual Studio Codeには、ビューやエディターで使用され、ホバー、ステータスバー、さらには拡張機能からも参照できる一連の組み込みアイコンが含まれています。例としては、フィルターアクションボタンとビューアイコン、ステータスバー、ブレークポイント、ツリーとエディターの折りたたみアイコンなどがあります。

プロダクトアイコンテーマを使用すると、拡張機能はこれらのアイコンを再定義して、VS Codeに独自の見た目を与えることができます。プロダクトアイコンテーマの対象外となるのは、ファイルアイコン（ファイルアイコンテーマの対象）と拡張機能によって提供されるアイコンです。

VS Codeでは、アイコンをアイコンフォント内のグリフとして定義する必要があり、（現在のところ）プロダクトアイコンは単色で構成されるよう制限されています。アイコンに使用される色は、表示される場所によって異なり、アクティブなカラーテーマによって定義されます。

新しいプロダクトアイコンテーマの追加

独自のプロダクトアイコンテーマを定義するには、まずVS Code拡張機能を作成し、拡張機能のpackage.jsonにproductIconThemesコントリビューションポイントを追加します。

{
  "contributes": {
    "productIconThemes": [
      {
        "id": "aliensAreBack",
        "label": "Aliens Are Back",
        "path": "./producticons/aliens-product-icon-theme.json"
      }
    ]
  }
}

idはプロダクトアイコンテーマの識別子です。設定で使用されるため、一意でかつ読みやすいものにしてください。labelはプロダクトアイコンテーマピッカーのドロップダウンに表示されます。pathは、アイコンセットを定義する拡張機能内のファイルを指します。ファイル名が*product-icon-theme.jsonの命名規則に従っている場合、VS Codeでプロダクトアイコンテーマファイルを編集する際に、補完機能とホバーサポートが利用できます。

プロダクトアイコン定義ファイル

プロダクトアイコン定義ファイルはJSONファイルであり、1つ以上のアイコンフォントと一連のアイコン定義を定義します。

フォント定義

fontsセクションでは、使用したい任意の数のグリフフォントを宣言できますが、少なくとも1つのフォント定義を記述する必要があります。

これらのフォントは後でアイコン定義内で参照できます。アイコン定義でフォントIDが指定されていない場合、最初に宣言されたフォントがデフォルトとして使用されます。

フォントファイルを拡張機能にコピーし、それに応じてパスを設定します。

WOFFフォントの使用をお勧めします。

  • フォーマットとして「woff」を設定します。
  • weightプロパティの値はこちらで定義されています。
  • styleプロパティの値はこちらで定義されています。
{
  "fonts": [
    {
      "id": "alien-font",
      "src": [
        {
          "path": "./alien.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ]
}

アイコン定義

VS CodeはアイコンIDのリストを定義しており、これを通じてビューからアイコンが参照されます。プロダクトアイコンのiconDefinitionsセクションは、これらのIDに新しいアイコンを割り当てます。

各定義では、fontIdを使用してfontsセクションで定義されたフォントのいずれかを参照します。fontIdが省略された場合、フォント定義で最初にリストされたフォントが使用されます。

{
  "iconDefinitions": {
    "dialog-close": {
      "fontCharacter": "\\43",
      "fontId": "alien-font"
    }
  }
}

すべてのアイコン識別子のリストは、アイコンリファレンスにあります。

開発とテスト

VS Codeには、package.jsonファイルとプロダクトアイコンテーマファイルに対する組み込みの編集サポートがあります。このサポートを利用するには、テーマファイル名がproduct-icon-theme.jsonで終わる必要があります。これにより、既知のアイコンIDを含むすべてのプロパティに対するコード補完、ホバー、および検証が可能になります。

プロダクトアイコンテーマを試すには、VS Codeで拡張機能フォルダーを開き、F5 を押します。これにより、拡張機能開発ホストウィンドウで拡張機能が実行されます。このウィンドウでは、拡張機能が有効になり、拡張機能は最初のプロダクトアイコンテーマに自動的に切り替わります。

また、テーマファイルは変更が監視され、テーマファイルが変更されるたびに、アイコンの更新が自動的に適用されます。プロダクトアイコン定義ファイルで作業している間、保存時に変更がリアルタイムで反映されます。

プロダクトアイコンテーマを切り替えるには、コマンドPreferences: Product Icon Themeを使用します。

VS Code UIの特定の位置でどのアイコンが使用されているかを確認するには、ヘルプ > 開発者ツールの切り替えを実行して開発者ツールを開き、次に

  • 開発者ツールの左上にある検証ツールをクリックします。
  • 検査したいアイコンにマウスを移動します。
  • アイコンのクラス名がcodicon.codicon-remoteの場合、アイコンIDはremoteです。

dev tools inspect tool

サンプル

プロダクトアイコンテーマのサンプルをプレイグラウンドとして使用できます。

07/09/2025