VSCode 1.84起可通过workbench.activityBar.iconSize(22/24/28/32px)直接调整活动栏图标大小,无需改CSS;需配合window.zoomLevel控制整体缩放,并避开强定制主题干扰。

活动栏图标大小由 workbench.activityBar.iconSize 控制
VSCode 从 1.84 版本起正式支持通过设置项调整活动栏图标尺寸,不再需要改 CSS 或主题文件。这个配置项直接生效,重启不必要,改完保存即刻重绘。
常见错误是搜“activity bar size”或“icon scale”,结果找到一堆老教程去改 workbench.colorCustomizations 或手动注入 CSS —— 那些方法现在既不稳定又容易被更新覆盖。
- 打开设置(
Ctrl+,或Cmd+,),搜索activityBar.iconSize - 点击下拉菜单,可选值为:
22、24、28、32(单位是 px) - 默认是
24;22更紧凑,32更醒目但会挤占横向空间 - 该设置仅影响图标本身,不改变活动栏整体高度(高度还受
workbench.activityBar.height影响,但后者不可配置)
图标间距不能单独调,但可通过 workbench.activityBar.location 间接缓解拥挤感
VSCode 没有提供“图标左右边距”或“间距”类配置项。所谓“太挤”“看不清分隔”本质是图标变大后,相邻图标的视觉距离变小了,尤其在 4K 屏缩放为 125% 或 150% 时更明显。
真正能缓解的手段只有两个:一是降低 workbench.activityBar.iconSize 值,二是把活动栏移到底部(workbench.activityBar.location 设为 bottom)。后者会让图标水平排列,天然拉开视觉距离,且对触控/手写笔更友好。
-
workbench.activityBar.location可设为left(默认)、right、bottom - 设为
bottom后,图标自动变为横向布局,间距感知明显改善 - 注意:部分扩展(如 GitLens、Todo Tree)的活动栏入口可能在
bottom模式下位置偏移或图标错位,需实测
高 DPI 屏幕下必须同步检查窗口缩放比例
很多用户调了 workbench.activityBar.iconSize 却没变化,根本原因是系统级缩放(Windows 的“更改文本、应用等项目的大小”或 macOS 的“显示器缩放”)导致 VSCode 渲染层先做了整体放大,盖过了图标尺寸设置的效果。
比如 Windows 设置了 150% 缩放,VSCode 实际渲染时所有 UI 元素(包括图标)已按比例放大,此时再设 iconSize: 32,看起来和设 24 差别不大。
- 先确认系统缩放是否为 100%;如果不是,可在 VSCode 设置里搜
window.zoomLevel -
window.zoomLevel是相对缩放系数,0表示 100%,1表示 200%,-1表示 75% - 建议优先用
workbench.activityBar.iconSize调图标,用window.zoomLevel调整体 UI,二者混用易互相干扰
自定义主题或颜色方案可能覆盖图标尺寸效果
少数第三方主题(尤其是重度定制的暗色系主题)会在 package.json 里硬编码活动栏高度或图标 margin,导致 workbench.activityBar.iconSize 生效但视觉上“被压扁”或“上下留白异常”。
这不是 bug,而是主题作者为适配特定设计风格做的覆盖。如果你用了 One Dark Pro、Nord 或 GitHub Theme 这类热门主题,建议先切换回默认的 Default Dark+ 测试设置是否生效。
- 临时切回默认主题:命令面板(
Ctrl+Shift+P)输入Preferences: Color Theme,选Default Dark+ - 如果此时图标大小正常变化,说明是当前主题限制了尺寸表现
- 主题作者一般不会暴露图标间距配置项,只能等更新或换主题


















