heart broken icon
heart-broken from Reicon by REICON · Outline · Like · MIT Free for personal and commercial use.
- Name
- heart-broken
- Set
- Reicon
- Style
- Outline
- Category
- Like
- Viewbox
- 24×24
- License
- MIT
2 other variants in Reicon
The same icon in other sets
All heart broken icons →More like icons from Reicon
Use the heart broken icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.624 4.424C3.965 5.182 2.75 6.986 2.75 9.137c0 2.197.9 3.891 2.188 5.343c1.063 1.196 2.349 2.188 3.603 3.154q.448.345.885.688c.526.415.995.778 1.448 1.043q.31.18.568.275l.727-2.91l-1.7-1.7a.75.75 0 0 1-.038-1.018l2.466-2.878l-2.833-2.024a.75.75 0 0 1-.235-.946l1.256-2.51c-1.943-1.792-3.946-1.922-5.46-1.23M12.62 5.94l-1.162 2.322l2.979 2.128a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712l-.683 2.73l.081-.047c.453-.265.922-.628 1.448-1.043q.437-.344.885-.687c1.254-.968 2.54-1.959 3.603-3.155c1.289-1.452 2.188-3.146 2.188-5.343c0-2.15-1.215-3.955-2.874-4.713c-1.592-.727-3.723-.546-5.757 1.516M12 4.46C9.688 2.39 7.099 2.1 5 3.059C2.786 4.074 1.25 6.426 1.25 9.138c0 2.665 1.11 4.699 2.567 6.339c1.166 1.313 2.593 2.412 3.854 3.382q.43.33.826.642c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59s1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16q.396-.312.826-.642c1.26-.97 2.688-2.07 3.854-3.382c1.457-1.64 2.567-3.674 2.567-6.339c0-2.712-1.535-5.064-3.75-6.077c-2.099-.96-4.688-.67-7 1.399" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function ReiconHeartBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M5.624 4.424C3.965 5.182 2.75 6.986 2.75 9.137c0 2.197.9 3.891 2.188 5.343c1.063 1.196 2.349 2.188 3.603 3.154q.448.345.885.688c.526.415.995.778 1.448 1.043q.31.18.568.275l.727-2.91l-1.7-1.7a.75.75 0 0 1-.038-1.018l2.466-2.878l-2.833-2.024a.75.75 0 0 1-.235-.946l1.256-2.51c-1.943-1.792-3.946-1.922-5.46-1.23M12.62 5.94l-1.162 2.322l2.979 2.128a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712l-.683 2.73l.081-.047c.453-.265.922-.628 1.448-1.043q.437-.344.885-.687c1.254-.968 2.54-1.959 3.603-3.155c1.289-1.452 2.188-3.146 2.188-5.343c0-2.15-1.215-3.955-2.874-4.713c-1.592-.727-3.723-.546-5.757 1.516M12 4.46C9.688 2.39 7.099 2.1 5 3.059C2.786 4.074 1.25 6.426 1.25 9.138c0 2.665 1.11 4.699 2.567 6.339c1.166 1.313 2.593 2.412 3.854 3.382q.43.33.826.642c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59s1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16q.396-.312.826-.642c1.26-.97 2.688-2.07 3.854-3.382c1.457-1.64 2.567-3.674 2.567-6.339c0-2.712-1.535-5.064-3.75-6.077c-2.099-.96-4.688-.67-7 1.399" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M5.624 4.424C3.965 5.182 2.75 6.986 2.75 9.137c0 2.197.9 3.891 2.188 5.343c1.063 1.196 2.349 2.188 3.603 3.154q.448.345.885.688c.526.415.995.778 1.448 1.043q.31.18.568.275l.727-2.91l-1.7-1.7a.75.75 0 0 1-.038-1.018l2.466-2.878l-2.833-2.024a.75.75 0 0 1-.235-.946l1.256-2.51c-1.943-1.792-3.946-1.922-5.46-1.23M12.62 5.94l-1.162 2.322l2.979 2.128a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712l-.683 2.73l.081-.047c.453-.265.922-.628 1.448-1.043q.437-.344.885-.687c1.254-.968 2.54-1.959 3.603-3.155c1.289-1.452 2.188-3.146 2.188-5.343c0-2.15-1.215-3.955-2.874-4.713c-1.592-.727-3.723-.546-5.757 1.516M12 4.46C9.688 2.39 7.099 2.1 5 3.059C2.786 4.074 1.25 6.426 1.25 9.138c0 2.665 1.11 4.699 2.567 6.339c1.166 1.313 2.593 2.412 3.854 3.382q.43.33.826.642c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59s1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16q.396-.312.826-.642c1.26-.97 2.688-2.07 3.854-3.382c1.457-1.64 2.567-3.674 2.567-6.339c0-2.712-1.535-5.064-3.75-6.077c-2.099-.96-4.688-.67-7 1.399" clip-rule="evenodd"/></svg> </template>
CSS
.icon-heart-broken {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.624%204.424C3.965%205.182%202.75%206.986%202.75%209.137c0%202.197.9%203.891%202.188%205.343c1.063%201.196%202.349%202.188%203.603%203.154q.448.345.885.688c.526.415.995.778%201.448%201.043q.31.18.568.275l.727-2.91l-1.7-1.7a.75.75%200%200%201-.038-1.018l2.466-2.878l-2.833-2.024a.75.75%200%200%201-.235-.946l1.256-2.51c-1.943-1.792-3.946-1.922-5.46-1.23M12.62%205.94l-1.162%202.322l2.979%202.128a.75.75%200%200%201%20.133%201.098l-2.548%202.973l1.51%201.509a.75.75%200%200%201%20.197.712l-.683%202.73l.081-.047c.453-.265.922-.628%201.448-1.043q.437-.344.885-.687c1.254-.968%202.54-1.959%203.603-3.155c1.289-1.452%202.188-3.146%202.188-5.343c0-2.15-1.215-3.955-2.874-4.713c-1.592-.727-3.723-.546-5.757%201.516M12%204.46C9.688%202.39%207.099%202.1%205%203.059C2.786%204.074%201.25%206.426%201.25%209.138c0%202.665%201.11%204.699%202.567%206.339c1.166%201.313%202.593%202.412%203.854%203.382q.43.33.826.642c.513.404%201.063.834%201.62%201.16s1.193.59%201.883.59s1.326-.265%201.883-.59c.558-.326%201.107-.756%201.62-1.16q.396-.312.826-.642c1.26-.97%202.688-2.07%203.854-3.382c1.457-1.64%202.567-3.674%202.567-6.339c0-2.712-1.535-5.064-3.75-6.077c-2.099-.96-4.688-.67-7%201.399%22%20clip-rule%3D%22evenodd%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.624%204.424C3.965%205.182%202.75%206.986%202.75%209.137c0%202.197.9%203.891%202.188%205.343c1.063%201.196%202.349%202.188%203.603%203.154q.448.345.885.688c.526.415.995.778%201.448%201.043q.31.18.568.275l.727-2.91l-1.7-1.7a.75.75%200%200%201-.038-1.018l2.466-2.878l-2.833-2.024a.75.75%200%200%201-.235-.946l1.256-2.51c-1.943-1.792-3.946-1.922-5.46-1.23M12.62%205.94l-1.162%202.322l2.979%202.128a.75.75%200%200%201%20.133%201.098l-2.548%202.973l1.51%201.509a.75.75%200%200%201%20.197.712l-.683%202.73l.081-.047c.453-.265.922-.628%201.448-1.043q.437-.344.885-.687c1.254-.968%202.54-1.959%203.603-3.155c1.289-1.452%202.188-3.146%202.188-5.343c0-2.15-1.215-3.955-2.874-4.713c-1.592-.727-3.723-.546-5.757%201.516M12%204.46C9.688%202.39%207.099%202.1%205%203.059C2.786%204.074%201.25%206.426%201.25%209.138c0%202.665%201.11%204.699%202.567%206.339c1.166%201.313%202.593%202.412%203.854%203.382q.43.33.826.642c.513.404%201.063.834%201.62%201.16s1.193.59%201.883.59s1.326-.265%201.883-.59c.558-.326%201.107-.756%201.62-1.16q.396-.312.826-.642c1.26-.97%202.688-2.07%203.854-3.382c1.457-1.64%202.567-3.674%202.567-6.339c0-2.712-1.535-5.064-3.75-6.077c-2.099-.96-4.688-.67-7%201.399%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/reicon/heart-broken.svg?color=%231a73e8&size=48
