How to Change File Icons in VS Code Explorer

Visual Studio Code allows developers to personalize their workspace, including the file icons displayed in the Explorer sidebar. This article explains how to change your active file icon theme using built-in settings, install popular custom icon packs from the Extension Marketplace, and configure specific file icon associations for a highly tailored development environment.

Step 1: Select a Built-in File Icon Theme

Visual Studio Code comes with a few pre-installed icon themes. To switch between them:

  1. Open the Command Palette using the keyboard shortcut Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
  2. Type Preferences: File Icon Theme and press Enter.
  3. Use the arrow keys to preview the available themes (such as Seti or Minimal).
  4. Press Enter on your preferred theme to apply it immediately.

Alternatively, you can navigate to this setting via the menu by going to File > Preferences > Theme > File Icon Theme (or Code > Settings > Theme > File Icon Theme on macOS).

Step 2: Install Custom Icon Themes from the Marketplace

If the default options are too limited, you can install highly detailed icon packs from the VS Code Marketplace:

  1. Open the Extensions view by clicking the Extensions icon on the Activity Bar (or press Ctrl+Shift+X / Cmd+Shift+X).
  2. Search for category:"themes" or type icon theme into the search bar. Popular choices include Material Icon Theme, vscode-icons, and Nyan Cat File Icons.
  3. Click Install on the theme of your choice.
  4. Once installed, a dropdown menu will automatically appear at the top of the screen. Select the newly installed theme to activate it.

Step 3: Customize File Associations

Some icon themes allow you to map specific file extensions or folder names to custom icons using your global configuration file.

To customize these associations manually:

  1. Open the Command Palette and select Preferences: Open User Settings (JSON).
  2. If you are using a theme like Material Icon Theme, you can add custom association blocks to your settings.json file. For example:
"material-icon-theme.files.associations": {
    "*.customextension": "javascript",
    "router.js": "routes"
}
  1. Save the settings.json file, and the Explorer view will update automatically to reflect the new icon mappings.