temperature degree celsius icon

temperature-degree-celsius-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.

Name
temperature-degree-celsius-24-filled
Set
Fluent UI System Icons
Style
24 Filled
Viewbox
24×24
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-20-regulartemperature-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 24 24"><path fill="currentColor" d="M4 8.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M5.5 5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m7.713 3.224C12.5 9.026 12 10.274 12 12c0 1.727.501 2.974 1.213 3.776C13.919 16.573 14.892 17 16 17s2.081-.427 2.788-1.224q.25-.281.46-.636c.22-.371.597-.64 1.028-.64c.7 0 1.209.675.891 1.3q-.368.723-.883 1.304C19.18 18.347 17.654 19 16 19s-3.18-.653-4.284-1.896C10.618 15.866 10 14.114 10 12s.618-3.866 1.716-5.104C12.82 5.653 14.346 5 16 5s3.18.653 4.284 1.896q.514.582.883 1.304c.318.625-.191 1.3-.891 1.3c-.431 0-.809-.269-1.027-.64a4 4 0 0 0-.461-.636C18.08 7.427 17.108 7 16 7s-2.081.427-2.787 1.224"/></svg>

React

import type { SVGProps } from "react";

export function FluentTemperatureDegreeCelsius24Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 8.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M5.5 5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m7.713 3.224C12.5 9.026 12 10.274 12 12c0 1.727.501 2.974 1.213 3.776C13.919 16.573 14.892 17 16 17s2.081-.427 2.788-1.224q.25-.281.46-.636c.22-.371.597-.64 1.028-.64c.7 0 1.209.675.891 1.3q-.368.723-.883 1.304C19.18 18.347 17.654 19 16 19s-3.18-.653-4.284-1.896C10.618 15.866 10 14.114 10 12s.618-3.866 1.716-5.104C12.82 5.653 14.346 5 16 5s3.18.653 4.284 1.896q.514.582.883 1.304c.318.625-.191 1.3-.891 1.3c-.431 0-.809-.269-1.027-.64a4 4 0 0 0-.461-.636C18.08 7.427 17.108 7 16 7s-2.081.427-2.787 1.224"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 8.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M5.5 5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m7.713 3.224C12.5 9.026 12 10.274 12 12c0 1.727.501 2.974 1.213 3.776C13.919 16.573 14.892 17 16 17s2.081-.427 2.788-1.224q.25-.281.46-.636c.22-.371.597-.64 1.028-.64c.7 0 1.209.675.891 1.3q-.368.723-.883 1.304C19.18 18.347 17.654 19 16 19s-3.18-.653-4.284-1.896C10.618 15.866 10 14.114 10 12s.618-3.866 1.716-5.104C12.82 5.653 14.346 5 16 5s3.18.653 4.284 1.896q.514.582.883 1.304c.318.625-.191 1.3-.891 1.3c-.431 0-.809-.269-1.027-.64a4 4 0 0 0-.461-.636C18.08 7.427 17.108 7 16 7s-2.081.427-2.787 1.224"/></svg>
</template>

CSS

.icon-temperature-degree-celsius-24-filled {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%208.5a1.5%201.5%200%201%201%203%200a1.5%201.5%200%200%201-3%200M5.5%205a3.5%203.5%200%201%200%200%207a3.5%203.5%200%200%200%200-7m7.713%203.224C12.5%209.026%2012%2010.274%2012%2012c0%201.727.501%202.974%201.213%203.776C13.919%2016.573%2014.892%2017%2016%2017s2.081-.427%202.788-1.224q.25-.281.46-.636c.22-.371.597-.64%201.028-.64c.7%200%201.209.675.891%201.3q-.368.723-.883%201.304C19.18%2018.347%2017.654%2019%2016%2019s-3.18-.653-4.284-1.896C10.618%2015.866%2010%2014.114%2010%2012s.618-3.866%201.716-5.104C12.82%205.653%2014.346%205%2016%205s3.18.653%204.284%201.896q.514.582.883%201.304c.318.625-.191%201.3-.891%201.3c-.431%200-.809-.269-1.027-.64a4%204%200%200%200-.461-.636C18.08%207.427%2017.108%207%2016%207s-2.081.427-2.787%201.224%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%208.5a1.5%201.5%200%201%201%203%200a1.5%201.5%200%200%201-3%200M5.5%205a3.5%203.5%200%201%200%200%207a3.5%203.5%200%200%200%200-7m7.713%203.224C12.5%209.026%2012%2010.274%2012%2012c0%201.727.501%202.974%201.213%203.776C13.919%2016.573%2014.892%2017%2016%2017s2.081-.427%202.788-1.224q.25-.281.46-.636c.22-.371.597-.64%201.028-.64c.7%200%201.209.675.891%201.3q-.368.723-.883%201.304C19.18%2018.347%2017.654%2019%2016%2019s-3.18-.653-4.284-1.896C10.618%2015.866%2010%2014.114%2010%2012s.618-3.866%201.716-5.104C12.82%205.653%2014.346%205%2016%205s3.18.653%204.284%201.896q.514.582.883%201.304c.318.625-.191%201.3-.891%201.3c-.431%200-.809-.269-1.027-.64a4%204%200%200%200-.461-.636C18.08%207.427%2017.108%207%2016%207s-2.081.427-2.787%201.224%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-24-filled.svg?color=%231a73e8&size=48