Icon 图标
图标作为界面的基础元素，一定程度上影响整体 UI 呈现出的风格
设计原则
从简
「图形简化」提高清晰度和易懂性；「参数简化」尽量消除小数点，删除多余描点，去除不必要装饰，确保图标简洁
适度
在图标设计中， 线条及图形搭配上要呈现适度感，在处理高密度图标时要考虑线条节奏感，避免紧凑和压迫感。遵循适度原则，确保观感统一
一致
图标保持一致的视觉风格，统一的大小、粗细度、圆角
大小与布局
以 24*24px 的尺寸作为图标绘制的统一栅格尺寸，图标支持以4px为单位进行缩放，图标常见尺寸为16*16px、20*20px、24*24px、32*32px
24px
24px
24px
24px
网格基线
图标设计实际画布控制在20*20px的区域，周围留2px的出血。在一定特殊情况下入 icon 过长或者有突出的边角等，允许内容适当延伸，确保视觉重量上统一
2px
2px
20px
20px
设计指南
2
3
拐角
重量描边
行程端点
1
端点
线段末端直角处理
拐角
保持 2px 的外圆角
2
一般拐角为 2px，结合现实效果
也可采用大圆角，满足造型需求
一般情况， ≥120°的角无圆角
≥120°的造型，若为拐角为直角造型过于硬朗，此时需结合现实造型考虑，提供2px圆角
重量
系统图标描边粗细为 1.5px，包括内部图形，镂空、断口
1.5px
1.5px
1.5px
1.5px
1.5px
1.5px
1.5px
尺寸描边
常见尺寸24*24px、16*16px、12*12px 下如何使用
等比缩放使用
24
20
16
12
单独为 1px 描边
角度
图标倾斜的基本角度是 45° 和 90°。 在某些情况下，也使用 30° 和 60° 角。 这些原则将帮助图标看起来更加一致和视觉同步
45°
60°
30°
0°
30°
45°
60°
90°
基础外形
针对比较复杂的图标，可采用以下几个基础外框进行设计, 确保视觉更规整，设计参考请跳转至 Foundation Library 4.0 库查看
合约交易类图标
券类图标
合集、“+” 类图标
币种、品牌类图标
安全、认证类图标
兑换、转换类图标
设计示例
拐角圆角需要结合实际的图标效果进行使调整，如此处 check 拐角只为圆滑过渡，未特殊定义具体的圆角值
推荐
慎用
在处理一些对称图形时居中处理，不应为了对齐栅格而打破画面平衡
推荐
禁止
尽量不要使用会打破画面平衡的不一致的笔画粗细
推荐
禁止
业务图标设计参考
请依据不同场景的图标使用规范进行设计
造型优先传达业务功能
例如：“ VIP ”金刚区图标，需以皇冠、钻石、或字母 V 进行符号提取再创作，表达直观符合大众理解，不要采用“沙发”等隐晦的表意，避免导致用户理解歧义
推荐
禁止
与主视觉核心元素保持一致
例如：对“送好礼”活动进行金刚区图标设计时，需以礼盒、美元、金币为主视觉元素，应提取核心符号进行造型设计，保障图标的营销效能，同时进一步造型简化，确保整体视觉的内外和谐统一
推荐
禁止
继承业务/品牌形态基因
例如 ：针对“eth_300x”进行图标时，设计师可以通过继承或沿用「以太坊」本身品牌形象做进一步拓展，不建议设计师根据理解进行联想，避免传达低效模糊
推荐
禁止
图标示意及切图规则
App 输出 3x 的切图 ，Web 输出 2x 的切图
导航栏ICON
画布大小为 24*24px, 实际绘制区域为20*20px ，描边粗细为 1.5px
CATI / USDT
CATI / USDT
Light 模式
Dark 模式
16
16
16
16
12
24
底部导航ICON
画布大小为 24*24px, 实际绘制区域为20*20px , 描边粗细为 1.5px
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Home
Markets
Trade
Futures
Wallets
Light 模式
Dark 模式
命名规则
主要结构：
icon_style
类型案例：
icon：对应的icon名称
style：fill（填充图标filled）/ tt（多色图标Two Tone）/ rtl （支持从右向左阅读的语言图标）
使用全小写字母a-z, 禁止使用特殊字符 (空格/+号/双下划线等...）
分隔符：用下划线_ , 禁止使用-分隔单词
图标案例：
info
info_fill
arrow_left_rtl
