droplet-heart icon

Droplet heart: droplet heart. 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.478 2.911C8.295 2.684 8.136 2.486 8 2.315C7.864 2.486 7.705 2.684 7.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 14C8.147 14 8.293 13.992 8.44 13.976C8.482 13.971 8.522 13.971 8.561 13.975L8.99 14.404C8.99 14.409 8.991 14.413 8.991 14.418C9.007 14.558 8.972 14.681 8.887 14.787C8.802 14.893 8.69 14.954 8.549 14.97C8.367 14.99 8.184 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.005C8.207 1.025 8.317 1.09 8.4 1.2C8.565 1.42 8.85 1.781 9.255 2.282C9.84 3.005 10.282 3.57 10.58 3.977C11.093 4.676 11.516 5.333 11.85 5.948C11.916 6.069 11.929 6.196 11.89 6.328C11.868 6.402 11.834 6.466 11.786 6.519C11.753 6.543 11.72 6.568 11.688 6.594C11.675 6.605 11.661 6.615 11.648 6.626C11.575 6.666 11.5 6.686 11.423 6.688C11.386 6.655 11.349 6.624 11.312 6.594C11.189 6.496 11.059 6.409 10.922 6.335C10.618 5.785 10.235 5.197 9.774 4.568C9.485 4.175 9.053 3.622 8.478 2.911ZM12.483 14.271C12.169 14.407 11.842 14.475 11.5 14.475C11.158 14.475 10.831 14.407 10.517 14.271C10.228 14.146 9.973 13.973 9.75 13.75L8 12C7.729 11.729 7.5 11.375 7.313 10.938C7.104 10.451 7 9.972 7 9.5C7 8.75 7.229 8.146 7.688 7.688C8.146 7.229 8.75 7 9.5 7C9.979 7 10.375 7.125 10.688 7.375C10.965 7.597 11.236 7.972 11.5 8.5C11.764 7.972 12.035 7.597 12.313 7.375C12.625 7.125 13.021 7 13.5 7C14.25 7 14.854 7.229 15.313 7.688C15.771 8.146 16 8.75 16 9.5C16 9.972 15.896 10.451 15.688 10.938C15.5 11.375 15.271 11.729 15 12L13.25 13.75C13.027 13.973 12.772 14.146 12.483 14.271Z"/></svg>

React

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

export function DropletHeartIcon(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.478 2.911C8.295 2.684 8.136 2.486 8 2.315C7.864 2.486 7.705 2.684 7.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 14C8.147 14 8.293 13.992 8.44 13.976C8.482 13.971 8.522 13.971 8.561 13.975L8.99 14.404C8.99 14.409 8.991 14.413 8.991 14.418C9.007 14.558 8.972 14.681 8.887 14.787C8.802 14.893 8.69 14.954 8.549 14.97C8.367 14.99 8.184 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.005C8.207 1.025 8.317 1.09 8.4 1.2C8.565 1.42 8.85 1.781 9.255 2.282C9.84 3.005 10.282 3.57 10.58 3.977C11.093 4.676 11.516 5.333 11.85 5.948C11.916 6.069 11.929 6.196 11.89 6.328C11.868 6.402 11.834 6.466 11.786 6.519C11.753 6.543 11.72 6.568 11.688 6.594C11.675 6.605 11.661 6.615 11.648 6.626C11.575 6.666 11.5 6.686 11.423 6.688C11.386 6.655 11.349 6.624 11.312 6.594C11.189 6.496 11.059 6.409 10.922 6.335C10.618 5.785 10.235 5.197 9.774 4.568C9.485 4.175 9.053 3.622 8.478 2.911ZM12.483 14.271C12.169 14.407 11.842 14.475 11.5 14.475C11.158 14.475 10.831 14.407 10.517 14.271C10.228 14.146 9.973 13.973 9.75 13.75L8 12C7.729 11.729 7.5 11.375 7.313 10.938C7.104 10.451 7 9.972 7 9.5C7 8.75 7.229 8.146 7.688 7.688C8.146 7.229 8.75 7 9.5 7C9.979 7 10.375 7.125 10.688 7.375C10.965 7.597 11.236 7.972 11.5 8.5C11.764 7.972 12.035 7.597 12.313 7.375C12.625 7.125 13.021 7 13.5 7C14.25 7 14.854 7.229 15.313 7.688C15.771 8.146 16 8.75 16 9.5C16 9.972 15.896 10.451 15.688 10.938C15.5 11.375 15.271 11.729 15 12L13.25 13.75C13.027 13.973 12.772 14.146 12.483 14.271Z" />
    </svg>
  );
}

Vue

Vue: see /icons/droplet-heart.md

Svelte

Svelte: see /icons/droplet-heart.md

HTML img

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

CSS

CSS: see /icons/droplet-heart.md

Data URL

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

Sprite

Sprite: see /icons/droplet-heart.md

SwiftUI

SwiftUI: see /icons/droplet-heart.md

Compose

Compose: see /icons/droplet-heart.md

Android XML

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

Flutter

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

Meaning

Use it for

droplet heart

Example

Blood donation

Built from

droplet + heart

Tags

droplet, water, liquid, humidity, drop, heart

Category

Weather

Component name

DropletHeartIcon

History

2026-11-12 added

Family 17

droplet blood-drop droplet-alert droplet-arrow-down droplet-arrow-up droplet-check droplet-clock droplet-gear droplet-half droplet-lock droplet-minus droplet-off

More weather icons

air-quality avalanche barometer celsius cloud-drizzle cloud-fog cloud-hail cloud-lightning cloud-moon cloud-moon-lightning cloud-moon-rain cloud-moon-snow cloud-moon-wind cloud-rain cloud-rain-heavy cloud-rain-wind · all weather icons

For agents

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

droplet-heart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp