---
id: "icons"
title: "图标、命中热区与焦点"
category: "基础视觉"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-icons"
source_data: "../component-data.json"
official_components: ["icon"]
template_components: []
scenario_count: 8
verification: "scenario-checklist-not-full-test-pass"
---

# 图标、命中热区与焦点

专题 `icons` · 基础视觉 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`icon`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：先按中文动作查目录并复用已采用图形；同一动作在不同页面使用同一图标。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 动作含义 | 复制、列设置、导出、关闭、通知等 | 按动作选择固定图形；不同动作的图形不能当作同义外观互换。 |
| 图形与热区 | 图形尺寸和可点击区域 | 分别按目录规定；扩大热区不等于放大图标。 |
| 使用范围 | 中控已引用、公共示例、组件附属图形 | 目录记录来源和用途，不代表每个业务页面都要添加这些入口。 |
| 交互状态 | 禁用、聚焦与复制结果 | 按实际操作或资源状态出现；静态图形目录不自动具备对应业务能力。 |

使用边界：账户概览不添加显隐眼睛；头像形状、尺寸与失败回退按头像专题分别理解。

## 组件规则

- **ICONS-R01**：先按中文动作查目录，再复用同一图形。本目录盘点当前中控和公共组件源码中明确引用的43个 Element 图标、8类业务原有 SVG，另列21个组件附属图形；源码引用不等于每个路由同时显示，不把整个图标字库视为项目已采用。
- **ICONS-R02**：业务原有 SVG 必须复用原路径、viewBox 和描边，不重新画近似图。列设置固定三横线，复制固定双纸，系统通知固定铃铛；通用齿轮不替代列设置，图片旋转不替代列表刷新。字体图标仅使用当前 Element UI 2.15.6 字库，不新增图标字体、emoji 或随意字符。
- **ICONS-R03**：图形尺寸与点击热区分别标注，px 表示页面中的 CSS 像素。常规图形16px；复制15px、热区至少24×24px；普通独立图标操作热区32×32px；关闭容器热区36×36px。现有顶栏通知为20px图形、40×40px入口；原有拖动手柄16×20px、安全锁24px、结果图48px在目录单独说明。
- **ICONS-R04**：图形在热区中居中，不以放大字符代替扩大热区。无文字操作必须有明确中文可访问名称，悬停/键盘聚焦时提供同义说明；装饰图标隐藏重复朗读，不进入Tab顺序。禁止只写“图标”“按钮”或用图形代替对象名称。
- **ICONS-R05**：仅键盘定位独立按钮时保留2px操作蓝焦点外圈和2px间隔；普通鼠标点击不增加外圈。危险动作沿用危险语义焦点；输入控件内部的清空、日期等附属图形服从所属输入组件，不额外给整个输入框增加外圈。禁用操作必须同时阻断鼠标和键盘。
- **ICONS-R06**：图标颜色跟随用途：静态说明、顶栏和工具栏普通图形使用正文或辅助深灰；链接式图标操作使用操作蓝；成功、警告、失败图标使用对应功能色并配文案。铃铛图形与命中热区在本页维护；小红点、数字角标及已读清除统一见“标签与角标”专题（#spec-tags），不因未读而把铃铛和正文染红。
- **ICONS-R07**：导出、下载、下载记录是不同动作，即使复用同一下箭头图形也必须分别命名。目录标注的“旧入口待统一”仅是迁移方向：本次没有替换业务入口。新增操作用普通加号，圆圈加号保留目录/指标用途；确认提交用文字，成功勾号只属于结果反馈。
- **ICONS-R08**：用户图标与头像分工不同：用户图标表示用户相关入口，头像承载某位用户的身份。完整头像尺寸、图片/文字及缺图回退只在头像专题（#spec-avatar）维护，不在图标页再做一套示例。当前顶栏为操作员姓名与下拉箭头；会员列表账户概览不因存在显隐组件而添加小眼睛。
- **ICONS-R09**：图标代码、中文用途、采用状态、源文件及迁移映射统一维护在 icon-catalog.json；渲染脚本由该数据生成。页面、复制规范与下载文档同时更新，新增业务图标必须登记用途和复用边界。
- **ICONS-R10**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **ICONS-R11**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **ICONS-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **ICONS-R13**：【普通与装饰】静态说明、顶栏及列表工具普通图形使用正文深灰或辅助深灰；导航图标跟随导航状态。纯装饰没有单独悬停或键盘焦点。
- **ICONS-R14**：【可点击图标】链接式动作使用操作蓝；其他工具图标悬停时沿用宿主工具规则。危险动作保持错误红；仅键盘定位时显示可见焦点，不以图标颜色代替中文名称。
- **ICONS-R15**：【禁用】不可执行的动作图标使用禁用灰并阻断鼠标与键盘；静态只读图形不自动变灰。
- **ICONS-R16**：【反馈与未读】成功/警告/失败图形分别使用成功绿/警告橙/错误红并配文字；加载图标用主题蓝。未读数量独立使用提醒徽标，不改变通知入口的动作语义。
- **ICONS-R17**：【组件边界】目录图形用于查阅，不是假操作入口；仅复制示例实际复制虚构账号；头像失败回退由头像专题独立演示。目录区分中控已引用、公共组件示例和组件内置图形，旧入口待统一项不宣称已经迁移。
- **ICONS-R18**：多行提示的状态图标对齐第一行文字，不按整段文字垂直居中。确认框正文行高24px，图标24px；普通消息和区域提示沿用21px正文行高，图标居中于第一行。文字自然换行，图标和正文保留稳定间距。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **ICONS-S01**：按中文名称、用途和分类检索；清空筛选恢复完整目录；区分中控已引用、公共组件示例、组件内置三种范围。
- [ ] **ICONS-S02**：复制、列设置、导出、下载记录、刷新、关闭、拖动手柄与系统通知分别核对原图形，禁止用近似图替代。
- [ ] **ICONS-S03**：15px复制图形与24px热区、16px常规图形与32px热区、36px关闭热区分别验收，键盘焦点与鼠标点击分开检查。
- [ ] **ICONS-S04**：复制虚构账号 anxin123456 有结果反馈；禁用图标不触发复制。通知外观示例不发送或读取真实通知。
- [ ] **ICONS-S05**：用户图标仅作为通用用户入口图形；头像尺寸、文字与图片失败回退到头像专题验收，不重复维护一套示例。当前顶栏不新增头像，会员账户概览不增加显隐按钮。
- [ ] **ICONS-S06**：旧下载/刷新入口的迁移状态明确；仅目录登记不等于业务替换完成。
- [ ] **ICONS-S07**：导出与复制文档须包含图标中文用途、尺寸、热区、来源和代码映射，不能只输出自定义组件标签。
- [ ] **ICONS-S08**：用一行、两行和更长说明检查状态图标：与第一行文字对齐，段落增高后图标不下沉；同时复核字号、行高和图标间距。

