---
title: 图标
slug: 图标
category: 基础
figma_node_id: 1:4
figma_page_name: ＞图标
aliases: [Icon, icons, iconography, 图标库, 桌面端图标, 工作流图标, 大模型图标, BEP, 单色图标, 填充图标, line icon, filled icon]
last_extracted: 2026-05-19
status: ok
---

# 图标

> 如流设计系统 2.0 图标库总览。Figma 中以一个超大画布（3668 × 5410）承载，"如流图标库"主框架按语义分 7 大类：互动 / 箭头 / 大模型 / 用户头像 / 图影音 / 通用工具 / 便捷服务 / AI 卡片。BEP 协同大模型图标独立成卡，参见 [BEP协同大模型图标](BEP协同大模型图标.md)。

## 一、规格规范

| 项目 | 规格 |
|---|---|
| 标准画板（绘制 viewBox） | **48 × 48 px** |
| 工作流图标切图 | **56 × 56 px**，圆角 1px |
| 输出像素栅格 | 2 px 对齐（保证 24 / 48 / 96 倍数下不模糊） |
| 默认描边色 | `#000000`（单色线性图标） / 主色 60（强调态） |
| 默认填充色 | 跟随父级文本色（继承 currentColor） |
| 描边宽度 | 1 px（虚线描边样例：`strokeWeight: 1px`，`strokeDashes: [2, 2]`，节点 `Arrow 9`） |
| 文件格式 | `IMAGE-SVG`（Figma 节点类型），导出为 SVG 与 2× PNG |
| 颜色模式 | 单色 / 填充两种风格变体，命名后缀 `-填充` 表示填充版本 |

> 来自 Figma 源观察：所有图标实例的 `dimensions` 都是 48×48。工作流图标在"2023 设计语言规范"页另规定为 56×56、圆角 1px（彩色双色渐变背景 + 白色前景符号）。

## 二、命名规则

```
<分类>-<语义名>[-填充|-带框|-横向|-纵向|-小声|-中声|-大声|hover]
```

示例：

- `互动-表情`、`互动-表情-填充`
- `箭头-单箭头-右`、`箭头-双箭头-右`、`箭头-悬浮播放按钮-右下`
- `大模型-搜索`、`大模型-纠错`、`大模型-续写`
- `用户头像-成员`、`用户头像-成员-填充`、`用户头像-通讯录`
- `图影音-扬声器-小声`、`图影音-扬声器-中声`、`图影音-扬声器-大声`、`图影音-扬声器-禁用`、`图影音-扬声器-无声`、`图影音-扬声器-蓝牙`
- `通用工具-更多-带框`、`通用工具-更多-横向`、`通用工具-更多-纵向`
- `便捷服务-发送文件`、`便捷服务-新建文档`、`便捷服务-内搜`

**变体后缀语义：**
- `-填充`：实心填充版本（默认为线性描边）
- `-带框`：外加边框版本
- `-横向 / -纵向`：方向变体
- `-小声 / -中声 / -大声 / -禁用 / -无声 / -蓝牙`：扬声器音量变体
- `hover`：hover 高亮态（如 `图标/桌面端/右侧边栏/设置hover`）

**路径命名（Figma 组件 key 命名规则）：**

```
图标/<平台>/<位置>/<语义名>[hover]
```

示例：`图标/桌面端/主导航/消息未选中态`、`图标/桌面端/主导航/消息选中态`、`图标/桌面端/右侧边栏/设置`、`图标/桌面端/右侧边栏/设置hover`。

## 三、分类清单

### 1. 互动（Interaction）

12 枚：表情、表情-填充、消息会话-填充、添加表情回复、我执行的、我派发的、我关注的、关注、铃铛、@消息、收藏、转发。

### 2. 箭头（Arrow）

按方向 + 长度 + 形态组合：

- **单箭头**：上 / 下 / 左 / 右
- **双箭头**：上 / 下 / 左 / 右
- **悬浮播放按钮**：左上 / 右上 / 左下 / 右下
- **长尾箭头**：上 / 下 / 左 / 右、放大 / 缩小、左上 / 右上 / 左下 / 右下
- **带框箭头**：左 / 右 / 上 / 下箭头-带框
- **放大 / 缩小**：放大、放大-带框、缩小、缩小-带框
- **展开 / 收起**：展开、收起
- **窗口**：打开小窗、收起小窗

### 3. 大模型（LLM, 通用图标版）

