鸿蒙 (HarmonyOS) 开发中系统 / 自定义矢量图标的名称与对应数字资源 ID映射表，这类 ID 主要用于 ArkTS 开发中加载矢量图标（SVG/Vector），避免硬编码字符串，提升项目可维护性。以下为你做分类整理 + 可直接复用的 ArkTS 使用方案，适配 HarmonyOS API 9/10/11+，贴合鸿蒙开发的最佳实践。

一、图标 ID 分类整理（核心常用类，按开发高频场景划分）

按基础操作、导航箭头、多媒体、设备 / 硬件、生活 / 工具、健康 / 运动、汽车相关、AI / 智能、状态 / 提示八大类划分，方便快速查找，剩余小众图标可按名称自行检索：

1. 基础操作（最常用）
1. 基础操作（最常用）
图标名称 ID 用途 图标名称 ID 用途
plus 125831481 加 / 新增 minus 125831484 减 / 删除
xmark 125831487 关闭 / 取消 checkmark 125831490 勾选 / 确认
gearshape 125831493 设置 trash 125831542 删除 / 回收站
share 125831499 分享 magnifyingglass 125831500 搜索
refresh(arrow_clockwise) 125831551 刷新 save 125831586 保存
2. 导航 / 箭头
图标名称 ID 用途 图标名称 ID 用途
chevron_left 125832663 左箭头 chevron_right 125832664 右箭头
chevron_up 125832665 上箭头 chevron_down 125832666 下箭头
arrow_up 125832671 向上箭头 arrow_down 125832675 向下箭头
arrow_left 125832679 向左箭头 arrow_right 125832680 向右箭头
3. 多媒体（音频 / 视频 / 图片 / 音乐）
图标名称 ID 用途 图标名称 ID 用途
play 125831825 播放 pause 125831824 暂停
speaker 125831503 音量 mic 125831758 麦克风
camera 125832421 相机 picture 125832430 图片 / 相册
music 125831849 音乐 video 125831738 视频
4. 设备 / 硬件（手机 / 耳机 / 电脑 / 外设）
图标名称 ID 用途 图标名称 ID 用途
phone 125831788 手机 pad 125832036 平板
matebook 125832037 笔记本 earphone 125832068 耳机
bluetooth 125831971 蓝牙 wifi 125832033 WIFI
battery 125831561 电池 usb 125835345 USB
5. 生活 / 工具（时间 / 日历 / 定位 / 文件）
图标名称 ID 用途 图标名称 ID 用途
clock 125832302 时钟 calendar 125832312 日历
local 125832180 定位 / 位置 folder 125831897 文件夹
doc 125831909 文档 keyboard 125832099 键盘
6. 健康 / 运动
图标名称 ID 用途 图标名称 ID 用途
heart 125831544 心率 / 心脏 dumbbell 125832991 健身 / 哑铃
figure_run 125833063 跑步 blood_oxygen 125832959 血氧
7. 汽车相关（鸿蒙智联 / 车机开发）
图标名称 ID 用途 图标名称 ID 用途
car 125832229 汽车 steeringwheel 125835335 方向盘
fuelpump 125832235 加油 ev_charger 125835259 充电桩
8. AI / 智能 / 状态提示
图标名称 ID 用途 图标名称 ID 用途
ai_edit 125831725 AI 编辑 AI_screenshot 125832778 AI 截屏
exclamationmark 125832649 警告 / 提示 info_circle 125832646 信息 / 说明
loading 125832529 加载中 success(checkmark_circle_fill) 125831492 成功

二、ArkTS 可直接复用的使用方案（核心）

鸿蒙开发中禁止硬编码数字 ID，推荐封装为枚举 (enum) 统一管理，结合Image/Icon组件加载矢量图标，以下方案适配Stage 模型，可直接复制到项目中使用。

步骤 1：封装图标 ID 枚举（统一管理，推荐放在common/enum/IconEnum.ets）

按上述分类封装，避免项目中到处写数字，便于后期修改 / 维护：

typescript

运行

/**
 * 鸿蒙矢量图标ID枚举
 * 统一管理图标ID，避免硬编码，按开发场景分类
 */
export enum IconResId {
  // 基础操作
  PLUS = 125831481,
  MINUS = 125831484,
  XMARK = 125831487,
  CHECKMARK = 125831490,
  SETTING = 125831493,
  TRASH = 125831542,
  SHARE = 125831499,
  SEARCH = 125831500,
  REFRESH = 125831551,
  SAVE = 125831586,
  // 导航箭头
  CHEVRON_LEFT = 125832663,
  CHEVRON_RIGHT = 125832664,
  ARROW_UP = 125832671,
  ARROW_DOWN = 125832675,
  // 多媒体
  PLAY = 125831825,
  PAUSE = 125831824,
  SPEAKER = 125831503,
  CAMERA = 125832421,
  // 设备
  PHONE = 125831788,
  WIFI = 125832033,
  BLUETOOTH = 125831971,
  // 状态提示
  WARNING = 125832649,
  INFO = 125832646,
  LOADING = 125832529,
  // 按需添加其他图标...
}
步骤 2：在组件中使用（3 种常用方式，适配 API 9+）

鸿蒙中加载数字 ID 对应的矢量图标，核心是通过Image组件（推荐）或Icon组件，结合pixelMap/矢量资源加载，以下是最常用的 3 种场景，可直接复用：

方式 1：基础使用（Image 组件加载矢量图标，推荐 API 10+）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct IconDemo {
  build() {
    Column({ space: 20 }) {
      // 加载「加号」图标，设置宽高/颜色
      Image(String(IconResId.PLUS))
        .width(24)
        .height(24)
        .fill(Color.Blue) // 矢量图标颜色修改

      // 加载「关闭」图标
      Image(String(IconResId.XMARK))
        .width(20)
        .height(20)
        .fill(Color.Grey)
    }
    .padding(30)
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
方式 2：结合 Button 使用（开发高频，比如操作按钮）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct ButtonIconDemo {
  build() {
    Row({ space: 10 }) {
      // 带图标的按钮：新增
      Button({ icon: String(IconResId.PLUS) }) {
        Text('新增').fontSize(14)
      }
      .type(ButtonType.Normal)
      .backgroundColor('#007DFF')
      .textColor(Color.White)

      // 带图标的按钮：删除
      Button({ icon: String(IconResId.TRASH) }) {
        Text('删除').fontSize(14)
      }
      .type(ButtonType.Normal)
      .backgroundColor('#FF4D4F')
      .textColor(Color.White)
    }
    .padding(30)
  }
}
方式 3：Icon 组件极简使用（API 9+，适合纯图标展示）

typescript

运行

import { IconResId } from '../common/enum/IconEnum.ets';

@Entry
@Component
struct SimpleIconDemo {
  build() {
    Column({ space: 20 }) {
      Icon(String(IconResId.SEARCH), 24, Color.Black)
      Icon(String(IconResId.SETTING), 24, Color.Grey)
      Icon(String(IconResId.CHECKMARK), 24, Color.Green)
    }
    .padding(30)
  }
}

三、鸿蒙开发图标使用关键注意事项

  1. 矢量图标颜色修改：通过Image.fill()/Icon()的第三个参数修改，仅矢量图（SVG/Vector）支持，位图（PNG/JPG）不支持。
  2. 宽高适配：建议使用24/20/16px（鸿蒙设计规范），避免非整数倍导致模糊。
  3. 批量导入小众图标：如果需要使用分类外的图标，直接在IconEnum中添加即可，格式为图标名称 = 数字ID（名称大驼峰，符合 TS 规范）。
  4. 资源类型校验：确保数字 ID 对应的是矢量资源，如果是位图，需通过$r('app.media.xxx')加载本地资源。
  5. 跨设备适配：鸿蒙手机 / 平板 / 车机 / 手表的图标展示大小，可通过@MediaQuery结合屏幕尺寸动态调整。

四、扩展：批量生成枚举脚本（可选）

如果需要将全部图标 ID批量生成上述枚举，可使用Node.js 脚本快速转换（避免手动敲写），将你的原始图标 ID 文本保存为icon.txt，执行以下脚本即可生成IconEnum.ets：

javascript

运行

const fs = require('fs');
const path = require('path');

// 读取icon.txt文件（每行格式：iconName: 123456,）
const content = fs.readFileSync(path.join(__dirname, 'icon.txt'), 'utf-8');
const lines = content.split('\n').filter(line => line.trim() !== '');

// 生成枚举内容
let enumContent = '/** 鸿蒙矢量图标ID枚举 - 自动生成 */\nexport enum IconResId {\n';
lines.forEach(line => {
  const [name, id] = line.trim().replace(/,/g, '').split(':');
  if (name && id) {
    const bigCamel = name.replace(/_([a-z])/g, (_, c) => c.toUpperCase()).replace(/^[a-z]/, c => c.toUpperCase());
    enumContent += `  ${bigCamel} = ${id.trim()},\n`;
  }
});
enumContent += '}';

// 写入文件
fs.writeFileSync(path.join(__dirname, 'IconEnum.ets'), enumContent, 'utf-8');
console.log('枚举生成成功！');
# harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

穿越屏幕，重塑距离：ToDesk 2025年度报告发布，以清晰、流畅、安全连接2.3亿用户

avatar HarmonyOS开发者社区

HarmonyOS 6.0 开发环境搭建完全指南 - DevEco Studio 配置 + 真机调试实战

HarmonyOS 6.0 开发环境搭建完全指南 - DevEco Studio 配置 + 真机调试实战

avatar HarmonyOS开发者社区
cover

使用鸿蒙化Flutter图片选择、相机拍照、多图选择三方库image_picker实战教程示例

avatar HarmonyOS开发者社区