---
title: "Temperature animated icon"
description: "Temperature animated icon (Weather). Heat arrives and the reading climbs. Light: the bulb swells as it takes the heat, then the mercury climbs from low to high in one decisive rise, and each scale mark flicks out in turn as the column passes it, the top one as the column arrives. Strong: the bulb pumps twice and the column climbs in two surges, stopping dead at the middle mark and then at the top, with bigger flicks. The column never overshoots; the glass never moves."
canonical: https://generativeicons.com/icons/temperature/
---

# Temperature animated icon

Heat arrives and the reading climbs. Light: the bulb swells as it takes the heat, then the mercury climbs from low to high in one decisive rise, and each scale mark flicks out in turn as the column passes it, the top one as the column arrives. Strong: the bulb pumps twice and the column climbs in two surges, stopping dead at the middle mark and then at the top, with bigger flicks. The column never overshoots; the glass never moves.

- Id: `temperature`
- Category: Weather
- Search terms: thermometer, heat, hot, degrees, celsius, fahrenheit, warm, mercury, heatwave, fever, climate
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/temperature.lottie (dotLottie, 8122 bytes, sha256 f2f027a6a9daf6722ec74786428422172fd25c5f74f3ba194b47d09d76844041)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add temperature
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/temperature.mjs';

export function TemperatureIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/temperature.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/temperature/ · https://generativeicons.com/api/icons/temperature