Icon 图标

语义化的矢量图形，支持多种尺寸和颜色定制。简约蓝组件库提供了 223 个精心设计的图标，涵盖基础操作、数据可视化、设备管理等多个场景。

图标总览

233

总图标数

8

分类数

SVG + PNG

格式

搜索和筛选

全部分类基础图标数据图表环境监测导航图标设备图标箭头图标包装图标列表图标彩色图标

图标列表

基础图标

24 个 · SVG

刷新.svg

刷新循环.svg

设置 三.svg

问号_.svg

感叹号.svg

三点 横.svg

三点 竖.svg

无数据.svg

斜杠.svg

lien-search01.svg

lien-search+.svg

lien-search-.svg

lien-勾.svg

lien-link yes.svg

lien-link no.svg

lien-temperature.svg

lien_repeat.svg

cached_24px.svg

shaoma.svg

img.svg

img +.svg

img x.svg

小程序 点.svg

小程序 圆.svg

数据图表

6 个 · SVG

data-annular.svg

data-cake.svg

data-column.svg

data-hill.svg

data-lien.svg

data-lien0.svg

环境监测

11 个 · SVG

fill-风速24.svg

fill-风向24.svg

fill-辐射24.svg

fill-湿度24.svg

fill-压力24.svg

fill-wendu24.svg

fill-fushe24.svg

fill-rizhaoH24.svg

fill-timing24.svg

fill-table24.svg

fill-relevance0324.svg

导航图标

16 个 · SVG

报表.svg

产品.svg

地图.svg

监测.svg

控制.svg

设置.svg

数据.svg

用户.svg

预警.svg

照明.svg

指标.svg

环境.svg

充电桩.svg

空调.svg

环形数据.svg

00.svg

设备图标

111 个 · SVG

表-电.svg

表-水.svg

表-天然气.svg

表-蒸汽.svg

表-温度.svg

表-碳.svg

充电桩-01.svg

充电桩-02.svg

储能-01.svg

储能-02.svg

变压器.svg

风电-01.svg

风电-02.svg

服务器.svg

监控-01.svg

监控-02.svg

房子.svg

企业01.svg

政府建筑01.svg

文件-01.svg

文档-01.svg

日历.svg

个人.svg

二人.svg

三人.svg

汽车.svg

货车.svg

树01.svg

电池.svg

灯泡.svg

能源_电.svg

能源_水.svg

能源_天然气.svg

能源_蒸汽.svg

能源_二氧化碳.svg

能源_光伏.svg

能源_综合能耗.svg

CO2.svg

NOx.svg

SOx.svg

24小时.svg

打印.svg

单据.svg

功率.svg

客服.svg

煤.svg

数据-01.svg

数据-02.svg

数据-03.svg

数据-柱状.svg

数据-电脑.svg

数据模块.svg

水温度.svg

消防柱.svg

压缩空气.svg

预警-01.svg

运行.svg

证件-人.svg

风扇-01.svg

飞机.svg

工人.svg

收藏-01.svg

收藏-02.svg

盾牌-.svg

盾牌-勾.svg

盾牌-电.svg

盾牌-￥.svg

文件-勾.svg

文件-人.svg

文件-时间.svg

文件-搜索.svg

文件1.svg

文件2-.svg

文件2-勾.svg

文件2-搜索.svg

文件2-时间.svg

文件2-标星.svg

文件2-盖章.svg

文件包.svg

文档1-编辑.svg

文档1-￥.svg

文档1-￥编辑.svg

表-01.svg

表-汽.svg

表具-01.svg

表具-02.svg

电-01.svg

电-02.svg

电-03.svg

电表-01.svg

电池+.svg

电池-.svg

房子-勾.svg

能源_蒸汽2.svg

企业02.svg

政府建筑02.svg

cnC.svg

cnF.svg

cnJ.svg

cnK.svg

device减排.svg

device预警.svg

gffdN.svg

gffdR.svg

gffdY.svg

gffdY-1.svg

gffdZ.svg

kaoheweidufenxi.svg

shouyiN.svg

shouyiR.svg

shouyiZ.svg

箭头图标

8 个 · SVG + PNG

方向=上.svg

方向=下.svg

方向=左.svg

方向=右.svg

方向=上.png

方向=下.png

方向=左.png

方向=右.png

包装图标

10 个 · SVG

尺寸=10.svg

尺寸=12.svg

尺寸=14.svg

尺寸=16.svg

尺寸=18.svg

尺寸=20.svg

尺寸=22.svg

尺寸=24.svg

尺寸=32.svg

尺寸=48.svg

列表图标

16 个 · PNG

样式=1, 颜色=主色.png

样式=1, 颜色=橙色.png

样式=1, 颜色=红色.png

样式=1, 颜色=黄色.png

样式=2, 颜色=主色.png

样式=2, 颜色=橙色.png

样式=2, 颜色=红色.png

样式=2, 颜色=黄色.png

样式=3, 颜色=主色.png

样式=3, 颜色=橙色.png

样式=3, 颜色=红色.png

样式=3, 颜色=黄色.png

样式=4, 颜色=主色.png

样式=4, 颜色=橙色.png

样式=4, 颜色=红色.png

样式=4, 颜色=黄色.png

彩色图标

31 个 · PNG

icon-01-主色.png

icon-01-主白.png

icon-01-橙色.png

icon-01-红色.png

icon-01-黄色.png

icon-01-绿色.png

icon-01-青绿.png

icon-01-青色.png

icon-01-水红.png

icon-01-水蓝.png

icon-01-紫色.png

icon-02-主色.png

icon-02-主白.png

icon-02-橙色.png

icon-02-红色.png

icon-02-黄色.png

icon-02-绿色.png

icon-02-青绿.png

icon-02-水红.png

icon-02-水蓝.png

icon-02-紫色.png

icon-03-主色.png

icon-03-主白.png

icon-03-橙色.png

icon-03-红色.png

icon-03-黄色.png

icon-03-绿色.png

icon-03-青绿.png

icon-03-水红.png

icon-03-水蓝.png

icon-03-紫色.png

使用说明

点击复制

点击任意图标卡片即可复制图标文件名，方便在项目中使用。

图标路径

所有图标都存放在 /icons/ 目录下，按分类组织：

/icons/
├── basic/          # 基础图标（24个）
├── data/           # 数据图表（6个）
├── environment/    # 环境监测（11个）
├── navigation/     # 导航图标（16个）
├── device/         # 设备图标（111个）
├── arrow/          # 箭头图标（8个）
├── wrapper/        # 包装图标（10个）
├── list/           # 列表图标（16个）
└── color/          # 彩色图标（31个）

在项目中使用

<template>
  <!-- 方式1：直接使用图片路径 -->
  <img src="/icons/basic/刷新.svg" alt="刷新" />
  
  <!-- 方式2：在 CSS 中使用 -->
  <div class="icon-refresh"></div>
  
  <!-- 方式3：使用图标组件（开发中） -->
  <sb-icon name="refresh" />
</template>

<style>
.icon-refresh {
  background-image: url('/icons/basic/刷新.svg');
  width: 24px;
  height: 24px;
}
</style>

添加新图标

后期添加的所有 SVG、PNG 图标都应该放入对应的分类目录中：

1. 确定图标分类：根据图标用途选择合适的分类目录
2. 复制图标文件：将图标文件复制到对应目录
3. 命名规范：使用有意义的中文或英文名称
4. 更新文档：在本页面的图标数据中添加新图标信息

图标格式

• SVG 格式：矢量图形，可无损缩放，支持颜色定制，推荐用于单色图标
• PNG 格式：位图格式，彩色图标，固定尺寸，适合复杂的彩色图标

注意事项

1. 图标文件名支持中文、英文、数字和特殊符号
2. 点击图标卡片可快速复制文件名
3. 使用搜索功能可快速定位需要的图标
4. 建议优先使用 SVG 格式的图标以获得更好的显示效果
5. 新增图标请放入对应的分类目录，保持目录结构清晰

图标分类说明

基础图标（24个）

常用的基础操作图标：刷新、搜索、设置、问号、感叹号、三点菜单、链接、勾选、图片等

数据图表（6个）

数据可视化图标：饼图、柱状图、折线图、环形图、面积图

环境监测（11个）

环境指标图标：风速、风向、温度、湿度、压力、辐射、日照等

导航图标（16个）

系统导航图标：报表、产品、地图、监测、控制、设置、数据、用户、预警等

设备图标（111个）

最丰富的分类，包括能源表计、能源设备、建筑人员、文档数据、其他设备等

箭头图标（8个）

方向指示：上、下、左、右（SVG + PNG 双格式）

包装图标（10个）

不同尺寸：10px、12px、14px、16px、18px、20px、22px、24px、32px、48px

列表图标（16个）

4种样式 × 4种颜色：主色、橙色、红色、黄色

彩色图标（31个）

3种图标 × 多种颜色：主色、主白、橙色、红色、黄色、绿色、青绿、青色、水红、水蓝、紫色