Fluent Icons

Temperature icon

Used to represent outdoor/indoor temperature. The Temperature icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 5 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_temperature_24_regular.svg

Temperature icon in React

npm install @fluentui/react-icons

import { Temperature24Regular } from "@fluentui/react-icons";

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

Temperature icon in SVG

npm install @fluentui/svg-icons

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

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/temperature_24_regular.svg" width="24" height="24" alt="Temperature">

Temperature icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Temperature())" />

Temperature icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.temperature_24_regular)

Temperature icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF790;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF790;" FontSize="24" />

Temperature icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_temperature_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f790";
  font-size: 24px;
}

Temperature icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_temperature_24_regular" />

// Kotlin
R.drawable.ic_fluent_temperature_24_regular

Temperature icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .temperature24Regular)

Temperature icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Temperature 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 { Temperature24Regular, Temperature24Filled } from "@fluentui/react-icons";

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

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

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

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="M12 2C13.733 2 15.1492 3.35645 15.2449 5.06546L15.25 5.24987L15.251 13.202L15.331 13.2709C16.2565 14.0975 16.8482 15.2418 16.9746 16.4939L16.9936 16.7457L17 17C17 19.7614 14.7614 22 12 22C9.23858 22 7 19.7614 7 17C7 15.6373 7.5496 14.3655 8.48922 13.4396L8.66993 13.2701L8.749 13.202L8.75 5.25C8.75 3.57886 10.0113 2.20232 11.6339 2.0204L11.8156 2.00514L12 2ZM12 3.5C11.0818 3.5 10.3288 4.20711 10.2558 5.10651L10.25 5.25004L10.2495 13.9445L9.94128 14.1691C9.04185 14.8246 8.5 15.8664 8.5 17C8.5 18.933 10.067 20.5 12 20.5C13.933 20.5 15.5 18.933 15.5 17C15.5 15.9376 15.0241 14.9558 14.2239 14.2971L14.0595 14.1697L13.7515 13.9451L13.75 5.25C13.75 4.2835 12.9665 3.5 12 3.5ZM12 8C12.4142 8 12.75 8.33579 12.75 8.75L12.7506 14.6146C13.7646 14.9334 14.5 15.8808 14.5 17C14.5 18.3807 13.3807 19.5 12 19.5C10.6193 19.5 9.5 18.3807 9.5 17C9.5 15.8804 10.2359 14.9328 11.2504 14.6143L11.25 8.75C11.25 8.33579 11.5858 8 12 8Z" fill="currentColor"/></svg>

Details

NameTemperature
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 32 px, 48 px
Regular (outlined) fileic_fluent_temperature_24_regular.svg
Filled fileic_fluent_temperature_24_filled.svg
React (Regular)Temperature16Regular, Temperature20Regular, Temperature24Regular, Temperature32Regular, Temperature48Regular
React (Filled)Temperature16Filled, Temperature20Filled, Temperature24Filled, Temperature32Filled, Temperature48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

Temperature Degree CelsiusTemperature Degree FahrenheitBalconyData Bar Vertical Arrow DownData Bar Vertical AscendingFireGaugeGauge AddRulerTable PicnicTentTime And Weather