Gentleface › Weather › thermometer-droplet

thermometer-droplet icon

Thermometer droplet: dew point. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated thermometer-droplet-condense · line-round

The drop runs down and drips off the bottom edge as the column warms and climbs. The column then falls past its mark to the dew point and a new drop condenses in place, swelling from a bead.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.25 s to 2.55 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.14 2.264C10.242 2.007 10.391 1.781 10.586 1.586C10.781 1.391 11.007 1.242 11.264 1.14C11.5 1.047 11.746 1 12 1C12.254 1 12.5 1.047 12.736 1.14C12.993 1.242 13.219 1.391 13.414 1.586C13.609 1.781 13.758 2.007 13.86 2.264C13.953 2.5 14 2.746 14 3L14 9.764C14.233 9.971 14.429 10.211 14.589 10.484C14.812 10.866 14.945 11.276 14.987 11.717C15.028 12.157 14.975 12.585 14.828 13.002C14.693 13.382 14.49 13.721 14.219 14.019C13.948 14.317 13.63 14.551 13.265 14.72C12.864 14.907 12.442 15 12 15C11.558 15 11.136 14.907 10.735 14.72C10.37 14.551 10.052 14.317 9.781 14.019C9.51 13.721 9.307 13.382 9.172 13.002C9.025 12.585 8.972 12.157 9.013 11.717C9.055 11.276 9.188 10.866 9.411 10.484C9.571 10.211 9.767 9.971 10 9.764L10 3C10 2.746 10.047 2.5 10.14 2.264ZM12.707 2.293C12.512 2.098 12.276 2 12 2C11.724 2 11.488 2.098 11.293 2.293C11.098 2.488 11 2.724 11 3L11 6L13 6L13 3C13 2.724 12.902 2.488 12.707 2.293ZM3.659 4.134C3.76 4.04 3.879 3.995 4.017 4C4.155 4.005 4.271 4.058 4.366 4.159L4.503 4.306C4.823 4.646 5.073 4.922 5.253 5.133C5.569 5.505 5.839 5.863 6.063 6.208C6.688 7.171 7 8.102 7 9C7 9.381 6.93 9.75 6.789 10.104C6.637 10.489 6.414 10.828 6.121 11.121C5.828 11.414 5.489 11.637 5.104 11.789C4.75 11.93 4.381 12 4 12C3.619 12 3.25 11.93 2.896 11.789C2.511 11.637 2.172 11.414 1.879 11.121C1.586 10.828 1.363 10.489 1.211 10.104C1.07 9.75 1 9.381 1 9C1 8.102 1.312 7.171 1.937 6.208C2.161 5.863 2.431 5.505 2.747 5.133C2.927 4.922 3.177 4.646 3.497 4.306L3.634 4.16L3.634 4.159C3.643 4.15 3.651 4.142 3.659 4.134ZM2.776 6.752C2.259 7.55 2 8.299 2 9C2 9.254 2.047 9.5 2.14 9.736C2.242 9.993 2.391 10.219 2.586 10.414C2.781 10.609 3.007 10.758 3.264 10.86C3.5 10.953 3.746 11 4 11C4.254 11 4.5 10.953 4.736 10.86C4.993 10.758 5.219 10.609 5.414 10.414C5.609 10.219 5.758 9.993 5.86 9.736C5.953 9.5 6 9.254 6 9C6 8.299 5.741 7.55 5.224 6.752C5.024 6.444 4.78 6.12 4.491 5.782C4.366 5.634 4.202 5.451 4 5.233C3.798 5.451 3.634 5.634 3.509 5.782C3.22 6.12 2.976 6.444 2.776 6.752Z"/></svg>

React

// Gentleface "thermometer-droplet" (line-round), MIT. https://gentleface.com/icons/thermometer-droplet
import type { SVGProps } from 'react';

