Water Droplet icon

A free water droplet icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Weather & Climate
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: droplet, drop, waterdrop, dew, moisture, humidity, liquid, rain, spill, hydration

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(4.73 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7.27 0C20.27 11 12.98 18 7.27 18C1.55 18 -5.73 11 7.27 0Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(3.73 2)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M8.91 0.24C8.73 0.08 8.5 0 8.27 0C8.03 0 7.8 0.08 7.62 0.24C1.03 5.81 -0.79 10.69 0.29 14.4C1.36 18.06 5.09 20 8.27 20C11.45 20 15.18 18.06 16.25 14.4C17.33 10.69 15.51 5.81 8.91 0.24Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(4.73 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7.27 0C20.27 11 12.98 18 7.27 18C1.55 18 -5.73 11 7.27 0Z"/>
  <path transform="translate(4.73 14)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14.52 0C14.74 4.45 10.72 7 7.27 7C3.82 7 -0.21 4.45 0.01 0"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(3.73 2)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M8.91 0.24C8.73 0.08 8.5 0 8.27 0C8.03 0 7.8 0.08 7.62 0.24C1.03 5.81 -0.79 10.69 0.29 14.4C1.36 18.06 5.09 20 8.27 20C11.45 20 15.18 18.06 16.25 14.4C17.33 10.69 15.51 5.81 8.91 0.24Z"/>
  <path transform="translate(4.73 14)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M14.52 0C14.74 4.45 10.72 7 7.27 7C3.82 7 -0.21 4.45 0.01 0"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(4.73 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7.27 0C20.27 11 12.98 18 7.27 18C1.55 18 -5.73 11 7.27 0Z"/>
  <path opacity="0.28" transform="translate(4.73 3)" fill="currentColor" d="M7.27 0C20.27 11 12.98 18 7.27 18C1.55 18 -5.73 11 7.27 0Z"/>
</svg>