Skip to content

Icon 图标

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

图标总览

233
总图标数
8
分类数
SVG + PNG
格式

搜索和筛选

图标列表

基础图标

24 个 · SVG
刷新.svg
刷新.svg
刷新循环.svg
刷新循环.svg
设置 三.svg
设置 三.svg
问号_.svg
问号_.svg
感叹号.svg
感叹号.svg
三点 横.svg
三点 横.svg
三点 竖.svg
三点 竖.svg
无数据.svg
无数据.svg
斜杠.svg
斜杠.svg
lien-search01.svg
lien-search01.svg
lien-search+.svg
lien-search+.svg
lien-search-.svg
lien-search-.svg
lien-勾.svg
lien-勾.svg
lien-link yes.svg
lien-link yes.svg
lien-link no.svg
lien-link no.svg
lien-temperature.svg
lien-temperature.svg
lien_repeat.svg
lien_repeat.svg
cached_24px.svg
cached_24px.svg
shaoma.svg
shaoma.svg
img.svg
img.svg
img +.svg
img +.svg
img x.svg
img x.svg
小程序 点.svg
小程序 点.svg
小程序 圆.svg
小程序 圆.svg

数据图表

6 个 · SVG
data-annular.svg
data-annular.svg
data-cake.svg
data-cake.svg
data-column.svg
data-column.svg
data-hill.svg
data-hill.svg
data-lien.svg
data-lien.svg
data-lien0.svg
data-lien0.svg

环境监测

11 个 · SVG
fill-风速24.svg
fill-风速24.svg
fill-风向24.svg
fill-风向24.svg
fill-辐射24.svg
fill-辐射24.svg
fill-湿度24.svg
fill-湿度24.svg
fill-压力24.svg
fill-压力24.svg
fill-wendu24.svg
fill-wendu24.svg
fill-fushe24.svg
fill-fushe24.svg
fill-rizhaoH24.svg
fill-rizhaoH24.svg
fill-timing24.svg
fill-timing24.svg
fill-table24.svg
fill-table24.svg
fill-relevance0324.svg
fill-relevance0324.svg

导航图标

16 个 · SVG
报表.svg
报表.svg
产品.svg
产品.svg
地图.svg
地图.svg
监测.svg
监测.svg
控制.svg
控制.svg
设置.svg
设置.svg
数据.svg
数据.svg
用户.svg
用户.svg
预警.svg
预警.svg
照明.svg
照明.svg
指标.svg
指标.svg
环境.svg
环境.svg
充电桩.svg
充电桩.svg
空调.svg
空调.svg
环形数据.svg
环形数据.svg
00.svg
00.svg

设备图标

