vscode-icons 是 vs code 显示自定义文件夹图标的核心扩展,需手动启用“文件图标主题”且配置正确才能生效,不支持直接替换资源文件,仅可通过 vsicons.customiconfolderpath 安全使用自定义图标。

vscode-icons 扩展是显示文件夹图标的核心依赖
VS Code 原生只支持极简的文件夹图标(如空心/实心文件夹),要让 src、assets、tests 这类文件夹显示专属图标,必须安装第三方图标主题扩展——目前最稳定、维护最勤、配置最灵活的就是 vscode-icons。
它不是“下载一个图标文件就能用”的简单方案,而是一个完整图标映射系统:通过识别文件夹名、文件扩展名、语言类型等上下文,动态匹配图标资源并渲染。
- 不装
vscode-icons或同类扩展(如Nomo Dark Icon Theme),VS Code 就永远只显示默认灰色文件夹 - 装了但没启用图标主题,文件夹依然无图标——这是新手最常见的“以为装了=生效”误区
- macOS 用户注意:
Code > 首选项 > 文件图标主题路径和 Windows/Linux 不同,别在“主题”里找(那里是 UI 主题,不是文件图标主题)
安装后必须手动启用文件图标主题
安装 vscode-icons 后 VS Code 不会自动切换图标主题,也不会弹出强提示。很多人关掉弹窗就以为完成了,结果重启还是老样子。
正确启用路径:
- Windows / Linux:
文件 > 首选项 > 主题 > 文件图标主题 > VSCode Icons - macOS:
Code > 首选项 > 文件图标主题 > VSCode Icons - 快捷方式:按
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(Mac),输入Preferences: File Icon Theme,回车后选择VSCode Icons
启用后,无需重启,资源管理器会立即刷新——如果没变,检查右下角状态栏是否显示 File Icon Theme: VSCode Icons;没显示说明没选对,或者被工作区设置覆盖了。
文件夹图标不显示?优先检查这三件事
即使启用了主题,仍可能看不到自定义文件夹图标,常见原因不是插件坏了,而是配置层级或命名细节出了问题。
-
vsicons.associations.folders没配或拼错:VS Code 默认只对少数通用名(如node_modules、dist)开箱即用;components、hooks、dto这类需手动关联 - 项目根目录下有
.vscode/settings.json,且里面写了"workbench.iconTheme": null或"vsicons.presets.angular": false等禁用项,会覆盖全局设置 - 文件夹名含空格或特殊字符(如
api v2),vscode-icons默认不匹配——得写成正则或用通配符,例如"api*",但要注意性能影响
验证是否生效的小技巧:新建一个叫 test-folder 的文件夹,再在设置里加一条 "test-folder": "folder-src" 到 vsicons.associations.folders,立刻看图标是否变成源码文件夹样式。
想用自定义图标?别直接替换资源文件
有人想把 icons 文件夹里的 SVG 换成自己设计的图标,这是高风险操作:升级插件时会被覆盖,而且新版可能调整图标尺寸、viewBox 或 CSS 类名,导致整个图标系统错乱。
官方支持的安全路径只有这一种:
- 准备一个本地文件夹,比如
D:\my-icons,放好你自己的 SVG 图标(命名需与内置一致,如folder-src.svg) - 在 VS Code 设置中配置
vsicons.customIconFolderPath为该路径 - 确保每个 SVG 文件都符合规范:单色、无嵌入样式、尺寸 16×16 或 24×24,否则可能渲染为空白或拉伸变形
真正难的不是换图标,而是保持图标语义一致性——比如 types 和 interfaces 都该用同一类图标,否则团队协作时反而增加认知负担。










