broken heart emoji

broken-heart from Streamline Emojis by Streamline · Default · Symbols · CC-BY-4.0 Attribution required.

Name
broken-heart
Set
Streamline Emojis
Style
Default
Category
Symbols
Viewbox
48×48
License
CC BY 4.0

The same emoji in other sets

broken-heartEmoji One (Colored)broken-heartFluent Emojibroken-heartFluent Emoji Flatbroken-heartFluent Emoji High Contrastbroken-heartNoto Emojibroken-heartOpenMojibroken-heartTwitter Emoji

More symbols icons from Streamline Emojis

ballot-box-with-checkbeating-heartbellbell-with-slashchildren-crossingclub-suitcross-markdiamond-suitdouble-exclamation-markexclamation-markgrowing-heartheart-suitheart-with-arrowjapanese-symbol-for-beginnerjokermuted-speakerno-bicyclesno-mobile-phonesno-one-under-eighteenno-smokingrecycling-symbolrestroomrevolving-heartsright-anger-bubble

Use the broken heart emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#ff6242" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="#ff6242" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#ff866e" d="M21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66a13 13 0 0 0 .24 2.49c1.42-6.59 9.31-7 12.71-5.94a14.7 14.7 0 0 1 3.08 1.42Zm9.72-4.84a13.8 13.8 0 0 0-4.59 3.17l-4.41 6.12A21 21 0 0 1 24 13.91a21.1 21.1 0 0 1 7.35-4.7c3.4-1.09 11.29-.65 12.71 5.94a13 13 0 0 0 .24-2.49c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#45413c" d="M11.75 45.4a12.25 1.6 0 1 0 24.5 0a12.25 1.6 0 1 0-24.5 0" opacity=".15"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73h0s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/></svg>

React

import type { SVGProps } from "react";

export function StreamlineEmojisBrokenHeart(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#ff6242" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="#ff6242" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#ff866e" d="M21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66a13 13 0 0 0 .24 2.49c1.42-6.59 9.31-7 12.71-5.94a14.7 14.7 0 0 1 3.08 1.42Zm9.72-4.84a13.8 13.8 0 0 0-4.59 3.17l-4.41 6.12A21 21 0 0 1 24 13.91a21.1 21.1 0 0 1 7.35-4.7c3.4-1.09 11.29-.65 12.71 5.94a13 13 0 0 0 .24-2.49c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#45413c" d="M11.75 45.4a12.25 1.6 0 1 0 24.5 0a12.25 1.6 0 1 0-24.5 0" opacity=".15"/><path fill="none" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="none" stroke="#45413c" strokeLinecap="round" strokeLinejoin="round" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73h0s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="#ff6242" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="#ff6242" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#ff866e" d="M21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66a13 13 0 0 0 .24 2.49c1.42-6.59 9.31-7 12.71-5.94a14.7 14.7 0 0 1 3.08 1.42Zm9.72-4.84a13.8 13.8 0 0 0-4.59 3.17l-4.41 6.12A21 21 0 0 1 24 13.91a21.1 21.1 0 0 1 7.35-4.7c3.4-1.09 11.29-.65 12.71 5.94a13 13 0 0 0 .24-2.49c0-10.17-9.21-10.9-12.95-9.5"/><path fill="#45413c" d="M11.75 45.4a12.25 1.6 0 1 0 24.5 0a12.25 1.6 0 1 0-24.5 0" opacity=".15"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M17.8 30.53a1.63 1.63 0 0 1 .2-1.29l3.61-5.67a2.12 2.12 0 0 0 .17-2L18.56 14a2.13 2.13 0 0 1 .23-2.07L21.63 8a1.06 1.06 0 0 0-.1-1.37a14.4 14.4 0 0 0-4.88-3.45C12.91 1.76 3.7 2.49 3.7 12.66c0 8.29 8.57 17.67 14.58 23.22a.53.53 0 0 0 .87-.54Z"/><path fill="none" stroke="#45413c" stroke-linecap="round" stroke-linejoin="round" d="M31.35 3.16a13.8 13.8 0 0 0-4.59 3.17l-4.33 6a2.13 2.13 0 0 0-.23 2.07l3.27 7.75a1.59 1.59 0 0 1-.12 1.48l-3.77 5.92a2.1 2.1 0 0 0-.25 1.71L24 40.73h0s20.3-15.32 20.3-28.07c0-10.17-9.21-10.9-12.95-9.5"/></svg>
</template>

CSS

.icon-broken-heart {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M17.8%2030.53a1.63%201.63%200%200%201%20.2-1.29l3.61-5.67a2.12%202.12%200%200%200%20.17-2L18.56%2014a2.13%202.13%200%200%201%20.23-2.07L21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66c0%208.29%208.57%2017.67%2014.58%2023.22a.53.53%200%200%200%20.87-.54Z%22%2F%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M31.35%203.16a13.8%2013.8%200%200%200-4.59%203.17l-4.33%206a2.13%202.13%200%200%200-.23%202.07l3.27%207.75a1.59%201.59%200%200%201-.12%201.48l-3.77%205.92a2.1%202.1%200%200%200-.25%201.71L24%2040.73s20.3-15.32%2020.3-28.07c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3Cpath%20fill%3D%22%23ff866e%22%20d%3D%22M21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66a13%2013%200%200%200%20.24%202.49c1.42-6.59%209.31-7%2012.71-5.94a14.7%2014.7%200%200%201%203.08%201.42Zm9.72-4.84a13.8%2013.8%200%200%200-4.59%203.17l-4.41%206.12A21%2021%200%200%201%2024%2013.91a21.1%2021.1%200%200%201%207.35-4.7c3.4-1.09%2011.29-.65%2012.71%205.94a13%2013%200%200%200%20.24-2.49c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3Cpath%20fill%3D%22%2345413c%22%20d%3D%22M11.75%2045.4a12.25%201.6%200%201%200%2024.5%200a12.25%201.6%200%201%200-24.5%200%22%20opacity%3D%22.15%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.8%2030.53a1.63%201.63%200%200%201%20.2-1.29l3.61-5.67a2.12%202.12%200%200%200%20.17-2L18.56%2014a2.13%202.13%200%200%201%20.23-2.07L21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66c0%208.29%208.57%2017.67%2014.58%2023.22a.53.53%200%200%200%20.87-.54Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M31.35%203.16a13.8%2013.8%200%200%200-4.59%203.17l-4.33%206a2.13%202.13%200%200%200-.23%202.07l3.27%207.75a1.59%201.59%200%200%201-.12%201.48l-3.77%205.92a2.1%202.1%200%200%200-.25%201.71L24%2040.73h0s20.3-15.32%2020.3-28.07c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M17.8%2030.53a1.63%201.63%200%200%201%20.2-1.29l3.61-5.67a2.12%202.12%200%200%200%20.17-2L18.56%2014a2.13%202.13%200%200%201%20.23-2.07L21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66c0%208.29%208.57%2017.67%2014.58%2023.22a.53.53%200%200%200%20.87-.54Z%22%2F%3E%3Cpath%20fill%3D%22%23ff6242%22%20d%3D%22M31.35%203.16a13.8%2013.8%200%200%200-4.59%203.17l-4.33%206a2.13%202.13%200%200%200-.23%202.07l3.27%207.75a1.59%201.59%200%200%201-.12%201.48l-3.77%205.92a2.1%202.1%200%200%200-.25%201.71L24%2040.73s20.3-15.32%2020.3-28.07c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3Cpath%20fill%3D%22%23ff866e%22%20d%3D%22M21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66a13%2013%200%200%200%20.24%202.49c1.42-6.59%209.31-7%2012.71-5.94a14.7%2014.7%200%200%201%203.08%201.42Zm9.72-4.84a13.8%2013.8%200%200%200-4.59%203.17l-4.41%206.12A21%2021%200%200%201%2024%2013.91a21.1%2021.1%200%200%201%207.35-4.7c3.4-1.09%2011.29-.65%2012.71%205.94a13%2013%200%200%200%20.24-2.49c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3Cpath%20fill%3D%22%2345413c%22%20d%3D%22M11.75%2045.4a12.25%201.6%200%201%200%2024.5%200a12.25%201.6%200%201%200-24.5%200%22%20opacity%3D%22.15%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.8%2030.53a1.63%201.63%200%200%201%20.2-1.29l3.61-5.67a2.12%202.12%200%200%200%20.17-2L18.56%2014a2.13%202.13%200%200%201%20.23-2.07L21.63%208a1.06%201.06%200%200%200-.1-1.37a14.4%2014.4%200%200%200-4.88-3.45C12.91%201.76%203.7%202.49%203.7%2012.66c0%208.29%208.57%2017.67%2014.58%2023.22a.53.53%200%200%200%20.87-.54Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2345413c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M31.35%203.16a13.8%2013.8%200%200%200-4.59%203.17l-4.33%206a2.13%202.13%200%200%200-.23%202.07l3.27%207.75a1.59%201.59%200%200%201-.12%201.48l-3.77%205.92a2.1%202.1%200%200%200-.25%201.71L24%2040.73h0s20.3-15.32%2020.3-28.07c0-10.17-9.21-10.9-12.95-9.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/streamline-emojis/broken-heart.svg?color=%231a73e8&size=48