图标样式
图标风格
基础图标
通用图标的设计通常会有两个版本，一个是线条版，一个是填充版。
- 线条版：在大多数情况下，使用图标的线条版，因为在视觉上会更有识别性。
- 填充版：可用于表示已执行的操作和命令，例如，当文章被 “收藏” 时，使用填充版的图标，可以使用填充颜色来进一步加强这种交互的变化。
业务图标
为了降低设计成本，提高设计效率，业务图标的设计大多数情况下用通用图标的形状进行嵌套。
业务图标结构：
- 形状：主要来源于通用图标。
- 背景：主要来源于色板中的颜色，默认有定义好的几种颜色。
图标颜色
| 示例 | 主要颜色 | 色值 | 用法 | 轻量颜色 | 色值 | 用法 |
|---|---|---|---|---|---|---|
 | #F5424B | -- | #F5D1D3 | -- | ||
 | #FF9B00 | -- | #F7E3C4 | -- | ||
 | #23C343 | -- | #CBEBD1 | -- | ||
 | #37D4CF | -- | #CFEEED | -- | ||
 | #00B4E8 | -- | #C4E8F2 | -- | ||
 | #4080FF | -- | #D1DEF7 | -- | ||
 | #8D4EDA | -- | #E0D4F0 | -- | ||
 | #C623FF | -- | #ECCBF7 | -- | ||
 | #ED33A2 | -- | #F3CEE4 | -- | ||
 | #909291 | -- | #E1E1E1 | -- |
图标交付
图标链接
产品中所有的图标都存放在这里管理。
图标格式
请使用.svg格式，这样在任何屏幕下面都不会出现模糊不清的情况。
图标尺寸
16px
在网页中，使用场景最多。
20px
在网页中，特定场景。
24px（基准）
图标设计的基准尺寸，往上往下都可以方便适配。
32px
嵌套在 48px 业务图标中的小图标尺寸。
图标类型
基础图标
单色
填充
双色
业务图标
标准业务图标
主要用于辅助信息展示，增加信息层次和对比。
图标尺寸：48px；内图标尺寸：32px。
动作业务图标
主要用于提示动作，提示当前可交互。
图标尺寸：40px；内图标尺寸：24px。
文件图标
支付图标
| 图标 | 名称 | 参数 |
|---|---|---|
 | 方形-小 | 24x24px |
 | 方形-大 | 40x40px |
 | 圆形 | 40x40px |
 | 长方形-大 | 72x48px |
 | 长方形-中 | 36x24px |
 | 长方形-小 | 24x16px |
国家图标
社交图标
图标背景
图标背景分为圆角8px和圆形。
图标场景
--