Product Icon Reference

Visual Studio Code contains a set of built-in icons that are used in views and the editor, but can also be used in hovers, the status bar, and by extensions. These icons are product icons as opposed to file icons, which are used next to file names throughout the UI.

The product icons that ship with VS Code are contained in the Codicon icon font and form the default product icon theme. Extensions can provide new Product Icon Themes to redefine these icons and give VS Code a new appearance.

In order to allow this, all product icons are identified by an ID. The icon identifier is what's used in UI components in labels ($(pencil)), in the API as ThemeIcon and in contributions when icons are needed.

The association of icon identifier to an actual icon font glyph happens the product icon theme.

Icons in labels

Icons can be used in Markdown labels in hovers, in the StatusBarItem text and QuickPickItem label API. The syntax for adding an icon in Markdown is $(iconIdentifier):

$(alert);

You can also embed text and use multiple icons:

$(eye) $(heart) $(mark-github) GitHub

To place a literal ${...} text inside a label, escape the $ with a backslash:

\$(eye)

Animation

You can apply a spinning animation to the following icons by appending ~spin to the icon name:

• sync
• loading
• gear

$(sync~spin)

Icon contribution point

The icon contribution point allow extensions to define additional icons by ID, along with a default icon. The icon ID can then be used by the extension (or any other extensions that depend on the extension) in labels ($(iconId)) or at all places where a ThemeIcon can be used (new ThemeIcon("iconId")).

"contributes": {
  "icons": {
        "distro-ubuntu": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E001"
            }
        },
        "distro-fedora": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E002"
            }
        }
    }
}

Product icon themes can redefine the icon (if they know about the icon ID).

Icon Listing

Below is a listing of the built-in product icons by identifier.

The ID of the icon identifies the location where the icon is used. The default codicon ID describes which icon from the codicon library is used by default, and the preview shows what that icon looks like.

Product Icon Themes can replace each icon individually, as well as all icons from the codicon library.