与 BEP 协同大模型图标互为补充。本类含：标题、指令、未赞、未踩、已赞、已踩、解读网页、解读 PDF、带入输入框、自定义、优先级、图片划词、图片 OCR 识别、图片解读、日期、创意、回复、插件、链接、纠错、解释、设计、客服、代码解释、代码、添加、文字提取、内容替换、翻译、减号、刷新、在下方插入、重新生成、写招聘 JD、阅读、续写、问答、扩写、停止、写笔记、地址、缩写、提交、报错查询、生成内容大纲、写宣传文案、改写、搜索、icafe、提示、洞察摘要、自定义指令、警示、改变文风、重置、助理怎么看、智能截图。

完整 BEP 大模型场景图标见 [BEP协同大模型图标](BEP协同大模型图标.md)。

### 4. 用户头像（Member / Avatar）

成员、成员-填充、个人主页-填充、通讯录、通讯录-填充、添加成员、添加成员-填充、主播、主播-填充、名图片-填充、不看此人分享、权限管理、组织者、面试官、个人资料、名片、群成员、虚拟背景-填充。

### 5. 图影音（Media）

扬声器全套（小声 / 中声 / 大声 / 禁用 / 无声 / 蓝牙）、视频会议、加入会议、立即开会、捕捉屏幕、直播入口、语音通话、通话中、发起通话、暂停 / 播放（普通态、填充态、带框态）、终止-带框、直播、1 比 1、播放上一个 / 下一个、旋转、图片、视图放大 / 缩小、放大 / 缩小、无线投屏、裁切。

### 6. 通用工具（Utility）

上传、日历、Pin、文档、下载、归档、筛选、二维码、编辑、储存、创建群聊、复制、添加、设置、性别男 / 女、隐藏内容、接受、拒绝、待定、历史记录、工作卡、机器人、话题、回执消息、邮件、更多反馈、消息、扫一扫、关闭、待办、完成、时间、删除（含 `-填充` 系列：删除-填充、标签-填充、活动-填充、降序-填充、升序-填充、钱包-填充、主页-填充）、更多-带框 / 横向 / 纵向。

### 7. 便捷服务（Quick services）

发送文件、发送代码片段、发送提醒、智能指令、预约会议、新建文档、介绍作品、找文档、内搜、全屏、剪存、关闭、卡片视图、列表视图、关闭铃铛、会议详情、暂不记录、会议纪要、优化卡片、生成卡片标题、生成卡片概要、标记卡片重点、新建 ai 卡片、新功能、接受、待定、拒绝。

## 四、风格与态势变体

- **线性 vs 填充**：每个语义图标至少一套线性（默认）；高频图标提供 `-填充` 实心版用于选中态。
- **选中态 / 未选中态**：主导航类图标提供成对源文件（如 `消息未选中态` / `消息选中态`）。
- **hover 态**：右侧边栏类图标提供单独 hover 版本（如 `设置hover`）。
- **填充色继承**：源文件描边色多为 `#000000`，落地后通过 `fill` / `currentColor` 让颜色跟随容器主色（参考 [色彩 · 主色](色彩.md#主色)）。

## 五、使用规则

- **大小**：默认 24px 渲染（48px 源 ×0.5）；列表项前置 16px；卡片标题 20px；底部导航 24px。
- **对齐**：图标垂直居中于文本基线，水平与文字左缘 8px 间距。
- **选中态**：图标颜色切换至 `Brandblue60 #165DFF`；非选中态使用主文字色 `color-text-1 #1D2129` 或辅助文字色 `color-text-3 #86909C`（按权重）。
- **禁用态**：使用 `C-Coolgray60 #878D99` 或 `Unavailable` 色板。
- **填充态切换**：用户进入"已收藏 / 已点赞"语义后从线性版切到 `-填充` 版本，保持视觉权重一致。

## 六、示例

完整源文件预览图：

![如流图标库总览](../图片/基础/图标/icon-library-overview.png)
![互动类图标总览](../图片/基础/图标/icon-library-overview.png)
![箭头类图标总览](../图片/基础/图标/icon-library-overview.png)
![大模型类图标总览](../图片/基础/图标/icon-library-overview.png)
![用户头像类图标总览](../图片/基础/图标/icon-library-overview.png)
![图影音类图标总览](../图片/基础/图标/icon-library-overview.png)
![通用工具类图标总览](../图片/基础/图标/icon-library-overview.png)
![便捷服务类图标总览](../图片/基础/图标/icon-library-overview.png)

## 关联

- BEP 协同大模型图标体系见 [BEP协同大模型图标](BEP协同大模型图标.md)
- 图标颜色 token 见 [色彩](色彩.md)
- 图标在动效中的引用规则见 [基础元素 · 八、动效规范](基础元素.md#八动效规范)
- 工作流图标的双色渐变背景规则见 [2023设计语言规范 · 六、桌面端工作流图标规范](2023设计语言规范.md#六桌面端工作流图标规范)
