heart broken icon
heart-broken-bold from Solar by 480 Design · Bold · Like · CC-BY-4.0 Attribution required.
- Name
- heart-broken-bold
- Set
- Solar
- Style
- Bold
- Category
- Like
- Viewbox
- 24×24
- License
- CC BY 4.0
2 other variants in Solar
The same icon in other sets
More like icons from Solar
dislike-boldheart-angle-boldheart-boldheart-crack-boldheart-lock-boldheart-shine-boldheart-unlock-boldhearts-boldlike-boldmedal-ribbon-boldmedal-ribbon-star-boldmedal-ribbons-star-boldmedal-star-boldmedal-star-circle-boldmedal-star-square-boldstar-boldstar-off-boldstar-shine-boldheart-pulse-2-boldheart-pulse-bold
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" d="M8.106 18.247C5.298 16.083 2 13.542 2 9.137c0-4.6 4.923-7.935 9.264-4.323L9.81 8.204a.75.75 0 0 0 .253.906l2.833 2.024l-2.466 2.878a.75.75 0 0 0 .039 1.018l1.7 1.7l-.91 3.64c-.756-.253-1.516-.843-2.298-1.46q-.417-.326-.856-.663"/><path fill="currentColor" d="M12.812 20.345c.732-.265 1.469-.837 2.226-1.434q.417-.328.856-.664C18.702 16.083 22 13.542 22 9.137c0-4.515-4.741-7.81-9.02-4.518l-1.553 3.622l3.009 2.149a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712z"/></svg>
React
import type { SVGProps } from "react";
export function SolarHeartBrokenBold(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" d="M8.106 18.247C5.298 16.083 2 13.542 2 9.137c0-4.6 4.923-7.935 9.264-4.323L9.81 8.204a.75.75 0 0 0 .253.906l2.833 2.024l-2.466 2.878a.75.75 0 0 0 .039 1.018l1.7 1.7l-.91 3.64c-.756-.253-1.516-.843-2.298-1.46q-.417-.326-.856-.663"/><path fill="currentColor" d="M12.812 20.345c.732-.265 1.469-.837 2.226-1.434q.417-.328.856-.664C18.702 16.083 22 13.542 22 9.137c0-4.515-4.741-7.81-9.02-4.518l-1.553 3.622l3.009 2.149a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8.106 18.247C5.298 16.083 2 13.542 2 9.137c0-4.6 4.923-7.935 9.264-4.323L9.81 8.204a.75.75 0 0 0 .253.906l2.833 2.024l-2.466 2.878a.75.75 0 0 0 .039 1.018l1.7 1.7l-.91 3.64c-.756-.253-1.516-.843-2.298-1.46q-.417-.326-.856-.663"/><path fill="currentColor" d="M12.812 20.345c.732-.265 1.469-.837 2.226-1.434q.417-.328.856-.664C18.702 16.083 22 13.542 22 9.137c0-4.515-4.741-7.81-9.02-4.518l-1.553 3.622l3.009 2.149a.75.75 0 0 1 .133 1.098l-2.548 2.973l1.51 1.509a.75.75 0 0 1 .197.712z"/></svg> </template>
CSS
.icon-heart-broken-bold {
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%20d%3D%22M8.106%2018.247C5.298%2016.083%202%2013.542%202%209.137c0-4.6%204.923-7.935%209.264-4.323L9.81%208.204a.75.75%200%200%200%20.253.906l2.833%202.024l-2.466%202.878a.75.75%200%200%200%20.039%201.018l1.7%201.7l-.91%203.64c-.756-.253-1.516-.843-2.298-1.46q-.417-.326-.856-.663%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.812%2020.345c.732-.265%201.469-.837%202.226-1.434q.417-.328.856-.664C18.702%2016.083%2022%2013.542%2022%209.137c0-4.515-4.741-7.81-9.02-4.518l-1.553%203.622l3.009%202.149a.75.75%200%200%201%20.133%201.098l-2.548%202.973l1.51%201.509a.75.75%200%200%201%20.197.712z%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%20d%3D%22M8.106%2018.247C5.298%2016.083%202%2013.542%202%209.137c0-4.6%204.923-7.935%209.264-4.323L9.81%208.204a.75.75%200%200%200%20.253.906l2.833%202.024l-2.466%202.878a.75.75%200%200%200%20.039%201.018l1.7%201.7l-.91%203.64c-.756-.253-1.516-.843-2.298-1.46q-.417-.326-.856-.663%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.812%2020.345c.732-.265%201.469-.837%202.226-1.434q.417-.328.856-.664C18.702%2016.083%2022%2013.542%2022%209.137c0-4.515-4.741-7.81-9.02-4.518l-1.553%203.622l3.009%202.149a.75.75%200%200%201%20.133%201.098l-2.548%202.973l1.51%201.509a.75.75%200%200%201%20.197.712z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/heart-broken-bold.svg?color=%231a73e8&size=48