111 个 · SVG
表-电.svg
表-电.svg
表-水.svg
表-水.svg
表-天然气.svg
表-天然气.svg
表-蒸汽.svg
表-蒸汽.svg
表-温度.svg
表-温度.svg
表-碳.svg
表-碳.svg
充电桩-01.svg
充电桩-01.svg
充电桩-02.svg
充电桩-02.svg
储能-01.svg
储能-01.svg
储能-02.svg
储能-02.svg
变压器.svg
变压器.svg
风电-01.svg
风电-01.svg
风电-02.svg
风电-02.svg
服务器.svg
服务器.svg
监控-01.svg
监控-01.svg
监控-02.svg
监控-02.svg
房子.svg
房子.svg
企业01.svg
企业01.svg
政府建筑01.svg
政府建筑01.svg
文件-01.svg
文件-01.svg
文档-01.svg
文档-01.svg
日历.svg
日历.svg
个人.svg
个人.svg
二人.svg
二人.svg
三人.svg
三人.svg
汽车.svg
汽车.svg
货车.svg
货车.svg
树01.svg
树01.svg
电池.svg
电池.svg
灯泡.svg
灯泡.svg
能源_电.svg
能源_电.svg
能源_水.svg
能源_水.svg
能源_天然气.svg
能源_天然气.svg
能源_蒸汽.svg
能源_蒸汽.svg
能源_二氧化碳.svg
能源_二氧化碳.svg
能源_光伏.svg
能源_光伏.svg
能源_综合能耗.svg
能源_综合能耗.svg
CO2.svg
CO2.svg
NOx.svg
NOx.svg
SOx.svg
SOx.svg
24小时.svg
24小时.svg
打印.svg
打印.svg
单据.svg
单据.svg
功率.svg
功率.svg
客服.svg
客服.svg
煤.svg
煤.svg
数据-01.svg
数据-01.svg
数据-02.svg
数据-02.svg
数据-03.svg
数据-03.svg
数据-柱状.svg
数据-柱状.svg
数据-电脑.svg
数据-电脑.svg
数据模块.svg
数据模块.svg
水温度.svg
水温度.svg
消防柱.svg
消防柱.svg
压缩空气.svg
压缩空气.svg
预警-01.svg
预警-01.svg
运行.svg
运行.svg
证件-人.svg
证件-人.svg
风扇-01.svg
风扇-01.svg
飞机.svg
飞机.svg
工人.svg
工人.svg
收藏-01.svg
收藏-01.svg
收藏-02.svg
收藏-02.svg
盾牌-.svg
盾牌-.svg
盾牌-勾.svg
盾牌-勾.svg
盾牌-电.svg
盾牌-电.svg
盾牌-¥.svg
盾牌-¥.svg
文件-勾.svg
文件-勾.svg
文件-人.svg
文件-人.svg
文件-时间.svg
文件-时间.svg
文件-搜索.svg
文件-搜索.svg
文件1.svg
文件1.svg
文件2-.svg
文件2-.svg
文件2-勾.svg
文件2-勾.svg
文件2-搜索.svg
文件2-搜索.svg
文件2-时间.svg
文件2-时间.svg
文件2-标星.svg
文件2-标星.svg
文件2-盖章.svg
文件2-盖章.svg
文件包.svg
文件包.svg
文档1-编辑.svg
文档1-编辑.svg
文档1-¥.svg
文档1-¥.svg
文档1-¥编辑.svg
文档1-¥编辑.svg
表-01.svg
表-01.svg
表-汽.svg
表-汽.svg
表具-01.svg
表具-01.svg
表具-02.svg
表具-02.svg
电-01.svg
电-01.svg
电-02.svg
电-02.svg
电-03.svg
电-03.svg
电表-01.svg
电表-01.svg
电池+.svg
电池+.svg
电池-.svg
电池-.svg
房子-勾.svg
房子-勾.svg
能源_蒸汽2.svg
能源_蒸汽2.svg
企业02.svg
企业02.svg
政府建筑02.svg
政府建筑02.svg
cnC.svg
cnC.svg
cnF.svg
cnF.svg
cnJ.svg
cnJ.svg
cnK.svg
cnK.svg
device减排.svg
device减排.svg
device预警.svg
device预警.svg
gffdN.svg
gffdN.svg
gffdR.svg
gffdR.svg
gffdY.svg
gffdY.svg
gffdY-1.svg
gffdY-1.svg
gffdZ.svg
gffdZ.svg
kaoheweidufenxi.svg
kaoheweidufenxi.svg
shouyiN.svg
shouyiN.svg
shouyiR.svg
shouyiR.svg
shouyiZ.svg
shouyiZ.svg

箭头图标

8 个 · SVG + PNG
方向=上.svg
方向=上.svg
方向=下.svg
方向=下.svg
方向=左.svg
方向=左.svg
方向=右.svg
方向=右.svg
方向=上.png
方向=上.png
方向=下.png
方向=下.png
方向=左.png
方向=左.png
方向=右.png
方向=右.png

包装图标

10 个 · SVG
尺寸=10.svg
尺寸=10.svg
尺寸=12.svg
尺寸=12.svg
尺寸=14.svg
尺寸=14.svg
尺寸=16.svg
尺寸=16.svg
尺寸=18.svg
尺寸=18.svg
尺寸=20.svg
尺寸=20.svg
尺寸=22.svg
尺寸=22.svg
尺寸=24.svg
尺寸=24.svg
尺寸=32.svg
尺寸=32.svg
尺寸=48.svg
尺寸=48.svg

列表图标

16 个 · PNG
样式=1, 颜色=主色.png
样式=1, 颜色=主色.png
样式=1, 颜色=橙色.png
样式=1, 颜色=橙色.png
样式=1, 颜色=红色.png
样式=1, 颜色=红色.png
样式=1, 颜色=黄色.png
样式=1, 颜色=黄色.png
样式=2, 颜色=主色.png
样式=2, 颜色=主色.png
样式=2, 颜色=橙色.png
样式=2, 颜色=橙色.png
样式=2, 颜色=红色.png
样式=2, 颜色=红色.png
样式=2, 颜色=黄色.png
样式=2, 颜色=黄色.png
样式=3, 颜色=主色.png
样式=3, 颜色=主色.png
样式=3, 颜色=橙色.png
样式=3, 颜色=橙色.png
样式=3, 颜色=红色.png
样式=3, 颜色=红色.png
样式=3, 颜色=黄色.png
样式=3, 颜色=黄色.png
样式=4, 颜色=主色.png
样式=4, 颜色=主色.png
样式=4, 颜色=橙色.png
样式=4, 颜色=橙色.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-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-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
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个)

在项目中使用

vue
<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种图标 × 多种颜色:主色、主白、橙色、红色、黄色、绿色、青绿、青色、水红、水蓝、紫色

基于 Pixso + MCP + Kiro AI 自动生成