To switch between product icon themes, use the command Preferences: Product Icon Theme. As you work on the product icon definition file, you will see the changes live on save. The window has your extension enabled and the extension will automatically switch to the first product icon theme.Īlso, the theme file is watched for changes and updates to the icons will be applied automatically whenever the theme file is modified. This will run the extension in an extension development host window. To try out a product icon theme, open the extension folder in VS Code and press F5. This enables code completion on all properties including the known icon IDs as well as hovers and validation. To get that, your theme file name needs to end with product-icon-theme.json.

VS Code has built-in editing support for the package.json file as well as for product icon theme files. Ī list of all icon identifiers can be found in the icon reference.

To define your own product icon theme, start by creating a VS Code extension and add the productIconThemes contribution point to the extension's package.json. The color used for an icon is specific to the place where it is shown and is defined by the active color theme. VS Code requires the icons to be defined as glyph in an icon font and (currently) limits product icons to consist of a single color. Not covered by product icon themes are the file icons (covered by file icon themes) and icons contributed by extensions. Examples are the icons in filter action buttons and view icons, in the status bar, breakpoints, and the folding icons in trees and the editor.Ī product icon theme allows an extension to redefine these icons to give VS Code a custom appearance. Visual Studio Code contains a set of built-in icons that are used in views and the editor, but can also be referenced in hovers, the status bar, and even by extensions.

Visual studio code icon theme