Gentleface › People & accounts › user-heart

user-heart icon

User heart: liked by, who liked. 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="M4.732 2.732C4.976 2.488 5.259 2.303 5.58 2.176C5.875 2.059 6.182 2 6.5 2C6.818 2 7.125 2.059 7.42 2.176C7.741 2.303 8.024 2.488 8.268 2.732C8.512 2.976 8.697 3.259 8.824 3.58C8.941 3.875 9 4.182 9 4.5C9 4.818 8.941 5.125 8.824 5.42C8.716 5.695 8.564 5.942 8.369 6.16C8.284 6.186 8.2 6.215 8.118 6.246C7.696 6.408 7.328 6.642 7.014 6.947C6.846 6.982 6.675 7 6.5 7C6.182 7 5.875 6.941 5.58 6.824C5.259 6.697 4.976 6.512 4.732 6.268C4.488 6.024 4.303 5.741 4.176 5.42C4.059 5.125 4 4.818 4 4.5C4 4.182 4.059 3.875 4.176 3.58C4.303 3.259 4.488 2.976 4.732 2.732ZM5.439 5.561C5.586 5.707 5.755 5.818 5.948 5.895C6.125 5.965 6.309 6 6.5 6C6.691 6 6.875 5.965 7.052 5.895C7.245 5.818 7.414 5.707 7.561 5.561C7.707 5.414 7.818 5.245 7.895 5.052C7.965 4.875 8 4.691 8 4.5C8 4.309 7.965 4.125 7.895 3.948C7.818 3.755 7.707 3.586 7.561 3.439C7.414 3.293 7.245 3.182 7.052 3.105C6.875 3.035 6.691 3 6.5 3C6.309 3 6.125 3.035 5.948 3.105C5.755 3.182 5.586 3.293 5.439 3.439C5.293 3.586 5.182 3.755 5.105 3.948C5.035 4.125 5 4.309 5 4.5C5 4.691 5.035 4.875 5.105 5.052C5.182 5.245 5.293 5.414 5.439 5.561ZM12.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.271ZM6.006 9.725C5.995 9.778 5.974 9.829 5.945 9.879C5.874 9.997 5.772 10.074 5.638 10.108C5.272 10.201 4.929 10.349 4.611 10.553C4.274 10.769 3.983 11.035 3.737 11.351C3.491 11.667 3.305 12.015 3.179 12.395C3.06 12.754 3 13.122 3 13.5L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 13.5C2 13.014 2.077 12.54 2.23 12.079C2.393 11.591 2.632 11.144 2.948 10.737C3.264 10.331 3.638 9.989 4.071 9.712C4.481 9.449 4.921 9.258 5.392 9.139C5.528 9.104 5.655 9.121 5.772 9.191C5.889 9.26 5.965 9.363 6 9.5L6 9.502C6 9.576 6.002 9.651 6.006 9.725Z"/></svg>

React

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

export function UserHeartIcon(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="M4.732 2.732C4.976 2.488 5.259 2.303 5.58 2.176C5.875 2.059 6.182 2 6.5 2C6.818 2 7.125 2.059 7.42 2.176C7.741 2.303 8.024 2.488 8.268 2.732C8.512 2.976 8.697 3.259 8.824 3.58C8.941 3.875 9 4.182 9 4.5C9 4.818 8.941 5.125 8.824 5.42C8.716 5.695 8.564 5.942 8.369 6.16C8.284 6.186 8.2 6.215 8.118 6.246C7.696 6.408 7.328 6.642 7.014 6.947C6.846 6.982 6.675 7 6.5 7C6.182 7 5.875 6.941 5.58 6.824C5.259 6.697 4.976 6.512 4.732 6.268C4.488 6.024 4.303 5.741 4.176 5.42C4.059 5.125 4 4.818 4 4.5C4 4.182 4.059 3.875 4.176 3.58C4.303 3.259 4.488 2.976 4.732 2.732ZM5.439 5.561C5.586 5.707 5.755 5.818 5.948 5.895C6.125 5.965 6.309 6 6.5 6C6.691 6 6.875 5.965 7.052 5.895C7.245 5.818 7.414 5.707 7.561 5.561C7.707 5.414 7.818 5.245 7.895 5.052C7.965 4.875 8 4.691 8 4.5C8 4.309 7.965 4.125 7.895 3.948C7.818 3.755 7.707 3.586 7.561 3.439C7.414 3.293 7.245 3.182 7.052 3.105C6.875 3.035 6.691 3 6.5 3C6.309 3 6.125 3.035 5.948 3.105C5.755 3.182 5.586 3.293 5.439 3.439C5.293 3.586 5.182 3.755 5.105 3.948C5.035 4.125 5 4.309 5 4.5C5 4.691 5.035 4.875 5.105 5.052C5.182 5.245 5.293 5.414 5.439 5.561ZM12.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.271ZM6.006 9.725C5.995 9.778 5.974 9.829 5.945 9.879C5.874 9.997 5.772 10.074 5.638 10.108C5.272 10.201 4.929 10.349 4.611 10.553C4.274 10.769 3.983 11.035 3.737 11.351C3.491 11.667 3.305 12.015 3.179 12.395C3.06 12.754 3 13.122 3 13.5L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 13.5C2 13.014 2.077 12.54 2.23 12.079C2.393 11.591 2.632 11.144 2.948 10.737C3.264 10.331 3.638 9.989 4.071 9.712C4.481 9.449 4.921 9.258 5.392 9.139C5.528 9.104 5.655 9.121 5.772 9.191C5.889 9.26 5.965 9.363 6 9.5L6 9.502C6 9.576 6.002 9.651 6.006 9.725Z" />
    </svg>
  );
}

Vue

Vue: see /icons/user-heart.md

Svelte

Svelte: see /icons/user-heart.md

HTML img

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

CSS

CSS: see /icons/user-heart.md

Data URL

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

Sprite

Sprite: see /icons/user-heart.md

SwiftUI

SwiftUI: see /icons/user-heart.md

Compose

Compose: see /icons/user-heart.md

Android XML

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

Flutter

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

liked by, who liked

Example

People who liked this post

Alternatives

heart: the like action itself
user-star: favorite contacts

Also fits

favorite contact: people who liked something

Built from

user + heart

Tags

person, profile, avatar, heart

Category

People & accounts

Component name

UserHeartIcon

History

2026-10-15 added

Family 38

user user-alert user-arrow-right user-ban user-check user-circle user-clock user-gear user-guest user-info user-key user-link

More people & accounts icons

address-book baby baby-carriage contact-card gender-female gender-male gender-transgender id-badge id-card id-card-check log-in log-out non-binary user-standing · all people & accounts icons

For agents

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

user-heart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp