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.

Sep 8, 2016 · With the 1.5 release of VS Code, we now support icons to the File Explorer. From the File > Preferences (Code > Preferences or Code > Settings on macOS) menu or the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) search for File Icon Theme:

Everything you need to know about using the Visual Studio Code and VS Code icons and names. Visual Studio Code “stable” icon. The blue icon represents Microsoft Visual Studio Code and should be used everywhere as appropriate. Alternate icon. Use the white variant only when there isn’t enough contrast otherwise (for example, on blue backgrounds).

Product Icon Themes enable you to change the icons in the VS Code user interface, other than the icons for specific file types. For example, you can modify the icons for the views in the Activity Bar, or the icons in the title bar for changing the layout.

Visual Studio Code comes with a simple user interface and convenient default layout. At the same time, VS Code provides options and settings to let you customize the UI layout to suit your preferences and work style.

By default, View Containers in the Sidebar with more than one View will feature a single ... icon button in the Sidebar Toolbar to show and hide each View. That looks something like this:

Activity Bar The Activity Bar is a core navigation surface in VS Code. Extensions can contribute View Containers to the Activity Bar that appear as Activity Bar Items. Users can drag the item to other locations like the Panel to customize their layout. ️ Do Use an icon that matches the default Activity Bar item icon style

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. A product icon theme allows an extension to redefine these icons to give VS Code a custom appearance.

To create a new profile, open the Profiles editor and select the New Profile button. This opens the New Profile form, where you can enter a profile name, choose an icon, and configure the contents that are included in the new profile.

Oct 24, 2017 · We wanted to produce an icon that both the broad community and we would find instantly, visually, and emotionally appealing. Here are some of the early designs: