Heart icon

A free heart 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: Essential Icons
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: heart, love, affection, emotion, valentine, care, romance

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10 18C11 18 20 12.98 20 5.94C20 0.51 13.16 -2.34 10 2.43C6.83 -2.35 0 0.5 0 5.94C0 12.98 9 18 10 18Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(1 2)" fill="currentColor" d="M11 1.84C9.15 -0.07 6.61 -0.4 4.46 0.42C2 1.35 0 3.77 0 6.94C0 10.89 2.51 14.15 4.96 16.35C6.2 17.47 7.47 18.35 8.51 18.97C9.02 19.27 9.49 19.51 9.88 19.68C10.23 19.84 10.61 20 11 20C11.39 20 11.77 19.84 12.12 19.68C12.51 19.51 12.98 19.27 13.49 18.97C14.53 18.35 15.8 17.47 17.04 16.35C19.49 14.15 22 10.89 22 6.94C22 3.78 20 1.35 17.54 0.42C15.39 -0.39 12.85 -0.07 11 1.84Z"/>
</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(2 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10 18C11 18 20 12.98 20 5.94C20 0.51 13.16 -2.34 10 2.43C6.83 -2.35 0 0.5 0 5.94C0 12.98 9 18 10 18Z"/>
  <path transform="translate(2 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 5.94C0 0.5 6.83 -2.35 10 2.43C13.16 -2.34 20 0.51 20 5.94"/>
</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(1 2)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M11 1.84C9.15 -0.07 6.61 -0.4 4.46 0.42C2 1.35 0 3.77 0 6.94C0 10.89 2.51 14.15 4.96 16.35C6.2 17.47 7.47 18.35 8.51 18.97C9.02 19.27 9.49 19.51 9.88 19.68C10.23 19.84 10.61 20 11 20C11.39 20 11.77 19.84 12.12 19.68C12.51 19.51 12.98 19.27 13.49 18.97C14.53 18.35 15.8 17.47 17.04 16.35C19.49 14.15 22 10.89 22 6.94C22 3.78 20 1.35 17.54 0.42C15.39 -0.39 12.85 -0.07 11 1.84Z"/>
  <path transform="translate(2 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 5.94C0 0.5 6.83 -2.35 10 2.43C13.16 -2.34 20 0.51 20 5.94"/>
</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(2 3)" fill="currentColor" d="M10 18C11 18 20 12.98 20 5.94C20 0.51 13.16 -2.34 10 2.43C6.83 -2.35 0 0.5 0 5.94C0 12.98 9 18 10 18Z"/>
  <path transform="translate(2 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 5.94C0 12.98 9 18 10 18C11 18 20 12.98 20 5.94C20 0.51 13.16 -2.34 10 2.43C6.83 -2.35 0 0.5 0 5.94Z"/>
</svg>