temperature degree celsius icon

temperature-degree-celsius-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name
temperature-degree-celsius-20-regular
Set
Fluent UI System Icons
Style
20 Regular
Viewbox
20×20
License
MIT

11 other variants in Fluent UI System Icons

temperature-degree-celsius-16-filledtemperature-degree-celsius-16-regulartemperature-degree-celsius-20-filledtemperature-degree-celsius-24-filledtemperature-degree-celsius-24-regulartemperature-degree-celsius-28-filledtemperature-degree-celsius-28-regulartemperature-degree-celsius-32-filledtemperature-degree-celsius-32-regulartemperature-degree-celsius-48-filledtemperature-degree-celsius-48-regular

Related icons in Fluent UI System Icons

temperature-degree-fahrenheit-16-filled

Use the temperature degree celsius icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3 6.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M4.5 4a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5m5.51 2.276c-.76.83-1.26 2.077-1.26 3.724s.5 2.894 1.26 3.724C10.77 14.552 11.82 15 13 15s2.23-.448 2.99-1.276q.365-.396.638-.917a.56.56 0 0 1 .487-.307c.358 0 .608.355.448.675q-.344.689-.836 1.225C15.767 15.447 14.444 16 13 16s-2.767-.553-3.727-1.6C8.314 13.354 7.75 11.85 7.75 10s.564-3.354 1.523-4.4C10.233 4.553 11.557 4 13 4s2.768.553 3.727 1.6q.492.536.836 1.225c.16.32-.09.675-.448.675a.56.56 0 0 1-.487-.307a4.3 4.3 0 0 0-.638-.917C15.23 5.448 14.18 5 13 5s-2.23.448-2.99 1.276"/></svg>

React

import type { SVGProps } from "react";

export function FluentTemperatureDegreeCelsius20Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3 6.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M4.5 4a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5m5.51 2.276c-.76.83-1.26 2.077-1.26 3.724s.5 2.894 1.26 3.724C10.77 14.552 11.82 15 13 15s2.23-.448 2.99-1.276q.365-.396.638-.917a.56.56 0 0 1 .487-.307c.358 0 .608.355.448.675q-.344.689-.836 1.225C15.767 15.447 14.444 16 13 16s-2.767-.553-3.727-1.6C8.314 13.354 7.75 11.85 7.75 10s.564-3.354 1.523-4.4C10.233 4.553 11.557 4 13 4s2.768.553 3.727 1.6q.492.536.836 1.225c.16.32-.09.675-.448.675a.56.56 0 0 1-.487-.307a4.3 4.3 0 0 0-.638-.917C15.23 5.448 14.18 5 13 5s-2.23.448-2.99 1.276"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3 6.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M4.5 4a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5m5.51 2.276c-.76.83-1.26 2.077-1.26 3.724s.5 2.894 1.26 3.724C10.77 14.552 11.82 15 13 15s2.23-.448 2.99-1.276q.365-.396.638-.917a.56.56 0 0 1 .487-.307c.358 0 .608.355.448.675q-.344.689-.836 1.225C15.767 15.447 14.444 16 13 16s-2.767-.553-3.727-1.6C8.314 13.354 7.75 11.85 7.75 10s.564-3.354 1.523-4.4C10.233 4.553 11.557 4 13 4s2.768.553 3.727 1.6q.492.536.836 1.225c.16.32-.09.675-.448.675a.56.56 0 0 1-.487-.307a4.3 4.3 0 0 0-.638-.917C15.23 5.448 14.18 5 13 5s-2.23.448-2.99 1.276"/></svg>
</template>

CSS

.icon-temperature-degree-celsius-20-regular {
  width: 24px;
  height: 24px;
  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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%206.5a1.5%201.5%200%201%201%203%200a1.5%201.5%200%200%201-3%200M4.5%204a2.5%202.5%200%201%200%200%205a2.5%202.5%200%200%200%200-5m5.51%202.276c-.76.83-1.26%202.077-1.26%203.724s.5%202.894%201.26%203.724C10.77%2014.552%2011.82%2015%2013%2015s2.23-.448%202.99-1.276q.365-.396.638-.917a.56.56%200%200%201%20.487-.307c.358%200%20.608.355.448.675q-.344.689-.836%201.225C15.767%2015.447%2014.444%2016%2013%2016s-2.767-.553-3.727-1.6C8.314%2013.354%207.75%2011.85%207.75%2010s.564-3.354%201.523-4.4C10.233%204.553%2011.557%204%2013%204s2.768.553%203.727%201.6q.492.536.836%201.225c.16.32-.09.675-.448.675a.56.56%200%200%201-.487-.307a4.3%204.3%200%200%200-.638-.917C15.23%205.448%2014.18%205%2013%205s-2.23.448-2.99%201.276%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%206.5a1.5%201.5%200%201%201%203%200a1.5%201.5%200%200%201-3%200M4.5%204a2.5%202.5%200%201%200%200%205a2.5%202.5%200%200%200%200-5m5.51%202.276c-.76.83-1.26%202.077-1.26%203.724s.5%202.894%201.26%203.724C10.77%2014.552%2011.82%2015%2013%2015s2.23-.448%202.99-1.276q.365-.396.638-.917a.56.56%200%200%201%20.487-.307c.358%200%20.608.355.448.675q-.344.689-.836%201.225C15.767%2015.447%2014.444%2016%2013%2016s-2.767-.553-3.727-1.6C8.314%2013.354%207.75%2011.85%207.75%2010s.564-3.354%201.523-4.4C10.233%204.553%2011.557%204%2013%204s2.768.553%203.727%201.6q.492.536.836%201.225c.16.32-.09.675-.448.675a.56.56%200%200%201-.487-.307a4.3%204.3%200%200%200-.638-.917C15.23%205.448%2014.18%205%2013%205s-2.23.448-2.99%201.276%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/temperature-degree-celsius-20-regular.svg?color=%231a73e8&size=48