Temperature Degree Celsius icon

Use the Temperature Degree Celsius icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { TemperatureDegreeCelsius24Regular, TemperatureDegreeCelsius24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TemperatureDegreeCelsius24Regular aria-label="Temperature Degree Celsius" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_temperature_degree_celsius_24_regular.svg" width="24" height="24" alt="Temperature Degree Celsius">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8C4 7.17157 4.67157 6.5 5.5 6.5C6.32843 6.5 7 7.17157 7 8C7 8.82843 6.32843 9.5 5.5 9.5C4.67157 9.5 4 8.82843 4 8ZM5.5 5C3.84315 5 2.5 6.34315 2.5 8C2.5 9.65685 3.84315 11 5.5 11C7.15685 11 8.5 9.65685 8.5 8C8.5 6.34315 7.15685 5 5.5 5ZM12.3468 7.87492C11.5428 8.77406 11 10.1465 11 12C11 13.8535 11.5428 15.2259 12.3468 16.1251C13.1473 17.0204 14.2526 17.5 15.5 17.5C16.7474 17.5 17.8527 17.0204 18.6532 16.1251C18.9351 15.8099 19.1848 15.4365 19.3903 15.0046C19.5313 14.7085 19.8188 14.5 20.1468 14.5C20.6623 14.5 21.0363 14.9947 20.8286 15.4665C20.5527 16.0936 20.197 16.6489 19.7714 17.1249C18.6718 18.3546 17.1521 19 15.5 19C13.8479 19 12.3282 18.3546 11.2286 17.1249C10.1325 15.8991 9.5 14.1465 9.5 12C9.5 9.85349 10.1325 8.10094 11.2286 6.87508C12.3282 5.64537 13.8479 5 15.5 5C17.1521 5 18.6718 5.64537 19.7714 6.87508C20.197 7.35106 20.5527 7.90644 20.8286 8.53345C21.0363 9.00531 20.6623 9.5 20.1468 9.5C19.8188 9.5 19.5313 9.29153 19.3903 8.99537C19.1848 8.56349 18.9351 8.19012 18.6532 7.87492C17.8527 6.97963 16.7474 6.5 15.5 6.5C14.2526 6.5 13.1473 6.97963 12.3468 7.87492Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/temperature_degree_celsius_24_regular.svg";

Details