Gentleface › Weather › droplet-off

droplet-off icon

Droplet off: water off, water shutoff, water supply off, no water. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L12.123 12.83C11.715 13.43 11.192 13.919 10.554 14.298C9.767 14.766 8.916 15 8 15C7.364 15 6.751 14.883 6.16 14.649C5.518 14.395 4.953 14.024 4.464 13.536C3.976 13.047 3.605 12.482 3.351 11.84C3.117 11.249 3 10.636 3 10C3 9.15 3.164 8.279 3.492 7.386C3.743 6.704 4.096 5.995 4.551 5.258L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM11.4 12.107L5.279 5.986C4.918 6.592 4.636 7.174 4.431 7.731C4.144 8.513 4 9.269 4 10C4 10.509 4.094 10.999 4.281 11.472C4.484 11.986 4.781 12.438 5.172 12.828C5.562 13.219 6.014 13.516 6.528 13.719C7.001 13.906 7.491 14 8 14C8.733 14 9.414 13.813 10.044 13.439C10.608 13.103 11.06 12.659 11.4 12.107ZM12 10C12 8.81 11.612 7.537 10.835 6.18C10.53 5.647 10.148 5.072 9.691 4.457C9.42 4.091 9.015 3.575 8.478 2.911C8.295 2.684 8.136 2.486 8 2.315C7.864 2.486 7.705 2.685 7.522 2.911C7.175 3.341 6.912 3.67 6.733 3.9C6.648 4.009 6.537 4.072 6.4 4.089C6.263 4.106 6.14 4.072 6.031 3.987C5.92 3.901 5.856 3.79 5.839 3.655C5.822 3.52 5.857 3.397 5.944 3.286C6.126 3.051 6.393 2.717 6.745 2.282C7.15 1.781 7.435 1.42 7.6 1.2C7.629 1.162 7.662 1.129 7.7 1.1C7.81 1.017 7.934 0.985 8.071 1.005C8.207 1.025 8.317 1.09 8.4 1.2C8.565 1.42 8.85 1.781 9.255 2.282C9.801 2.957 10.214 3.484 10.494 3.861C10.975 4.508 11.378 5.115 11.703 5.683C12.568 7.194 13 8.633 13 10L13 10.002L13 10.004C13 10.145 12.952 10.264 12.855 10.36C12.76 10.455 12.643 10.503 12.504 10.504L12 10L12 10Z"/></svg>

React

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

export function DropletOffIcon(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="M15.003 14.5C15.003 14.636 14.953 14.754 14.854 14.854C14.754 14.953 14.636 15.003 14.5 15.003C14.364 15.003 14.246 14.953 14.146 14.854L12.123 12.83C11.715 13.43 11.192 13.919 10.554 14.298C9.767 14.766 8.916 15 8 15C7.364 15 6.751 14.883 6.16 14.649C5.518 14.395 4.953 14.024 4.464 13.536C3.976 13.047 3.605 12.482 3.351 11.84C3.117 11.249 3 10.636 3 10C3 9.15 3.164 8.279 3.492 7.386C3.743 6.704 4.096 5.995 4.551 5.258L1.146 1.854C1.047 1.754 0.997 1.636 0.997 1.5C0.997 1.364 1.047 1.246 1.146 1.146C1.246 1.047 1.364 0.997 1.5 0.997C1.636 0.997 1.754 1.047 1.854 1.146L14.854 14.146C14.953 14.246 15.003 14.364 15.003 14.5ZM11.4 12.107L5.279 5.986C4.918 6.592 4.636 7.174 4.431 7.731C4.144 8.513 4 9.269 4 10C4 10.509 4.094 10.999 4.281 11.472C4.484 11.986 4.781 12.438 5.172 12.828C5.562 13.219 6.014 13.516 6.528 13.719C7.001 13.906 7.491 14 8 14C8.733 14 9.414 13.813 10.044 13.439C10.608 13.103 11.06 12.659 11.4 12.107ZM12 10C12 8.81 11.612 7.537 10.835 6.18C10.53 5.647 10.148 5.072 9.691 4.457C9.42 4.091 9.015 3.575 8.478 2.911C8.295 2.684 8.136 2.486 8 2.315C7.864 2.486 7.705 2.685 7.522 2.911C7.175 3.341 6.912 3.67 6.733 3.9C6.648 4.009 6.537 4.072 6.4 4.089C6.263 4.106 6.14 4.072 6.031 3.987C5.92 3.901 5.856 3.79 5.839 3.655C5.822 3.52 5.857 3.397 5.944 3.286C6.126 3.051 6.393 2.717 6.745 2.282C7.15 1.781 7.435 1.42 7.6 1.2C7.629 1.162 7.662 1.129 7.7 1.1C7.81 1.017 7.934 0.985 8.071 1.005C8.207 1.025 8.317 1.09 8.4 1.2C8.565 1.42 8.85 1.781 9.255 2.282C9.801 2.957 10.214 3.484 10.494 3.861C10.975 4.508 11.378 5.115 11.703 5.683C12.568 7.194 13 8.633 13 10L13 10.002L13 10.004C13 10.145 12.952 10.264 12.855 10.36C12.76 10.455 12.643 10.503 12.504 10.504L12 10L12 10Z" />
    </svg>
  );
}

Vue

Vue: see /icons/droplet-off.md

Svelte

Svelte: see /icons/droplet-off.md

HTML img

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

CSS

CSS: see /icons/droplet-off.md

Data URL

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

Sprite

Sprite: see /icons/droplet-off.md

SwiftUI

SwiftUI: see /icons/droplet-off.md

Compose

Compose: see /icons/droplet-off.md

Android XML

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

Flutter

Flutter: see /icons/droplet-off.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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.

Meaning

Use it for

water off, water shutoff, water supply off, no water

Example

Water supply off in a smart-home panel

Built from

droplet + slash

Tags

droplet, water, liquid, humidity, drop, slash

Category

Weather

Component name

DropletOffIcon

History

2026-10-15 added

Family 2

droplet droplet-alert

More weather icons

air-quality cloud-fog cloud-hail cloud-lightning cloud-moon cloud-rain cloud-rain-heavy cloud-snow cloud-sun clouds haze hurricane moon moon-star rainbow snowflake · all weather icons

For agents

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

droplet-off icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp