VS Code File Icons Not Loading

Introduction

File icons help you quickly identify file types in VS Code's explorer. When they stop loading, appear incorrectly, or show generic icons for known file types, it slows down navigation and looks unpolished. This is distinct from icon theme issues - file icons specifically relate to how VS Code maps file extensions to icons.

Symptoms

• All files show the same generic document icon
• Specific file types show wrong icons (e.g., .jsx files showing plain JS icon)
• Custom file extensions have no icon
• Icons flash briefly then revert to defaults
• Only certain folders show icons correctly

Difference Between File Icons and Icon Themes

• Icon Theme: The overall icon pack (Material Icons, VS Code Icons)
• File Icons: Individual file-type icons within a theme

This guide focuses on file icon associations. If your entire icon theme isn't working, see "VS Code Icon Theme Not Showing."

Step-by-Step Fixes

Step 1: Verify Icon Theme is Active

First, confirm an icon theme is selected:

// settings.json
"workbench.iconTheme": "material-icon-theme"

Or via Command Palette:

Preferences: File Icon Theme

If no theme is selected, file icons won't display.

Step 2: Check File Associations

VS Code uses file associations to determine icons. Check for conflicts:

// settings.json
"files.associations": {
    "*.component.ts": "typescript",
    "*.spec.ts": "typescript",
    "*.module.ts": "typescript"
}

These associations override icon detection. Incorrect associations cause wrong icons.

Fix incorrect associations:

// settings.json - Remove or correct these
"files.associations": {
    "*.jsx": "javascriptreact",  // Correct
    "*.tsx": "typescriptreact",   // Correct
    "*.vue": "vue"                 // Correct
}

Step 3: Add Custom File Icon Associations

Icon themes allow custom associations. For Material Icon Theme:

// settings.json
"material-icon-theme.files.associations": {
    "*.custom": "html",
    "*.story.tsx": "storybook",
    "*.test.ts": "test-ts"
}

For VS Code Icons:

// settings.json
"vsicons.associations.files": [
    {
        "icon": "typescript",
        "extensions": ["custom.ts"],
        "format": "svg"
    }
]

Step 4: Fix Extension-Icon Conflicts

Language extensions can override icon associations. Check installed language extensions:

1. 1.Open Extensions (Ctrl+Shift+X)
2. 2.Filter by @installed
3. 3.Look for language extensions

Some extensions define their own icons. Check extension settings:

// Example: Python extension settings
"python.analysis.typeEvaluationMode": "openFilesOnly",
"python.languageServer": "Pylance"

If a language extension provides icons, it may conflict with your theme.

Step 5: Rebuild Icon Cache

VS Code caches icon associations. Force a rebuild:

1. 1.Open Developer Tools: Ctrl+Shift+I
2. 2.Go to Application tab
3. 3.Find "Local Storage" > "vscode-webview://"
4. 4.Right-click and Clear
5. 5.Reload Window: Ctrl+Shift+P > "Developer: Reload Window"

Alternative - Clear via settings:

// settings.json - Force icon reload
"workbench.iconTheme": null

Save, then set back to your theme:

"workbench.iconTheme": "material-icon-theme"

Step 6: Check for Unsupported File Types

Some file types aren't recognized by default. Check what your theme supports:

Material Icon Theme supported files: View at: ~/.vscode/extensions/pkief.material-icon-theme*/icons/

Add support for new extensions:

// settings.json
"files.associations": {
    "*.env.local": "dotenv",
    "*.env.production": "dotenv"
}

Then map to icons:

"material-icon-theme.files.associations": {
    "*.env.local": "tune",
    "*.env.production": "tune"
}

Step 7: Fix Folder Icon Issues

Folders use pattern matching for icons. Check folder associations:

// settings.json
"material-icon-theme.folders.associations": {
    "src": "src",
    "lib": "lib",
    "components": "component"
}

If folders show wrong icons:

// Reset folder theme
"material-icon-theme.folders.theme": "specific"

Step 8: Handle Large Projects

Large projects (many files) can delay icon loading:

// settings.json - Improve performance
"files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/build/**": true
},
"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
}

Step 9: Fix Symlink Icons

Symlinks sometimes show wrong icons:

// settings.json
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000

For symlinked folders, the icon theme may not detect them. Add manual associations:

"material-icon-theme.folders.associations": {
    "linked-src": "src"
}

Step 10: Debug Icon Detection

Enable icon theme debugging:

// settings.json
"material-icon-theme.showUpdateMessage": true,
"material-icon-theme.showReloadMessage": true

Check the Output panel for icon-related messages:

1. 1.Open Output: Ctrl+Shift+U
2. 2.Select "Log (Extension Host)"
3. 3.Look for icon theme messages

Platform-Specific Issues

Windows

Long file paths can cause issues:

// settings.json
"files.maxMemoryForLargeFilesMB": 4096

1. 1.Enable long path support in Windows:
2. 2.Open Group Policy Editor (gpedit.msc)
3. 3.Navigate to Computer Configuration > Administrative Templates > System > Filesystem
4. 4.Enable "Enable Win32 long paths"

macOS

Case sensitivity can affect icon matching:

# Check if your filesystem is case-sensitive
diskutil info /

If case-sensitive, ensure file associations match case:

// settings.json
"files.associations": {
    "*.TSX": "typescriptreact",  // Will only match uppercase
    "*.tsx": "typescriptreact"   // Will only match lowercase
}

Linux

Similar to macOS, check filesystem case sensitivity:

# Check mount options
mount | grep " / "

Verify the Fix

Test your icons with various file types:

# Create test files in your project
touch test.js test.ts test.tsx test.jsx
touch package.json .gitignore README.md
mkdir src components dist node_modules

Reload VS Code and check that each shows the correct icon.

Custom Icon for New File Type

If you have a completely custom file type, create an icon for it:

1. 1.Design or find an SVG icon
2. 2.In your icon theme extension folder, add the icon
3. 3.Add association in theme's icon.json

Or use the theme's custom association feature:

// settings.json - Material Icon Theme
"material-icon-theme.files.customAssociations": [
    {
        "extensions": [".myext"],
        "icon": "typescript"
    }
]

Related Issues

• VS Code Icon Theme Not Showing
• VS Code Bracket Colorization Not Working
• VS Code Minimap Not Showing