### 专题验收重点

中文搜索和分类能定位复制、列设置、导出/下载、关闭与通知；核对业务SVG原路径、图形尺寸与热区。复制示例可用且禁用态不触发；用户图标与头像用途区分，头像专题链接有效；页面目录与复制/下载文档包含相同映射。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<icon-catalog>
</icon-catalog>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：2026-09-15当前中控与公共组件源码盘点；图形与来源详见 icon-catalog.json，完整文档附录 icon-catalog.md。。
- [打开本专题页面](../index.html#spec-icons)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`icons`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `icon-catalog` 的实现：[icon-catalog.js](../icon-catalog.js)。

## 公共图标目录

盘点当前中控入口和公共规范直接引用的模板、配置及组件附属图形。源码引用不等于每个路由同时显示；排除完整字库、历史冻结页面、图表和品牌图片。

### 使用原则

- 先按动作查映射，再复用同一图形；不因个人习惯选另一种近似图标。
- 图形尺寸与点击热区分别约束。图标不能替代按钮名称，纯装饰不进入键盘焦点。
- 当前业务 SVG 原路径保留；未完成的旧入口迁移明确列出。

### 操作映射

| 动作 | 统一映射 | 使用边界 | 状态 |
|---|---|---|---|
|复制账号、编号、文档|el-icon-document-copy|同一复制动作统一双纸图形；15px图形，至少24px独立热区。|沿用现有|
|列设置|project-layout-horizontal|统一原有三横线 SVG；通用齿轮仅用于通用设置，不替代列设置。|沿用现有|
|导出、下载文件、下载记录|project-download|业务列表与顶栏沿用原有下载 SVG；名称分别写导出、下载、下载记录。旧的 Element 下载入口按模块迁移，不能宣称已完成。|旧入口待统一|
|列表刷新、失败后重试|project-refresh|同一列表采用相同刷新图形；重试使用“重试”名称。图片旋转不使用这一操作映射。|旧入口待统一|
|关闭容器|el-icon-close / project-close|保留同一叉号语义：Element原生关闭、自定义容器原有SVG；均为36px热区，不替换成删除。|按容器复用|
|新增操作|el-icon-plus|按钮内新增用普通加号；圆圈加号仅保留新增账号目录和指标用途。|限定使用边界|
|确认、提交|文字动作；结果可用 el-icon-circle-check|确认动作使用清晰文字，不强制添加勾号；成功勾号属于结果反馈，不能提前显示。|动作与结果分开|
|系统通知|el-icon-bell|铃铛表示系统通知；站内消息目录用信封。未读数由独立徽标表达。|沿用现有|
|用户头像|Element Avatar + el-icon-user-solid 回退|图片、文字和无图占位归头像组件；当前顶栏为操作员姓名，不在此变更成头像按钮。|组件示例|

### 常用操作

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|复制|复制编号、账号、文档等|15 × 15 px|至少24 × 24 px|中控已引用|`el-icon-document-copy`|
|搜索|关键词输入和搜索入口|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-search`|
|添加|添加条目、素材或规则|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-plus`|
|编辑|修改当前条目或信息|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-edit`|
|关闭|关闭弹窗、面板或标签；不能默认等同删除|16 × 16 px|36 × 36 px（容器关闭）|中控已引用|`el-icon-close`|
|关闭|共享设置与导出弹窗关闭，与 Element close 字体图标需统一尺寸和热区。|16 × 16 px|36 × 36 px|中控已引用|`project-close`|
|新增项目|新增账号的目录图标、统计指标图标|16 × 16 px|跟随目录/指标容器|中控已引用|`el-icon-circle-plus-outline`|

### 文件与列表工具

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|列设置|列设置使用三横线；通用设置用齿轮，二者用途分开。|16 × 16 px|32 × 32 px|中控已引用|`project-layout-horizontal`|
|下载／导出|列表导出与顶部下载记录共用下箭头图形，名称必须按动作分别说明。|16 × 16 px|32 × 32 px|中控已引用|`project-download`|
|刷新|共享审核列表刷新，配刷新中和禁用状态。|16 × 16 px|32 × 32 px|中控已引用|`project-refresh`|
|拖动排序手柄|列和筛选项排序；同步提供键盘上下与跨分组移动规则。|16 × 20 px|32 × 32 px|中控已引用|`project-drag-handle`|
|上传|选择或上传文件|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-upload2`|
|下载|下载规范、导出结果或文件|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-download`|
|刷新／重试|刷新状态或重新拉取数据|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-refresh-right`|
|场景文档|打开本页场景说明|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-reading`|
|文档|文档、文件和日志入口|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-document`|
|设置|公共组件中的通用设置；不能默认取代业务已采用的列设置三横线|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-setting`|

### 展开与方向

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|下拉箭头|下拉菜单、更多操作与选项展开|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-down`|
|向上三角|返回顶部入口|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-caret-top`|
|向右箭头|下一页、进入下级或向右切换|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-right`|
|向左箭头|上一页、返回上一层或向左切换|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-arrow-left`|
|定位目标|定位关联业务对象|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-location-outline`|
|展开导航|展开左侧导航|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-s-unfold`|
|打开关联页面|跳往关联页面或外部资料|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-top-right`|
|收起导航|收起左侧导航|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-s-fold`|
|进入箭头|进入关联详情或下一步|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-right`|

### 状态反馈

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|圆形确认|校验通过、低风险等已确认结果；并非提交按钮的必配图标|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-circle-check`|
|信息说明|帮助说明或信息提示|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-info`|
|信息说明|审核状态解释，不表示业务成功或警告。|16 × 16 px|至少24 × 24 px|中控已引用|`project-info-circle-solid`|
|加载中|处理中进度，需配合防重复交互|16 × 16 px|静态反馈，无点击热区|公共组件示例|`el-icon-loading`|
|校验通过|个人中心校验通过结果；提示明确为尚未连接服务，不能表示密码已修改。|48 × 48 px|静态图形，无点击热区|中控已引用|`project-result-check`|
|警告提示|风险或需注意的信息|16 × 16 px|静态反馈，无点击热区|中控已引用|`el-icon-warning-outline`|

### 通知与身份

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|系统通知|打开系统通知；未读数量单独显示|20 × 20 px|40 × 40 px（当前顶栏）|中控已引用|`el-icon-bell`|
|用户头像占位|用户类入口或头像缺图回退|16 × 16 px|跟随导航或头像容器|中控已引用|`el-icon-user-solid`|
|消息说明|会员详情备注旁的说明图形|16 × 16 px|静态说明，无点击热区|中控已引用|`el-icon-chat-line-square`|
|用户|会员或用户目录|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-user`|

### 安全与显隐

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|安全锁|个人中心密码安全说明图形，装饰用途不添加按钮行为。|24 × 24 px|静态图形，无点击热区|中控已引用|`project-security-lock`|
|查看／显隐|显示与隐藏脱敏内容；图形与动作名称须同步|16 × 16 px|32 × 32 px（独立操作）|公共组件示例|`el-icon-view`|
|锁定／无权限|禁止访问、权限受限或安全设置|16 × 16 px|32 × 32 px（独立操作）|中控已引用|`el-icon-lock`|

### 业务目录

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|关系连接|关系或代理结构栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-connection`|
|图片素材|广告或图片内容栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-picture-outline`|
|审核文档|审核记录栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-document-checked`|
|数据分析|报表、运营分析目录|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-data-analysis`|
|标签|人群与会员标签|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-price-tag`|
|活动礼品|活动管理或活动类型|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-present`|
|消息|通知管理栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-message`|
|统计概览|运营总览入口|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-pie-chart`|
|资料卡|会员资料与详情栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-postcard`|
|运营设置|运营管理目录|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-set-up`|
|钱包|钱包与取款栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-wallet`|
|银行卡|资金管理、银行卡或存款栏目|16 × 16 px|跟随整行导航热区|中控已引用|`el-icon-bank-card`|

### 组件附属图标

| 中文名称 | 用途 | 图形尺寸 | 热区 | 采用状态 | 代码标识 |
|---|---|---|---|---|---|
|减少数值|数字输入减小一步；到下限禁用。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-minus`|
|勾选确认|选择项或结果勾选标记；普通“确认”按钮仍以文字命名，不强配图标。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-check`|
|向前跨组|日期向前年份或分页向前跨页组；名称由所在组件明确。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-d-arrow-left`|
|向后跨组|日期向后年份或分页向后跨页组；名称由所在组件明确。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-d-arrow-right`|
|向左旋转|图片查看器旋转图片；不能因为图形相近就用来刷新列表。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-refresh-left`|
|图片占位|图片组件加载失败的占位图形，不能把它当作上传成功。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-picture`|
|失败反馈|反馈组件显示失败原因，不替代就近错误文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-error`|
|展开树节点|树节点有子项时显示，可展开/折叠；叶子不冒充可展开。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-caret-right`|
|已选星级|评分组件中已选择的星形。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-star-on`|
|成功反馈|消息、警告条等组件的成功结果，配中文状态文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-success`|
|收起选项|选择组件中随展开状态旋转的箭头。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-arrow-up`|
|放大预览|图片查看器放大当前图片。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-zoom-in`|
|日期|日期选择触发框中的日期标识。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-date`|
|时间|时间选择触发框中的时间标识。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-time`|
|未选星级|评分组件中未选择的星形。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-star-off`|
|清空输入|输入、选择控件内清空当前值；不是危险删除。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-circle-close`|
|省略页码|分页省略中间页；悬停后跨组箭头按原分页实现变化。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-more`|
|移除图片|图片卡片列表的原生移除图标；正文行内删除仍用12px红色文字。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-delete`|
|缩小预览|图片查看器缩小当前图片。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-zoom-out`|
|警告反馈|反馈组件提示需要注意的信息，不表示操作失败。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-warning`|
|适应或铺满预览|图片查看器显示模式切换，名称应随当前动作变化。|16 × 16 px（目录基准）|沿用所属组件的控制热区|组件内置|`el-icon-full-screen`|

### 代码与来源

#### 复制（el-icon-document-copy）

只复制对应完整值；与账号跳转热区分离，成功/失败都有反馈。

来源：`source-html/index.html`。

```html
<i class="el-icon-document-copy" aria-hidden="true"></i>
```

#### 搜索（el-icon-search）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`、`showcase/shared-components.js`、`showcase/showcase.js`、`source-html/index.html`。

```html
<i class="el-icon-search" aria-hidden="true"></i>
```

#### 添加（el-icon-plus）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`、`source-html/index.html`。

```html
<i class="el-icon-plus" aria-hidden="true"></i>
```

#### 编辑（el-icon-edit）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`。

```html
<i class="el-icon-edit" aria-hidden="true"></i>
```

#### 关闭（el-icon-close）

关闭面板不是删除记录；原生弹层保留 Element 关闭图形。

来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`、`source-html/index.html`。

```html
<i class="el-icon-close" aria-hidden="true"></i>
```

#### 关闭（project-close）

用于自定义设置/导出容器；原生弹层使用 Element close。统一叉号方向和36px关闭热区，不改成删除图标。

来源：`showcase/shared-components.js`。

```html
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 1024 1024" fill="currentColor"> <path d="m557.3 512 226.4 226.3-45.4 45.4L512 557.3 285.7 783.7l-45.4-45.4L466.7 512 240.3 285.7l45.4-45.4L512 466.7l226.3-226.4 45.4 45.4L557.3 512z" /> </svg>
```

#### 新增项目（el-icon-circle-plus-outline）

目录用圆圈加号；新增操作按钮统一普通加号，不因动作同名混用两个形状。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-circle-plus-outline" aria-hidden="true"></i>
```

#### 列设置（project-layout-horizontal）

列设置专用三横线，调整列显隐、顺序与固定位置；不是“更多”，也不是导航折叠。

来源：`showcase/deposit-records.js`、`showcase/index.html`、`showcase/shared-components.js`。

```html
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"> <path d="M2.5 3.5h11M2.5 8h11M2.5 12.5h11" /> </svg>
```

#### 下载／导出（project-download）

导出是生成/选择数据，下载是获取已有文件；共用同一图形时必须用不同中文名称区分动作。

来源：`showcase/deposit-records.js`、`showcase/index.html`、`showcase/shared-components.js`。

```html
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2.5v7M5.2 7.3 8 10.1l2.8-2.8M3 12.8h10" /></svg>
```

#### 刷新（project-refresh）

直接复用原 SVG 路径与 viewBox，不重画近似图形。

来源：`showcase/shared-components.js`。

```html
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> <path d="M12.6 5.2A5 5 0 1 0 13 8M12.6 2.5v2.7H9.9" /> </svg>
```

#### 拖动排序手柄（project-drag-handle）

当前手柄为16×20px。可拖动时提供键盘上下移动；不可移动项不能保留误导性拖拽光标。

来源：`showcase/shared-components.js`。

```html
<svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" aria-hidden="true"> <circle cx="5" cy="4" r="1.25" /> <circle cx="11" cy="4" r="1.25" /> <circle cx="5" cy="8" r="1.25" /> <circle cx="11" cy="8" r="1.25" /> <circle cx="5" cy="12" r="1.25" /> <circle cx="11" cy="12" r="1.25" /> <circle cx="5" cy="16" r="1.25" /> <circle cx="11" cy="16" r="1.25" /> </svg>
```

#### 上传（el-icon-upload2）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`、`source-html/index.html`。

```html
<i class="el-icon-upload2" aria-hidden="true"></i>
```

#### 下载（el-icon-download）

现用于文档下载及部分旧导出入口；同一列表的导出/下载统一映射到项目 download SVG，旧入口属于待迁移项。

来源：`source-html/index.html`。

```html
<i class="el-icon-download" aria-hidden="true"></i>
```

#### 刷新／重试（el-icon-refresh-right）

现用于重试等旧入口；同一列表刷新优先复用项目 refresh SVG，不能随机换用另一种箭头。

来源：`showcase/shared-components.js`。

```html
<i class="el-icon-refresh-right" aria-hidden="true"></i>
```

#### 场景文档（el-icon-reading）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`。

```html
<i class="el-icon-reading" aria-hidden="true"></i>
```

#### 文档（el-icon-document）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/scenes.js`、`showcase/shared-components.js`。

```html
<i class="el-icon-document" aria-hidden="true"></i>
```

#### 设置（el-icon-setting）

仅通用设置；列设置用项目已有三横线 SVG，不以齿轮近似代替。

来源：`source-html/index.html`。

```html
<i class="el-icon-setting" aria-hidden="true"></i>
```

#### 下拉箭头（el-icon-arrow-down）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/content-management.js`、`showcase/index.html`、`showcase/site-messages.js`、`source-html/index.html`。

```html
<i class="el-icon-arrow-down" aria-hidden="true"></i>
```

#### 向上三角（el-icon-caret-top）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`source-html/index.html`。

```html
<i class="el-icon-caret-top" aria-hidden="true"></i>
```

#### 向右箭头（el-icon-arrow-right）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`。

```html
<i class="el-icon-arrow-right" aria-hidden="true"></i>
```

#### 向左箭头（el-icon-arrow-left）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`、`showcase/notification-components.js`、`showcase/shared-components.js`。

```html
<i class="el-icon-arrow-left" aria-hidden="true"></i>
```

#### 定位目标（el-icon-location-outline）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/notification-components.js`。

```html
<i class="el-icon-location-outline" aria-hidden="true"></i>
```

#### 展开导航（el-icon-s-unfold）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`。

```html
<i class="el-icon-s-unfold" aria-hidden="true"></i>
```

#### 打开关联页面（el-icon-top-right）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`source-html/index.html`。

```html
<i class="el-icon-top-right" aria-hidden="true"></i>
```

#### 收起导航（el-icon-s-fold）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`。

```html
<i class="el-icon-s-fold" aria-hidden="true"></i>
```

#### 进入箭头（el-icon-right）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/index.html`。

```html
<i class="el-icon-right" aria-hidden="true"></i>
```

#### 圆形确认（el-icon-circle-check）

配合明确状态文字；反馈图标不能代表操作已经执行。

来源：`showcase/notification-components.js`、`showcase/shared-components.js`。

```html
<i class="el-icon-circle-check" aria-hidden="true"></i>
```

#### 信息说明（el-icon-info）

配合明确状态文字；反馈图标不能代表操作已经执行。

来源：`showcase/overview.js`、`source-html/index.html`。

```html
<i class="el-icon-info" aria-hidden="true"></i>
```

#### 信息说明（project-info-circle-solid）

直接复用原 SVG 路径与 viewBox，不重画近似图形。

来源：`showcase/shared-components.js`。

```html
<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" data-icon="info-circle-solid" aria-hidden="true" focusable="false" > <circle cx="8" cy="8" r="7" fill="currentColor" stroke="none" /> <circle cx="9.02" cy="4.55" r=".86" fill="#fff" stroke="none" /> <path d="M8.38 7.05h1.24L8.48 11.5H7.24l.86-3.35h-.82l.28-1.1h.82Z" fill="#fff" stroke="none" /> </svg>
```

#### 加载中（el-icon-loading）

配合明确状态文字；反馈图标不能代表操作已经执行。

来源：`source-html/button-states.js`、`source-html/danger-actions.js`、`source-html/index.html`。

```html
<i class="el-icon-loading" aria-hidden="true"></i>
```

#### 校验通过（project-result-check）

个人中心现用48px结果图形。只表示当前校验通过，尚未连接服务时不能宣称密码已修改。

来源：`showcase/personal-center.js`。

```html
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="24" cy="24" r="20"/><path d="m14 24 7 7 14-15"/></svg>
```

#### 警告提示（el-icon-warning-outline）

配合明确状态文字；反馈图标不能代表操作已经执行。

来源：`showcase/notification-components.js`、`showcase/shared-components.js`。

```html
<i class="el-icon-warning-outline" aria-hidden="true"></i>
```

#### 系统通知（el-icon-bell）

当前系统通知为20px图形、40px入口；未读徽标独立表达数量，不把铃铛全部染红。

来源：`showcase/notification-components.js`、`showcase/scenes.js`。

```html
<i class="el-icon-bell" aria-hidden="true"></i>
```

#### 用户头像占位（el-icon-user-solid）

用于会员目录或头像无图回退；当前顶栏为姓名加下拉箭头，未添加头像按钮。

来源：`showcase/showcase.js`、`source-html/index.html`。

```html
<i class="el-icon-user-solid" aria-hidden="true"></i>
```

#### 消息说明（el-icon-chat-line-square）

图形辅助识别备注，不自动新增消息或通知入口。

来源：`showcase/index.html`。

```html
<i class="el-icon-chat-line-square" aria-hidden="true"></i>
```

#### 用户（el-icon-user）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-user" aria-hidden="true"></i>
```

#### 安全锁（project-security-lock）

直接复用原 SVG 路径与 viewBox，不重画近似图形。

来源：`showcase/personal-center.js`。

```html
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="10" width="14" height="11" rx="1"/><path d="M8 10V7a4 4 0 0 1 8 0v3M12 14v3"/></svg>
```

#### 查看／显隐（el-icon-view）

仅在业务明确授权的显隐组件中使用；不能直接添加到会员列表账户概览标题。

来源：`source-html/reference-patterns.js`。

```html
<i class="el-icon-view" aria-hidden="true"></i>
```

#### 锁定／无权限（el-icon-lock）

常规图形基准16px；按用途选择热区，不按字形大小缩小点击范围。

来源：`showcase/notification-components.js`、`source-html/reference-patterns.js`。

```html
<i class="el-icon-lock" aria-hidden="true"></i>
```

#### 关系连接（el-icon-connection）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-connection" aria-hidden="true"></i>
```

#### 图片素材（el-icon-picture-outline）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-picture-outline" aria-hidden="true"></i>
```

#### 审核文档（el-icon-document-checked）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-document-checked" aria-hidden="true"></i>
```

#### 数据分析（el-icon-data-analysis）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-data-analysis" aria-hidden="true"></i>
```

#### 标签（el-icon-price-tag）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-price-tag" aria-hidden="true"></i>
```

#### 活动礼品（el-icon-present）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-present" aria-hidden="true"></i>
```

#### 消息（el-icon-message）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-message" aria-hidden="true"></i>
```

#### 统计概览（el-icon-pie-chart）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-pie-chart" aria-hidden="true"></i>
```

#### 资料卡（el-icon-postcard）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`。

```html
<i class="el-icon-postcard" aria-hidden="true"></i>
```

#### 运营设置（el-icon-set-up）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/showcase.js`。

```html
<i class="el-icon-set-up" aria-hidden="true"></i>
```

#### 钱包（el-icon-wallet）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-wallet" aria-hidden="true"></i>
```

#### 银行卡（el-icon-bank-card）

用于目录辨识，跟随导航状态；不是独立操作按钮。

来源：`showcase/scenes.js`、`showcase/showcase.js`。

```html
<i class="el-icon-bank-card" aria-hidden="true"></i>
```

#### 减少数值（el-icon-minus）

属于数字输入的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-minus" aria-hidden="true"></i>
```

#### 勾选确认（el-icon-check）

属于选择与反馈的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-check" aria-hidden="true"></i>
```

#### 向前跨组（el-icon-d-arrow-left）

属于日期与分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-d-arrow-left" aria-hidden="true"></i>
```

#### 向后跨组（el-icon-d-arrow-right）

属于日期与分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-d-arrow-right" aria-hidden="true"></i>
```

#### 向左旋转（el-icon-refresh-left）

属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-refresh-left" aria-hidden="true"></i>
```

#### 图片占位（el-icon-picture）

属于图片组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-picture" aria-hidden="true"></i>
```

#### 失败反馈（el-icon-error）

属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-error" aria-hidden="true"></i>
```

#### 展开树节点（el-icon-caret-right）

属于树与级联的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-caret-right" aria-hidden="true"></i>
```

#### 已选星级（el-icon-star-on）

属于评分组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-star-on" aria-hidden="true"></i>
```

#### 成功反馈（el-icon-success）

属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-success" aria-hidden="true"></i>
```

#### 收起选项（el-icon-arrow-up）

属于选择组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-arrow-up" aria-hidden="true"></i>
```

#### 放大预览（el-icon-zoom-in）

属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-zoom-in" aria-hidden="true"></i>
```

#### 日期（el-icon-date）

属于日期选择的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-date" aria-hidden="true"></i>
```

#### 时间（el-icon-time）

属于时间选择的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-time" aria-hidden="true"></i>
```

#### 未选星级（el-icon-star-off）

属于评分组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-star-off" aria-hidden="true"></i>
```

#### 清空输入（el-icon-circle-close）

属于输入控件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-circle-close" aria-hidden="true"></i>
```

#### 省略页码（el-icon-more）

属于分页的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-more" aria-hidden="true"></i>
```

#### 移除图片（el-icon-delete）

属于上传组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-delete" aria-hidden="true"></i>
```

#### 缩小预览（el-icon-zoom-out）

属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-zoom-out" aria-hidden="true"></i>
```

#### 警告反馈（el-icon-warning）

属于反馈组件的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-warning" aria-hidden="true"></i>
```

#### 适应或铺满预览（el-icon-full-screen）

属于图片预览的内置图形，按选用的样式和当前状态出现；不是新增的业务图标入口。

来源：`source-html/vendor/element-ui-2.15.6.js`、`source-html/index.html`。

```html
<i class="el-icon-full-screen" aria-hidden="true"></i>
```



## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 普通与装饰 | 静态说明、顶栏及列表工具普通图形使用正文深灰或辅助深灰；导航图标跟随导航状态。纯装饰没有单独悬停或键盘焦点。 |
| 可点击图标 | 链接式动作使用操作蓝；其他工具图标悬停时沿用宿主工具规则。危险动作保持错误红；仅键盘定位时显示可见焦点，不以图标颜色代替中文名称。 |
| 禁用 | 不可执行的动作图标使用禁用灰并阻断鼠标与键盘；静态只读图形不自动变灰。 |
| 反馈与未读 | 成功/警告/失败图形分别使用成功绿/警告橙/错误红并配文字；加载图标用主题蓝。未读数量独立使用提醒徽标，不改变通知入口的动作语义。 |

目录图形用于查阅，不是假操作入口；仅复制示例实际复制虚构账号；头像失败回退由头像专题独立演示。目录区分中控已引用、公共组件示例和组件内置图形，旧入口待统一项不宣称已经迁移。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 顶栏通知、下载与列表操作图标](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)