Introduction

When your VS Code icon theme stops working, the File Explorer shows generic default icons instead of the beautiful language-specific icons you're used to. This can happen after updates, when switching themes, or due to extension conflicts. Let's get your icons back.

Symptoms

  • File Explorer shows plain folder and file icons instead of themed icons
  • Activity Bar icons appear as generic shapes
  • Icons briefly appear then disappear when VS Code loads
  • Only some file types show themed icons

Quick Fixes

Try the Quick Command

Open Command Palette (Ctrl+Shift+P) and run:

bash
Preferences: File Icon Theme

Select your preferred theme from the list. If none are listed, you need to install an icon theme extension.

Install an Icon Theme

If no themes appear, install one from the marketplace:

bash
Extensions: Install Extensions

Search for "icon theme" and install one of these popular options: - Material Icon Theme - Material Design icons - VS Code Icons - Native VS Code style icons - Catppuccin Icons - Pastel theme icons - Fluent Icons - Microsoft Fluent design

After installation, run Preferences: File Icon Theme again to select it.

Step-by-Step Troubleshooting

Step 1: Check Theme Selection

Sometimes VS Code loses track of which theme is selected:

json
// settings.json - Check these values
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Default Dark+"

Valid icon theme values include: - null (no theme) - "vscode-icons" (VS Code Icons extension) - "material-icon-theme" (Material Icon Theme) - "catppuccin-icons" (Catppuccin Icons)

If set to null or an uninstalled theme, icons won't display.

Step 2: Check Extension is Enabled

Open Extensions view (Ctrl+Shift+X):

  1. 1.Search for your icon theme
  2. 2.Ensure it's not disabled
  3. 3.Check for any error messages
  4. 4.Try reloading the extension

If the extension shows errors:

bash
Developer: Reload Window

Step 3: Fix Conflicting Icon Extensions

Multiple icon extensions can conflict. Check your installed extensions and remove duplicates.

To disable extensions temporarily:

bash
Extensions: Disable All Installed Extensions

Then enable only your icon theme extension and verify it works. Enable others one by one to find conflicts.

Step 4: Clear Icon Cache

VS Code caches icons, which can become corrupted:

Windows: ``powershell rd /s /q "%APPDATA%\Code\Cache" rd /s /q "%APPDATA%\Code\CachedData"

macOS: ``bash rm -rf ~/Library/Application\ Support/Code/Cache rm -rf ~/Library/Application\ Support/Code/CachedData

Linux: ``bash rm -rf ~/.config/Code/Cache rm -rf ~/.config/Code/CachedData

After clearing cache, restart VS Code.

Step 5: Fix Product Icon Theme

VS Code has separate themes for file icons and UI icons (Activity Bar, etc.):

json
// settings.json
"workbench.productIconTheme": "fluent-icons",
"workbench.iconTheme": "material-icon-theme"

If Activity Bar icons are wrong but file icons are correct:

bash
Preferences: Product Icon Theme

Select a product icon theme or install one from the marketplace.

Step 6: Check Workspace Settings

Workspace settings override user settings. Check for a .vscode/settings.json in your project:

json
// .vscode/settings.json
// This might override your icon theme
"workbench.iconTheme": null

Delete or change this setting if present.

Step 7: Fix Theme-Specific Issues

Material Icon Theme not working:

json
// settings.json
"material-icon-theme.folders.theme": "specific",
"material-icon-theme.files.associations": {}
  1. 1.Reset to defaults:
  2. 2.Open Extension settings (gear icon on extension)
  3. 3.Click "Reset Settings"

VS Code Icons not working:

json
// settings.json
"vsicons.dontShowNewVersionMessage": true,
"vsicons.useAngularIcons": true

Run the icon activation command: `` Icons: Activate Icons

Step 8: Check for File Associations

Custom file associations can interfere with icon display:

json
// settings.json - Check for conflicting associations
"files.associations": {
    "*.myext": "javascript"  // This affects icon shown
}

Icon themes use file patterns to assign icons. Override with theme-specific settings:

json
// For Material Icon Theme
"material-icon-theme.files.associations": {
    "*.custom": "typescript"
}

Step 9: Fix Performance-Related Issues

If icons are slow to appear or disappear:

json
// settings.json
"files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/dist/**": true
}

Large projects with many files can delay icon rendering.

Step 10: Repair VS Code Installation

If nothing else works, repair VS Code:

Windows: ``powershell # Run installer and select "Repair" # Or reinstall completely

macOS: ``bash # Remove and reinstall sudo rm -rf /Applications/Visual\ Studio\ Code.app # Re-download and install

Linux: ``bash # Reinstall via package manager sudo apt remove code sudo apt install code

Verify the Fix

After each fix, reload VS Code:

bash
Developer: Reload Window

Check the File Explorer for properly themed icons. Test with different file types: - JavaScript files (should show JS icon) - Folders named node_modules, src, dist (should show folder icons) - Configuration files like package.json, .gitignore

Common Error Messages

"Icon theme not found"

The theme extension is uninstalled or corrupted. Reinstall the extension.

"Unable to apply icon theme"

The extension is disabled or has errors. Check the Output panel for extension errors.

Icons Work Sometimes but Not Others

This usually means file association conflicts or performance issues with large directories.

  • VS Code File Icons Not Loading
  • VS Code Extension Crash
  • VS Code Update Failed