export function ThermometerDropletIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M10.14 2.264C10.242 2.007 10.391 1.781 10.586 1.586C10.781 1.391 11.007 1.242 11.264 1.14C11.5 1.047 11.746 1 12 1C12.254 1 12.5 1.047 12.736 1.14C12.993 1.242 13.219 1.391 13.414 1.586C13.609 1.781 13.758 2.007 13.86 2.264C13.953 2.5 14 2.746 14 3L14 9.764C14.233 9.971 14.429 10.211 14.589 10.484C14.812 10.866 14.945 11.276 14.987 11.717C15.028 12.157 14.975 12.585 14.828 13.002C14.693 13.382 14.49 13.721 14.219 14.019C13.948 14.317 13.63 14.551 13.265 14.72C12.864 14.907 12.442 15 12 15C11.558 15 11.136 14.907 10.735 14.72C10.37 14.551 10.052 14.317 9.781 14.019C9.51 13.721 9.307 13.382 9.172 13.002C9.025 12.585 8.972 12.157 9.013 11.717C9.055 11.276 9.188 10.866 9.411 10.484C9.571 10.211 9.767 9.971 10 9.764L10 3C10 2.746 10.047 2.5 10.14 2.264ZM12.707 2.293C12.512 2.098 12.276 2 12 2C11.724 2 11.488 2.098 11.293 2.293C11.098 2.488 11 2.724 11 3L11 6L13 6L13 3C13 2.724 12.902 2.488 12.707 2.293ZM3.659 4.134C3.76 4.04 3.879 3.995 4.017 4C4.155 4.005 4.271 4.058 4.366 4.159L4.503 4.306C4.823 4.646 5.073 4.922 5.253 5.133C5.569 5.505 5.839 5.863 6.063 6.208C6.688 7.171 7 8.102 7 9C7 9.381 6.93 9.75 6.789 10.104C6.637 10.489 6.414 10.828 6.121 11.121C5.828 11.414 5.489 11.637 5.104 11.789C4.75 11.93 4.381 12 4 12C3.619 12 3.25 11.93 2.896 11.789C2.511 11.637 2.172 11.414 1.879 11.121C1.586 10.828 1.363 10.489 1.211 10.104C1.07 9.75 1 9.381 1 9C1 8.102 1.312 7.171 1.937 6.208C2.161 5.863 2.431 5.505 2.747 5.133C2.927 4.922 3.177 4.646 3.497 4.306L3.634 4.16L3.634 4.159C3.643 4.15 3.651 4.142 3.659 4.134ZM2.776 6.752C2.259 7.55 2 8.299 2 9C2 9.254 2.047 9.5 2.14 9.736C2.242 9.993 2.391 10.219 2.586 10.414C2.781 10.609 3.007 10.758 3.264 10.86C3.5 10.953 3.746 11 4 11C4.254 11 4.5 10.953 4.736 10.86C4.993 10.758 5.219 10.609 5.414 10.414C5.609 10.219 5.758 9.993 5.86 9.736C5.953 9.5 6 9.254 6 9C6 8.299 5.741 7.55 5.224 6.752C5.024 6.444 4.78 6.12 4.491 5.782C4.366 5.634 4.202 5.451 4 5.233C3.798 5.451 3.634 5.634 3.509 5.782C3.22 6.12 2.976 6.444 2.776 6.752Z" />
    </svg>
  );
}

Vue

Vue: see /icons/thermometer-droplet.md

Svelte

Svelte: see /icons/thermometer-droplet.md

HTML img

HTML img: see /icons/thermometer-droplet.md

CSS

CSS: see /icons/thermometer-droplet.md

Data URL

Data URL: see /icons/thermometer-droplet.md

Sprite

Sprite: see /icons/thermometer-droplet.md

SwiftUI

SwiftUI: see /icons/thermometer-droplet.md

Compose

Compose: see /icons/thermometer-droplet.md

Android XML

Android XML: see /icons/thermometer-droplet.md

Flutter

Flutter: see /icons/thermometer-droplet.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { ThermometerDropletIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

dew point

Tags

dew point, dew, condensation, humidity, moisture, thermometer, droplet, temperature, weather, climate

Category

Weather

Component name

ThermometerDropletIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 50

air-quality avalanche celsius earthquake eclipse fahrenheit flood haze hurricane landslide moon moon-off

More weather icons

cloud-drizzle cloud-fog cloud-hail cloud-lightning cloud-moon cloud-moon-rain cloud-rain cloud-rain-heavy cloud-rain-wind cloud-sleet cloud-snow cloud-snow-wind cloud-sun cloud-sun-rain clouds droplet · all weather icons

For agents

Metadata: /icons/thermometer-droplet.json · Markdown: /icons/thermometer-droplet.md · SVG: https://gentleface.com/svg/{style}/16/thermometer-droplet.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/thermometer-droplet.png

thermometer-droplet icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp