找找图标
celsius 图标

celsius SVG 图标

meteoconscelsius

来自 Meteocons 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
meteocons:celsius
中文名
—
所属集合
Meteocons
集合规模
447 枚
基础网格
32px
色彩
多色
开源协议
MIT
作者
Bas Milius

下载 celsius 图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

px
iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

celsius 的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
celsius 图标 浅色背景预览浅色背景
celsius 图标 深色背景预览深色背景
celsius 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索celsius…输入框 · 前缀图标
celsius导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41celsius App 图标celsiuscelsius-fillthermometer-celsiusthermometer-celsius-fillthermometer-glass-celsiusthermometer-glass-celsius-fill手机桌面 · App 图标
celsiusmeteocons.design/icons/celsius浏览器 · 标签页与站点图标

各尺寸下的可读性

celsius 图标 24px 渲染24pxcelsius 图标 32px 渲染32pxcelsius 图标 48px 渲染48pxcelsius 图标 64px 渲染64pxcelsius 图标 96px 渲染96pxcelsius 图标 128px 渲染128px

复制 celsius 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><defs><symbol id="SVG8c4FjcGg" viewBox="0 0 109.1 73.2"><path fill="#374151" d="M19.4 0A18.7 18.7 0 0 0 0 19.3a18.9 18.9 0 0 0 19.4 19.5a18.7 18.7 0 0 0 14-5.6a18.8 18.8 0 0 0 5.4-14A18.7 18.7 0 0 0 19.4 0m6.3 25.7a8.6 8.6 0 0 1-6.3 2.5a8.5 8.5 0 0 1-6.2-2.5a8.7 8.7 0 0 1-2.4-6.4A8.6 8.6 0 0 1 13 13a8.4 8.4 0 0 1 6.3-2.5a8.4 8.4 0 0 1 8.7 8.8a8.7 8.7 0 0 1-2.4 6.4Zm53.1 32.8a13.4 13.4 0 0 1-11.5-5.6q-4-5.7-4-16q0-10 4-15.6a13.4 13.4 0 0 1 11.5-5.6a12.6 12.6 0 0 1 8.6 3a13.3 13.3 0 0 1 4.2 8.2H109q-1.4-12-9.5-19T78.3 1q-14.5 0-23.7 9.8T45.3 37q0 16.4 9.2 26.3t23.7 9.9q13.2 0 21.6-7.1q8.3-7 9.3-19.6H91.6q-1.6 12-12.8 12"/></symbol></defs><use width="109.1" height="73.2" href="#SVG8c4FjcGg" transform="matrix(1.46 0 0 1.47 176.26 202.35)"/></svg>
reactReact 组件（TSX）
export function CelsiusIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 512 512"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<defs><symbol id="SVG8c4FjcGg" viewBox="0 0 109.1 73.2"><path fill="#374151" d="M19.4 0A18.7 18.7 0 0 0 0 19.3a18.9 18.9 0 0 0 19.4 19.5a18.7 18.7 0 0 0 14-5.6a18.8 18.8 0 0 0 5.4-14A18.7 18.7 0 0 0 19.4 0m6.3 25.7a8.6 8.6 0 0 1-6.3 2.5a8.5 8.5 0 0 1-6.2-2.5a8.7 8.7 0 0 1-2.4-6.4A8.6 8.6 0 0 1 13 13a8.4 8.4 0 0 1 6.3-2.5a8.4 8.4 0 0 1 8.7 8.8a8.7 8.7 0 0 1-2.4 6.4Zm53.1 32.8a13.4 13.4 0 0 1-11.5-5.6q-4-5.7-4-16q0-10 4-15.6a13.4 13.4 0 0 1 11.5-5.6a12.6 12.6 0 0 1 8.6 3a13.3 13.3 0 0 1 4.2 8.2H109q-1.4-12-9.5-19T78.3 1q-14.5 0-23.7 9.8T45.3 37q0 16.4 9.2 26.3t23.7 9.9q13.2 0 21.6-7.1q8.3-7 9.3-19.6H91.6q-1.6 12-12.8 12"/></symbol></defs><use width="109.1" height="73.2" href="#SVG8c4FjcGg" transform="matrix(1.46 0 0 1.47 176.26 202.35)"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<defs><symbol id="SVG8c4FjcGg" viewBox="0 0 109.1 73.2"><path fill="#374151" d="M19.4 0A18.7 18.7 0 0 0 0 19.3a18.9 18.9 0 0 0 19.4 19.5a18.7 18.7 0 0 0 14-5.6a18.8 18.8 0 0 0 5.4-14A18.7 18.7 0 0 0 19.4 0m6.3 25.7a8.6 8.6 0 0 1-6.3 2.5a8.5 8.5 0 0 1-6.2-2.5a8.7 8.7 0 0 1-2.4-6.4A8.6 8.6 0 0 1 13 13a8.4 8.4 0 0 1 6.3-2.5a8.4 8.4 0 0 1 8.7 8.8a8.7 8.7 0 0 1-2.4 6.4Zm53.1 32.8a13.4 13.4 0 0 1-11.5-5.6q-4-5.7-4-16q0-10 4-15.6a13.4 13.4 0 0 1 11.5-5.6a12.6 12.6 0 0 1 8.6 3a13.3 13.3 0 0 1 4.2 8.2H109q-1.4-12-9.5-19T78.3 1q-14.5 0-23.7 9.8T45.3 37q0 16.4 9.2 26.3t23.7 9.9q13.2 0 21.6-7.1q8.3-7 9.3-19.6H91.6q-1.6 12-12.8 12"/></symbol></defs><use width="109.1" height="73.2" href="#SVG8c4FjcGg" transform="matrix(1.46 0 0 1.47 176.26 202.35)"/>`;
</script>
cssCSS mask（随 currentColor 改色）
.celsius {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22SVG8c4FjcGg%22%20viewBox%3D%220%200%20109.1%2073.2%22%3E%3Cpath%20fill%3D%22%23374151%22%20d%3D%22M19.4%200A18.7%2018.7%200%200%200%200%2019.3a18.9%2018.9%200%200%200%2019.4%2019.5a18.7%2018.7%200%200%200%2014-5.6a18.8%2018.8%200%200%200%205.4-14A18.7%2018.7%200%200%200%2019.4%200m6.3%2025.7a8.6%208.6%200%200%201-6.3%202.5a8.5%208.5%200%200%201-6.2-2.5a8.7%208.7%200%200%201-2.4-6.4A8.6%208.6%200%200%201%2013%2013a8.4%208.4%200%200%201%206.3-2.5a8.4%208.4%200%200%201%208.7%208.8a8.7%208.7%200%200%201-2.4%206.4Zm53.1%2032.8a13.4%2013.4%200%200%201-11.5-5.6q-4-5.7-4-16q0-10%204-15.6a13.4%2013.4%200%200%201%2011.5-5.6a12.6%2012.6%200%200%201%208.6%203a13.3%2013.3%200%200%201%204.2%208.2H109q-1.4-12-9.5-19T78.3%201q-14.5%200-23.7%209.8T45.3%2037q0%2016.4%209.2%2026.3t23.7%209.9q13.2%200%2021.6-7.1q8.3-7%209.3-19.6H91.6q-1.6%2012-12.8%2012%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22109.1%22%20height%3D%2273.2%22%20href%3D%22%23SVG8c4FjcGg%22%20transform%3D%22matrix(1.46%200%200%201.47%20176.26%20202.35)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cdefs%3E%3Csymbol%20id%3D%22SVG8c4FjcGg%22%20viewBox%3D%220%200%20109.1%2073.2%22%3E%3Cpath%20fill%3D%22%23374151%22%20d%3D%22M19.4%200A18.7%2018.7%200%200%200%200%2019.3a18.9%2018.9%200%200%200%2019.4%2019.5a18.7%2018.7%200%200%200%2014-5.6a18.8%2018.8%200%200%200%205.4-14A18.7%2018.7%200%200%200%2019.4%200m6.3%2025.7a8.6%208.6%200%200%201-6.3%202.5a8.5%208.5%200%200%201-6.2-2.5a8.7%208.7%200%200%201-2.4-6.4A8.6%208.6%200%200%201%2013%2013a8.4%208.4%200%200%201%206.3-2.5a8.4%208.4%200%200%201%208.7%208.8a8.7%208.7%200%200%201-2.4%206.4Zm53.1%2032.8a13.4%2013.4%200%200%201-11.5-5.6q-4-5.7-4-16q0-10%204-15.6a13.4%2013.4%200%200%201%2011.5-5.6a12.6%2012.6%200%200%201%208.6%203a13.3%2013.3%200%200%201%204.2%208.2H109q-1.4-12-9.5-19T78.3%201q-14.5%200-23.7%209.8T45.3%2037q0%2016.4%209.2%2026.3t23.7%209.9q13.2%200%2021.6-7.1q8.3-7%209.3-19.6H91.6q-1.6%2012-12.8%2012%22%2F%3E%3C%2Fsymbol%3E%3C%2Fdefs%3E%3Cuse%20width%3D%22109.1%22%20height%3D%2273.2%22%20href%3D%22%23SVG8c4FjcGg%22%20transform%3D%22matrix(1.46%200%200%201.47%20176.26%20202.35)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 celsius 加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

celsius 呼吸动效演示

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式
.icon-celsius {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
celsius 旋转动效演示

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式
.icon-celsius {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

0.82 KB

839 字节

viewBox

0 0 512 512

矢量坐标系

图元总数

1

<path> ×1

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 0.82 KB（839 字节），图元 1 个，风格为多色填充。

常见问题

关于 celsius 图标的下载、商用与改色。

celsius 图标是什么？▾

它是 Meteocons（meteocons）开源图标集中的 celsius 图标，多色填充，viewBox 为 0 0 512 512，文件仅 0.82 KB，矢量格式可无损缩放到任意尺寸。

如何下载 celsius 图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

celsius 图标可以商用吗？▾

该图标采用 MIT（MIT） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 celsius 图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

Meteocons 中的相近图标

celsius-fill
thermometer-celsius
thermometer-celsius-fill
thermometer-glass-celsius
thermometer-glass-celsius-fill