Live icon · Weather · 20 styles · free
Thermometer level live icon
A thermometer filled to the level you choose, with an optional reading such as 37° beside it. Set it here, then download it or paste it anywhere.
Set what it shows
Style Line clean outlines
Colour Style colours
On this page
Thermometer level in all 20 styles
Same values, 20 personalities. Pick one to use it above.
For developersOne element or component with your settings: HTML, React or Vue
Install it with npm i @withicons/dynamic, or copy the HTML tab as is. The code follows everything you set above: values, style, colours and size.
<script src="https://cdn.jsdelivr.net/npm/@withicons/dynamic@0.2.1/dist/cdn/lite.js"></script>
<with-live-icon name="thermometer-level" level="0.65" value="37" unit="degree" show-value scale="auto" size="48"></with-live-icon>import { LiveIcon } from '@withicons/dynamic/react'
export function Example() {
return <LiveIcon name="thermometer-level" level={0.65} value={37} unit="degree" showValue scale="auto" size={48} />
}<script setup>
import { LiveIcon } from '@withicons/dynamic/vue'
</script>
<template>
<LiveIcon name="thermometer-level" :level="0.65" :value="37" unit="degree" :show-value="true" scale="auto" :size="48" />
</template>What you can change
| Setting | What you can set | Default | Attribute |
|---|---|---|---|
| LevelLevel | 0% to 100% | 65% | level |
| ReadingNumber | -99 to 199 | 37 | value |
| UnitChoice | degree, celsius, fahrenheit, none | degree | unit |
| Show the readingOn / off | on or off | on | show-value |
| Level: follow the reading (auto) or use Level (manual)Choice | auto, manual | auto | scale |
Also called temperature level temperature gauge thermometer reading temp level heat level fever level temperature meter
Questions
How do I change the level on the thermometer level icon?
Use the controls next to the preview. Level, Reading, Unit, Show the reading, and Level: follow the reading or use Level can all be changed, the icon redraws as you go, and the download uses exactly what you see.
Is the thermometer level icon free?
Yes. It is free for personal and commercial use under the MIT license, in all 20 styles. No sign-up, no credit needed.
Can I use it in PowerPoint, Google Slides or Canva?
Yes. Download a PNG (see-through background), an SVG or a ready PowerPoint slide, then drag it into your slide or design. SVG stays sharp at any size.
How do I add it to a website?
Add the @withicons/dynamic script and write <with-live-icon name="thermometer-level"> with your values as attributes. React and Vue get a LiveIcon component.