---
title: "Thermostat animated icon"
description: "Thermostat animated icon (Smart Home). The heat is turned up and the heating engages. Light: the knob is turned clockwise round the dial in one sweep, the setpoint arc growing behind it to the higher temperature, and the hub glows once as the heating comes on. Strong: the setting is clicked up in three detents, each step smaller, then the hub glows hard as the heating engages, rebounds and settles. The setpoint never overshoots and is kept; the preview reset fades the new setting away and rearms."
canonical: https://generativeicons.com/icons/thermostat/
---

# Thermostat animated icon

The heat is turned up and the heating engages. Light: the knob is turned clockwise round the dial in one sweep, the setpoint arc growing behind it to the higher temperature, and the hub glows once as the heating comes on. Strong: the setting is clicked up in three detents, each step smaller, then the hub glows hard as the heating engages, rebounds and settles. The setpoint never overshoots and is kept; the preview reset fades the new setting away and rearms.

- Id: `thermostat`
- Category: Smart Home
- Search terms: heating, heater, hvac, climate control, temperature control, set temperature, heat, boiler, central heating, home 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/thermostat.lottie (dotLottie, 7132 bytes, sha256 de8b8849500c214765c978055ea95da21c7032d30ea2d3c6c558378aa5435116)
- License: MIT

## Install

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

## React

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

export function ThermostatIcon() {
  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/thermostat.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/thermostat/ · https://generativeicons.com/api/icons/thermostat