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 an ID. The icon identifier is what’s used in UI components. The association of icon identifier to an actual icon font glyph is then done in 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

Animation

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

$(sync~spin)

Icon Listing

Below are the full listings of the product icons by identifier. The preview shows the default icon as shipped with VS Code, but Product Icon Themes can replace these.

You can see from the previews that some glyphs appear multiple times for different identifiers. For example, the same right arrow is used for chevron-left, folding-collapsed, and breadcrumb-separator.

That’s a choice of the default icon theme but a custom product icon theme has the freedom to style each usage differently.

In order to allow each icon in VS Code to be customized, every icon usage has a separate ID, describing the function of the icon. This is work in progress and more icons will be added in the coming milestones. In order to keep existing themes working, every new icon is defined with a default icon that is used when a theme has no icon definition for a given ID.