hearts icon

Hearts: hearts, lives, multiple likes. 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="M1.992 7.931C1.718 7.656 1.489 7.304 1.305 6.875C1.102 6.401 1 5.93 1 5.462C1 4.989 1.084 4.536 1.252 4.104C1.411 3.695 1.634 3.331 1.921 3.012C2.205 2.697 2.526 2.452 2.886 2.276C3.262 2.092 3.646 2 4.038 2C4.395 2 4.757 2.056 5.123 2.167C5.46 2.27 5.784 2.414 6.094 2.6C6.393 2.78 6.659 2.985 6.891 3.217C6.929 3.255 6.965 3.293 7 3.331C7.035 3.293 7.071 3.255 7.109 3.217C7.341 2.985 7.607 2.78 7.906 2.6C8.216 2.414 8.54 2.27 8.877 2.167C9.243 2.056 9.605 2 9.962 2C10.354 2 10.738 2.092 11.114 2.276C11.474 2.452 11.795 2.697 12.079 3.012C12.366 3.331 12.589 3.695 12.748 4.104C12.916 4.536 13 4.989 13 5.462C13 5.964 12.884 6.467 12.653 6.97C12.632 7.015 12.607 7.055 12.577 7.09C12.368 7.108 12.162 7.145 11.958 7.2C11.847 7.141 11.77 7.053 11.727 6.936C11.68 6.809 11.685 6.681 11.744 6.553C11.915 6.182 12 5.818 12 5.462C12 5.114 11.939 4.782 11.816 4.466C11.701 4.171 11.541 3.909 11.335 3.681C11.139 3.462 10.918 3.293 10.674 3.174C10.437 3.058 10.2 3 9.962 3C9.443 3 8.929 3.153 8.421 3.458C8.191 3.595 7.99 3.751 7.816 3.924C7.652 4.089 7.529 4.252 7.447 4.416C7.398 4.515 7.323 4.59 7.224 4.639C7.1 4.701 6.973 4.71 6.842 4.666C6.711 4.623 6.615 4.539 6.553 4.416C6.471 4.252 6.348 4.089 6.184 3.924C6.01 3.751 5.809 3.595 5.579 3.458C5.071 3.153 4.557 3 4.038 3C3.8 3 3.563 3.058 3.326 3.174C3.082 3.293 2.861 3.462 2.665 3.681C2.459 3.909 2.299 4.171 2.184 4.466C2.061 4.782 2 5.114 2 5.462C2 5.793 2.075 6.133 2.224 6.481C2.357 6.792 2.516 7.04 2.7 7.223L6.001 10.524C6.006 10.802 6.047 11.079 6.123 11.353L6.122 11.353C6.023 11.453 5.905 11.503 5.769 11.503C5.633 11.503 5.515 11.453 5.415 11.353L1.992 7.931ZM11 15C10.683 15 10.412 14.888 10.187 14.663L7.685 12.162C7.493 11.97 7.334 11.726 7.209 11.432C7.07 11.108 7 10.784 7 10.462C7 10.138 7.058 9.828 7.173 9.532C7.282 9.251 7.435 9.001 7.633 8.781C7.829 8.563 8.052 8.393 8.302 8.271C8.567 8.142 8.838 8.077 9.115 8.077C9.596 8.077 10.064 8.213 10.517 8.485C10.7 8.595 10.861 8.714 11 8.843C11.139 8.714 11.3 8.595 11.483 8.485C11.936 8.213 12.404 8.077 12.885 8.077C13.162 8.077 13.433 8.142 13.698 8.271C13.948 8.393 14.171 8.563 14.367 8.781C14.565 9.001 14.718 9.251 14.827 9.532C14.942 9.828 15 10.138 15 10.462C15 10.784 14.93 11.108 14.791 11.432C14.666 11.726 14.507 11.969 14.316 12.161L14.316 12.162L11.813 14.663C11.588 14.888 11.317 15 11 15ZM13.872 11.039C13.957 10.84 14 10.648 14 10.462C14 10.066 13.874 9.729 13.623 9.45C13.514 9.328 13.392 9.235 13.258 9.169C13.132 9.108 13.008 9.077 12.885 9.077C12.588 9.077 12.292 9.165 11.998 9.342C11.728 9.504 11.545 9.682 11.447 9.877C11.398 9.977 11.323 10.052 11.223 10.101C11.1 10.163 10.972 10.172 10.842 10.128C10.711 10.084 10.614 10.001 10.553 9.877C10.455 9.682 10.272 9.504 10.002 9.342C9.708 9.165 9.412 9.077 9.115 9.077C8.992 9.077 8.868 9.108 8.742 9.169C8.608 9.235 8.486 9.328 8.377 9.45C8.126 9.729 8 10.066 8 10.462C8 10.648 8.043 10.84 8.128 11.039C8.203 11.215 8.291 11.354 8.391 11.454L10.894 13.956C10.923 13.985 10.959 14 11 14C11.041 14 11.077 13.985 11.106 13.956L13.608 11.455C13.708 11.354 13.797 11.215 13.872 11.039Z"/></svg>

React

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

export function HeartsIcon(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="M1.992 7.931C1.718 7.656 1.489 7.304 1.305 6.875C1.102 6.401 1 5.93 1 5.462C1 4.989 1.084 4.536 1.252 4.104C1.411 3.695 1.634 3.331 1.921 3.012C2.205 2.697 2.526 2.452 2.886 2.276C3.262 2.092 3.646 2 4.038 2C4.395 2 4.757 2.056 5.123 2.167C5.46 2.27 5.784 2.414 6.094 2.6C6.393 2.78 6.659 2.985 6.891 3.217C6.929 3.255 6.965 3.293 7 3.331C7.035 3.293 7.071 3.255 7.109 3.217C7.341 2.985 7.607 2.78 7.906 2.6C8.216 2.414 8.54 2.27 8.877 2.167C9.243 2.056 9.605 2 9.962 2C10.354 2 10.738 2.092 11.114 2.276C11.474 2.452 11.795 2.697 12.079 3.012C12.366 3.331 12.589 3.695 12.748 4.104C12.916 4.536 13 4.989 13 5.462C13 5.964 12.884 6.467 12.653 6.97C12.632 7.015 12.607 7.055 12.577 7.09C12.368 7.108 12.162 7.145 11.958 7.2C11.847 7.141 11.77 7.053 11.727 6.936C11.68 6.809 11.685 6.681 11.744 6.553C11.915 6.182 12 5.818 12 5.462C12 5.114 11.939 4.782 11.816 4.466C11.701 4.171 11.541 3.909 11.335 3.681C11.139 3.462 10.918 3.293 10.674 3.174C10.437 3.058 10.2 3 9.962 3C9.443 3 8.929 3.153 8.421 3.458C8.191 3.595 7.99 3.751 7.816 3.924C7.652 4.089 7.529 4.252 7.447 4.416C7.398 4.515 7.323 4.59 7.224 4.639C7.1 4.701 6.973 4.71 6.842 4.666C6.711 4.623 6.615 4.539 6.553 4.416C6.471 4.252 6.348 4.089 6.184 3.924C6.01 3.751 5.809 3.595 5.579 3.458C5.071 3.153 4.557 3 4.038 3C3.8 3 3.563 3.058 3.326 3.174C3.082 3.293 2.861 3.462 2.665 3.681C2.459 3.909 2.299 4.171 2.184 4.466C2.061 4.782 2 5.114 2 5.462C2 5.793 2.075 6.133 2.224 6.481C2.357 6.792 2.516 7.04 2.7 7.223L6.001 10.524C6.006 10.802 6.047 11.079 6.123 11.353L6.122 11.353C6.023 11.453 5.905 11.503 5.769 11.503C5.633 11.503 5.515 11.453 5.415 11.353L1.992 7.931ZM11 15C10.683 15 10.412 14.888 10.187 14.663L7.685 12.162C7.493 11.97 7.334 11.726 7.209 11.432C7.07 11.108 7 10.784 7 10.462C7 10.138 7.058 9.828 7.173 9.532C7.282 9.251 7.435 9.001 7.633 8.781C7.829 8.563 8.052 8.393 8.302 8.271C8.567 8.142 8.838 8.077 9.115 8.077C9.596 8.077 10.064 8.213 10.517 8.485C10.7 8.595 10.861 8.714 11 8.843C11.139 8.714 11.3 8.595 11.483 8.485C11.936 8.213 12.404 8.077 12.885 8.077C13.162 8.077 13.433 8.142 13.698 8.271C13.948 8.393 14.171 8.563 14.367 8.781C14.565 9.001 14.718 9.251 14.827 9.532C14.942 9.828 15 10.138 15 10.462C15 10.784 14.93 11.108 14.791 11.432C14.666 11.726 14.507 11.969 14.316 12.161L14.316 12.162L11.813 14.663C11.588 14.888 11.317 15 11 15ZM13.872 11.039C13.957 10.84 14 10.648 14 10.462C14 10.066 13.874 9.729 13.623 9.45C13.514 9.328 13.392 9.235 13.258 9.169C13.132 9.108 13.008 9.077 12.885 9.077C12.588 9.077 12.292 9.165 11.998 9.342C11.728 9.504 11.545 9.682 11.447 9.877C11.398 9.977 11.323 10.052 11.223 10.101C11.1 10.163 10.972 10.172 10.842 10.128C10.711 10.084 10.614 10.001 10.553 9.877C10.455 9.682 10.272 9.504 10.002 9.342C9.708 9.165 9.412 9.077 9.115 9.077C8.992 9.077 8.868 9.108 8.742 9.169C8.608 9.235 8.486 9.328 8.377 9.45C8.126 9.729 8 10.066 8 10.462C8 10.648 8.043 10.84 8.128 11.039C8.203 11.215 8.291 11.354 8.391 11.454L10.894 13.956C10.923 13.985 10.959 14 11 14C11.041 14 11.077 13.985 11.106 13.956L13.608 11.455C13.708 11.354 13.797 11.215 13.872 11.039Z" />
    </svg>
  );
}

Vue

Vue: see /icons/hearts.md

Svelte

Svelte: see /icons/hearts.md

HTML img

HTML img: see /icons/hearts.md

CSS

CSS: see /icons/hearts.md

Data URL

Data URL: see /icons/hearts.md

Sprite

Sprite: see /icons/hearts.md

SwiftUI

SwiftUI: see /icons/hearts.md

Compose

Compose: see /icons/hearts.md

Android XML

Android XML: see /icons/hearts.md

Flutter

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

hearts, lives, multiple likes

Tags

hearts, love, likes, lives, favorite, valentine

Category

Social & emotions

Component name

HeartsIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

More social & emotions icons

balloon bookmark bookmark-alert bookmark-check bookmark-heart bookmark-link bookmark-off bookmark-pencil bookmark-plus bookmark-question bookmark-search bookmark-sparkle bookmark-star bookmark-sync bookmark-tag bookmark-x · all social & emotions icons

For agents

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

hearts icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More social & emotions icons

For agents

hearts icon