broken heart emoji
broken-heart from OpenMoji by OpenMoji · Default · Smileys Emotion · CC-BY-SA-4.0 Attribution required.
- Name
- broken-heart
- Set
- OpenMoji
- Style
- Default
- Category
- Smileys Emotion
- Viewbox
- 72×72
- License
- CC BY-SA 4.0
The same emoji in other sets
More smileys emotion icons from OpenMoji
alienalien-monsteranger-symbolangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebeaming-face-with-smiling-eyesbeating-heartblack-heartblue-heartbrown-heartcat-with-tears-of-joycat-with-wry-smileclown-facecold-facecollisionconfounded-faceconfused-facecowboy-hat-facecracking-facecrying-catcrying-face
Use the broken heart emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72"><defs><path id="SVGTTJSXbHO" d="M49.566 15.61c-4.322 0-8.187 2.36-10.189 6.18L36 29.679l7 6.017l-6 8.424L42 51l-3.585 9.162l20.462-26.237a11.43 11.43 0 0 0 2.213-6.793c0-6.354-5.17-11.523-11.524-11.523"/><path id="SVGUDJcZdQb" d="m37.1 50.984l-5.054-6.961l5.939-8.046l-7.046-5.946s1.622-7.549 1.455-7.894c-1.944-4.026-5.918-6.528-10.371-6.528c-6.354 0-11.523 5.17-11.523 11.523c0 2.116.578 4.185 1.672 5.981l.66.974l20.462 26.23l.35-.45z"/></defs><g fill="#ea5a47"><use href="#SVGTTJSXbHO"/><use href="#SVGUDJcZdQb"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"><use href="#SVGTTJSXbHO" stroke-linecap="round" stroke-linejoin="round"/><use href="#SVGUDJcZdQb"/></g></svg>
React
import type { SVGProps } from "react";
export function OpenmojiBrokenHeart(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72"><defs><path id="SVGTTJSXbHO" d="M49.566 15.61c-4.322 0-8.187 2.36-10.189 6.18L36 29.679l7 6.017l-6 8.424L42 51l-3.585 9.162l20.462-26.237a11.43 11.43 0 0 0 2.213-6.793c0-6.354-5.17-11.523-11.524-11.523"/><path id="SVGUDJcZdQb" d="m37.1 50.984l-5.054-6.961l5.939-8.046l-7.046-5.946s1.622-7.549 1.455-7.894c-1.944-4.026-5.918-6.528-10.371-6.528c-6.354 0-11.523 5.17-11.523 11.523c0 2.116.578 4.185 1.672 5.981l.66.974l20.462 26.23l.35-.45z"/></defs><g fill="#ea5a47"><use href="#SVGTTJSXbHO"/><use href="#SVGUDJcZdQb"/></g><g fill="none" stroke="#000" strokeMiterlimit="10" strokeWidth="2"><use href="#SVGTTJSXbHO" strokeLinecap="round" strokeLinejoin="round"/><use href="#SVGUDJcZdQb"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72"><defs><path id="SVGTTJSXbHO" d="M49.566 15.61c-4.322 0-8.187 2.36-10.189 6.18L36 29.679l7 6.017l-6 8.424L42 51l-3.585 9.162l20.462-26.237a11.43 11.43 0 0 0 2.213-6.793c0-6.354-5.17-11.523-11.524-11.523"/><path id="SVGUDJcZdQb" d="m37.1 50.984l-5.054-6.961l5.939-8.046l-7.046-5.946s1.622-7.549 1.455-7.894c-1.944-4.026-5.918-6.528-10.371-6.528c-6.354 0-11.523 5.17-11.523 11.523c0 2.116.578 4.185 1.672 5.981l.66.974l20.462 26.23l.35-.45z"/></defs><g fill="#ea5a47"><use href="#SVGTTJSXbHO"/><use href="#SVGUDJcZdQb"/></g><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"><use href="#SVGTTJSXbHO" stroke-linecap="round" stroke-linejoin="round"/><use href="#SVGUDJcZdQb"/></g></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%2072%2072%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGTTJSXbHO%22%20d%3D%22M49.566%2015.61c-4.322%200-8.187%202.36-10.189%206.18L36%2029.679l7%206.017l-6%208.424L42%2051l-3.585%209.162l20.462-26.237a11.43%2011.43%200%200%200%202.213-6.793c0-6.354-5.17-11.523-11.524-11.523%22%2F%3E%3Cpath%20id%3D%22SVGUDJcZdQb%22%20d%3D%22m37.1%2050.984l-5.054-6.961l5.939-8.046l-7.046-5.946s1.622-7.549%201.455-7.894c-1.944-4.026-5.918-6.528-10.371-6.528c-6.354%200-11.523%205.17-11.523%2011.523c0%202.116.578%204.185%201.672%205.981l.66.974l20.462%2026.23l.35-.45z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23ea5a47%22%3E%3Cuse%20href%3D%22%23SVGTTJSXbHO%22%2F%3E%3Cuse%20href%3D%22%23SVGUDJcZdQb%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%3E%3Cuse%20href%3D%22%23SVGTTJSXbHO%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cuse%20href%3D%22%23SVGUDJcZdQb%22%2F%3E%3C%2Fg%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%2072%2072%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGTTJSXbHO%22%20d%3D%22M49.566%2015.61c-4.322%200-8.187%202.36-10.189%206.18L36%2029.679l7%206.017l-6%208.424L42%2051l-3.585%209.162l20.462-26.237a11.43%2011.43%200%200%200%202.213-6.793c0-6.354-5.17-11.523-11.524-11.523%22%2F%3E%3Cpath%20id%3D%22SVGUDJcZdQb%22%20d%3D%22m37.1%2050.984l-5.054-6.961l5.939-8.046l-7.046-5.946s1.622-7.549%201.455-7.894c-1.944-4.026-5.918-6.528-10.371-6.528c-6.354%200-11.523%205.17-11.523%2011.523c0%202.116.578%204.185%201.672%205.981l.66.974l20.462%2026.23l.35-.45z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23ea5a47%22%3E%3Cuse%20href%3D%22%23SVGTTJSXbHO%22%2F%3E%3Cuse%20href%3D%22%23SVGUDJcZdQb%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%3E%3Cuse%20href%3D%22%23SVGTTJSXbHO%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cuse%20href%3D%22%23SVGUDJcZdQb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/openmoji/broken-heart.svg?color=%231a73e8&size=48
