Gentleface › Photo & image › droplet-half

droplet-half icon

Droplet half: saturation, color saturation, colour saturation, vibrance. 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="M8.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 10C13 10.636 12.883 11.249 12.649 11.84C12.395 12.482 12.024 13.047 11.536 13.536C11.047 14.024 10.482 14.395 9.84 14.649C9.249 14.883 8.636 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 8.633 3.432 7.194 4.297 5.683C4.622 5.116 5.025 4.508 5.506 3.861C5.786 3.484 6.199 2.957 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.005ZM7.522 2.911C6.985 3.575 6.58 4.091 6.309 4.457C5.852 5.072 5.47 5.647 5.165 6.18C4.388 7.537 4 8.81 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 14L8 2.315C7.864 2.486 7.705 2.684 7.522 2.911Z"/></svg>

React

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

export function DropletHalfIcon(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="M8.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 10C13 10.636 12.883 11.249 12.649 11.84C12.395 12.482 12.024 13.047 11.536 13.536C11.047 14.024 10.482 14.395 9.84 14.649C9.249 14.883 8.636 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 8.633 3.432 7.194 4.297 5.683C4.622 5.116 5.025 4.508 5.506 3.861C5.786 3.484 6.199 2.957 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.005ZM7.522 2.911C6.985 3.575 6.58 4.091 6.309 4.457C5.852 5.072 5.47 5.647 5.165 6.18C4.388 7.537 4 8.81 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 14L8 2.315C7.864 2.486 7.705 2.684 7.522 2.911Z" />
    </svg>
  );
}

Vue

Vue: see /icons/droplet-half.md

Svelte

Svelte: see /icons/droplet-half.md

HTML img

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

CSS

CSS: see /icons/droplet-half.md

Data URL

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

Sprite

Sprite: see /icons/droplet-half.md

SwiftUI

SwiftUI: see /icons/droplet-half.md

Compose

Compose: see /icons/droplet-half.md

Android XML

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

Flutter

Flutter: see /icons/droplet-half.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.

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

Meaning

Use it for

saturation, color saturation, colour saturation, vibrance

Alternatives

exposure: the exposure or brightness of a photo (exposure)

Don’t confuse with

contrast: the half-filled circle means contrast (contrast)

Tags

saturation, color saturation, vibrance, half drop, droplet, tint, color intensity, adjust, photo, filter

Category

Photo & image

Component name

DropletHalfIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 4

blood-drop droplet droplet-alert droplet-off

More photo & image icons

aperture background-remove blur blur-off camera camera-off camera-plus camera-rotate camera-sparkle camera-x collage color-filter exposure focus gif hdr · all photo & image icons

For agents

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

droplet-half icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp