heart broken icon
heart-broken from Font Awesome Solid by Dave Gandy · Solid · Objects · CC-BY-4.0 Attribution required.
- Name
- heart-broken
- Set
- Font Awesome Solid
- Style
- Solid
- Category
- Objects
- Viewbox
- 640×640
- License
- CC BY 4.0
The same icon in other sets
More objects icons from Font Awesome Solid
Use the heart broken icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M197.1 96c17.3 0 34.2 3.4 49.9 9.7l54.8 85.2l-75.4 75.4c-1.5 1.5-2.4 3.6-2.3 5.8s1 4.2 2.6 5.7l112 104c2.9 2.7 7.4 2.9 10.5.3s3.8-7 1.7-10.4l-60.4-98.1l90.7-75.6c2.6-2.1 3.5-5.7 2.4-8.8l-23.2-64.6c23.2-18.3 52.2-28.6 82.5-28.6C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96"/></svg>
React
import type { SVGProps } from "react";
export function Fa7SolidHeartBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M197.1 96c17.3 0 34.2 3.4 49.9 9.7l54.8 85.2l-75.4 75.4c-1.5 1.5-2.4 3.6-2.3 5.8s1 4.2 2.6 5.7l112 104c2.9 2.7 7.4 2.9 10.5.3s3.8-7 1.7-10.4l-60.4-98.1l90.7-75.6c2.6-2.1 3.5-5.7 2.4-8.8l-23.2-64.6c23.2-18.3 52.2-28.6 82.5-28.6C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M197.1 96c17.3 0 34.2 3.4 49.9 9.7l54.8 85.2l-75.4 75.4c-1.5 1.5-2.4 3.6-2.3 5.8s1 4.2 2.6 5.7l112 104c2.9 2.7 7.4 2.9 10.5.3s3.8-7 1.7-10.4l-60.4-98.1l90.7-75.6c2.6-2.1 3.5-5.7 2.4-8.8l-23.2-64.6c23.2-18.3 52.2-28.6 82.5-28.6C516.4 96 576 155.6 576 229.1v2.6c0 112.2-139.9 242.5-212.9 298.2c-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C203.9 474.2 64 343.9 64 231.7v-2.6C64 155.6 123.6 96 197.1 96"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M197.1%2096c17.3%200%2034.2%203.4%2049.9%209.7l54.8%2085.2l-75.4%2075.4c-1.5%201.5-2.4%203.6-2.3%205.8s1%204.2%202.6%205.7l112%20104c2.9%202.7%207.4%202.9%2010.5.3s3.8-7%201.7-10.4l-60.4-98.1l90.7-75.6c2.6-2.1%203.5-5.7%202.4-8.8l-23.2-64.6c23.2-18.3%2052.2-28.6%2082.5-28.6C516.4%2096%20576%20155.6%20576%20229.1v2.6c0%20112.2-139.9%20242.5-212.9%20298.2c-12.4%209.4-27.6%2014.1-43.1%2014.1s-30.8-4.6-43.1-14.1C203.9%20474.2%2064%20343.9%2064%20231.7v-2.6C64%20155.6%20123.6%2096%20197.1%2096%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M197.1%2096c17.3%200%2034.2%203.4%2049.9%209.7l54.8%2085.2l-75.4%2075.4c-1.5%201.5-2.4%203.6-2.3%205.8s1%204.2%202.6%205.7l112%20104c2.9%202.7%207.4%202.9%2010.5.3s3.8-7%201.7-10.4l-60.4-98.1l90.7-75.6c2.6-2.1%203.5-5.7%202.4-8.8l-23.2-64.6c23.2-18.3%2052.2-28.6%2082.5-28.6C516.4%2096%20576%20155.6%20576%20229.1v2.6c0%20112.2-139.9%20242.5-212.9%20298.2c-12.4%209.4-27.6%2014.1-43.1%2014.1s-30.8-4.6-43.1-14.1C203.9%20474.2%2064%20343.9%2064%20231.7v-2.6C64%20155.6%20123.6%2096%20197.1%2096%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/heart-broken.svg?color=%231a73e8&size=48
