产品图标主题

产品图标主题替换 VS Code 界面中的图标：菜单项、工具栏按钮、视图标题、输入框内图标。它们是产品 UI 的"皮肤图标"。

产品图标是什么

与文件图标（资源管理器文件）不同，产品图标覆盖 UI 操作图标：

区域	图标示例
菜单	复制、粘贴、保存、撤销
工具栏	运行、调试、刷新
视图标题	折叠全部、过滤
编辑区	错误、警告、信息
通用	搜索、设置、关闭、更多

注册产品图标主题

json

{
  "contributes": {
    "productIconThemes": [
      {
        "id": "my-product-icons",
        "label": "My Product Icons",
        "path": "./product-icons/my-product-icons.json"
      }
    ]
  }
}

用户通过命令面板 Preferences: Product Icon Theme 切换。

产品图标主题文件结构

json

{
  "fonts": [
    {
      "id": "my-icons",
      "src": [
        {
          "path": "./my-icons.woff2",
          "format": "woff2"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ],
  "iconDefinitions": {
    "search-refresh": {
      "fontCharacter": "\\E001",
      "fontColor": "#90a4ff"
    },
    "close": {
      "fontCharacter": "\\E002"
    }
  }
}

两大部分

部分	作用
`fonts`	声明图标字体文件（WOFF/WOFF2/TTF）
`iconDefinitions`	把字体字符映射到图标标识

内置图标标识

VS Code 定义了数百个图标标识（icon identifier），主题按标识覆盖。标识按功能分组：

通用界面

标识	用途
`close`	关闭按钮
`more`	更多操作（...）
`add`	添加
`remove`	移除
`check`	勾选
`refresh`	刷新
`search`	搜索
`settings`	设置齿轮
`warning`	警告
`error`	错误
`info`	信息
`question`	帮助

标识	用途
`widget-close`	组件关闭
`widget-more`	组件更多
`widget-edit`	组件编辑
`widget-insert`	组件插入
`widget-dismiss`	组件消除
`widget-collapse`	组件折叠
`widget-expand`	组件展开

标识	用途
`menu-cut`	剪切
`menu-copy`	复制
`menu-paste`	粘贴
`menu-undo`	撤销
`menu-redo`	重做
`menu-select-all`	全选
`menu-delete`	删除
`menu-find`	查找

search 系列（搜索）

标识	用途
`search-folder`	搜索文件夹
`search-files`	搜索文件
`search-replace`	替换
`search-replace-all`	全部替换
`search-case-sensitive`	区分大小写
`search-whole-word`	全字匹配
`search-regexp`	正则匹配
`search-refresh`	刷新搜索结果
`search-clear-results`	清除结果

settings 系列（设置）

标识	用途
`settings-add`	添加设置
`settings-remove`	移除设置
`settings-edit`	编辑设置
`settings-reset`	重置设置
`settings-warning`	设置警告
`settings-view-icon`	设置视图图标

分组前缀	覆盖区域
`terminal-*`	终端操作
`editor-*`	编辑器操作
`debug-*`	调试操作
`diff-*`	差异操作
`breakpoint-*`	断点
`notebook-*`	笔记本
`panel-*`	面板
`test-*`	测试

iconDefinitions 图标定义

覆盖某个内置标识，只需定义同名 iconDefinition：

json

{
  "iconDefinitions": {
    "search-refresh": {
      "fontCharacter": "\\E001"
    },
    "close": {
      "fontCharacter": "\\E002"
    }
  }
}

图标覆盖规则

写法	效果
定义标识同名项	覆盖该图标
不定义	回退到默认图标
`fontColor`	设置字体图标颜色

字体图标与图片图标

fontIconDefinitions（字体图标）

推荐方式，把图标做进字体文件：

json

{
  "fonts": [
    {
      "id": "my-icons",
      "src": [
        { "path": "./icons.woff2", "format": "woff2" },
        { "path": "./icons.woff", "format": "woff" }
      ],
      "weight": "normal",
      "style": "normal",
      "size": "150%"
    }
  ],
  "iconDefinitions": {
    "close": {
      "fontCharacter": "\\E002",
      "fontColor": "#c9d1d9"
    }
  }
}

字段	说明
`src`	字体文件列表（多格式兼容）
`weight` / `style`	字重与样式
`fontCharacter`	字符编码（unicode 私有区 E000 起）
`fontColor`	图标颜色

imageIconDefinitions（图片图标）

用 SVG/PNG 替代字体：

json

{
  "iconDefinitions": {
    "close": {
      "iconPath": "./images/close.svg"
    }
  }
}

图片图标无法着色（fontColor 不生效），适合固定颜色的复杂图形。

图标主题继承

产品图标主题支持继承基础图标集，通过 include 字段：

json

{
  "include": {
    "close": "\\E002",
    "add": "\\E003"
  },
  "fonts": [...],
  "iconDefinitions": {
    "refresh": {
      "fontCharacter": "\\E100"
    }
  }
}

include 语义

写法	效果
`include` 中列出标识与字符	该图标沿用继承来源的字符
`include` 中省略的标识	使用基础主题默认图标
`iconDefinitions` 中定义的标识	覆盖 include

include 通常用于批量复用基础图标字体，只覆盖需要变化的图标。

获取图标标识列表

VS Code 文档提供完整标识列表，开发时常用两个方法确认标识名：

方法一：图标浏览器

text

命令面板 → Developer: Generate Icon Reference

此命令生成所有可用图标的 HTML 参考页，包含每个标识的名称。

方法二：Inspect 命令

text

命令面板 → Developer: Inspect

点击界面任意图标可查看其标识名。

完整示例

json

{
  "fonts": [
    {
      "id": "my-product",
      "src": [
        { "path": "./fonts/my-product.woff2", "format": "woff2" }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ],
  "iconDefinitions": {
    "close": { "fontCharacter": "\\E001" },
    "add": { "fontCharacter": "\\E002" },
    "remove": { "fontCharacter": "\\E003" },
    "refresh": { "fontCharacter": "\\E004", "fontColor": "#4ec9b0" },
    "search": { "fontCharacter": "\\E005" },
    "settings": { "fontCharacter": "\\E006" },
    "warning": { "fontCharacter": "\\E007", "fontColor": "#d29922" },
    "error": { "fontCharacter": "\\E008", "fontColor": "#f85149" },
    "info": { "fontCharacter": "\\E009", "fontColor": "#58a6ff" }
  }
}

产品图标主题让 UI 操作图标具备统一的视觉语言。三类主题（颜色/文件图标/产品图标）齐备后，下一篇讲解主题的打包、发布与运营。

产品图标主题

产品图标是什么

注册产品图标主题

产品图标主题文件结构

两大部分

内置图标标识

通用界面

widget 系列（控件）

menu 系列（菜单）

search 系列（搜索）

settings 系列（设置）

更多分组

iconDefinitions 图标定义

图标覆盖规则

字体图标与图片图标

fontIconDefinitions（字体图标）

imageIconDefinitions（图片图标）

图标主题继承

include 语义

获取图标标识列表

方法一：图标浏览器

方法二：Inspect 命令

完整示例

产品图标主题 ​

产品图标是什么 ​

注册产品图标主题 ​

产品图标主题文件结构 ​

两大部分 ​

内置图标标识 ​

通用界面 ​

widget 系列（控件） ​

menu 系列（菜单） ​

search 系列（搜索） ​

settings 系列（设置） ​

更多分组 ​

iconDefinitions 图标定义 ​

图标覆盖规则 ​

字体图标与图片图标 ​

fontIconDefinitions（字体图标） ​

imageIconDefinitions（图片图标） ​

图标主题继承 ​

include 语义 ​

获取图标标识列表 ​

方法一：图标浏览器 ​

方法二：Inspect 命令 ​

完整示例 ​

产品图标主题

产品图标是什么

注册产品图标主题

产品图标主题文件结构

两大部分

内置图标标识

通用界面

widget 系列（控件）

menu 系列（菜单）

search 系列（搜索）

settings 系列（设置）

更多分组

iconDefinitions 图标定义

图标覆盖规则

字体图标与图片图标

fontIconDefinitions（字体图标）

imageIconDefinitions（图片图标）

图标主题继承

include 语义

获取图标标识列表

方法一：图标浏览器

方法二：Inspect 命令

完整示例