heart broken icon
heart-broken from Line Awesome by Icons8 · Line · Shapes · Apache-2.0 Free for personal and commercial use.
- Name
- heart-broken
- Set
- Line Awesome
- Style
- Line
- Category
- Shapes
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- heart-broken-solid
The same icon in other sets
More shapes icons from Line Awesome
Use the heart broken icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9.5 4C5.362 4 2 7.404 2 11.5c0 1.428.652 2.653 1.252 3.549a10.5 10.5 0 0 0 1.213 1.496L16 28.082l11.535-11.537S30 14.357 30 11.5C30 7.404 26.638 4 22.5 4c-1.57 0-2.973.523-4.11 1.148l-.33.182L16.005 11h3.621L16 17.215V13h-3.547l1.545-7.64l-.672-.346C12.25 4.459 10.952 4 9.5 4m0 2c.778 0 1.496.309 2.207.602L10.007 15H14v6h2.11L22 10.895V9h-3.145l.793-2.184C20.522 6.374 21.486 6 22.5 6c3.042 0 5.5 2.496 5.5 5.5c0 1.545-1.87 3.621-1.87 3.621l-.001.002L16 25.252L5.871 15.123l-.002-.002s-.472-.464-.955-1.185S4 12.272 4 11.5C4 8.496 6.458 6 9.5 6"/></svg>
React
import type { SVGProps } from "react";
export function LaHeartBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9.5 4C5.362 4 2 7.404 2 11.5c0 1.428.652 2.653 1.252 3.549a10.5 10.5 0 0 0 1.213 1.496L16 28.082l11.535-11.537S30 14.357 30 11.5C30 7.404 26.638 4 22.5 4c-1.57 0-2.973.523-4.11 1.148l-.33.182L16.005 11h3.621L16 17.215V13h-3.547l1.545-7.64l-.672-.346C12.25 4.459 10.952 4 9.5 4m0 2c.778 0 1.496.309 2.207.602L10.007 15H14v6h2.11L22 10.895V9h-3.145l.793-2.184C20.522 6.374 21.486 6 22.5 6c3.042 0 5.5 2.496 5.5 5.5c0 1.545-1.87 3.621-1.87 3.621l-.001.002L16 25.252L5.871 15.123l-.002-.002s-.472-.464-.955-1.185S4 12.272 4 11.5C4 8.496 6.458 6 9.5 6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9.5 4C5.362 4 2 7.404 2 11.5c0 1.428.652 2.653 1.252 3.549a10.5 10.5 0 0 0 1.213 1.496L16 28.082l11.535-11.537S30 14.357 30 11.5C30 7.404 26.638 4 22.5 4c-1.57 0-2.973.523-4.11 1.148l-.33.182L16.005 11h3.621L16 17.215V13h-3.547l1.545-7.64l-.672-.346C12.25 4.459 10.952 4 9.5 4m0 2c.778 0 1.496.309 2.207.602L10.007 15H14v6h2.11L22 10.895V9h-3.145l.793-2.184C20.522 6.374 21.486 6 22.5 6c3.042 0 5.5 2.496 5.5 5.5c0 1.545-1.87 3.621-1.87 3.621l-.001.002L16 25.252L5.871 15.123l-.002-.002s-.472-.464-.955-1.185S4 12.272 4 11.5C4 8.496 6.458 6 9.5 6"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.5%204C5.362%204%202%207.404%202%2011.5c0%201.428.652%202.653%201.252%203.549a10.5%2010.5%200%200%200%201.213%201.496L16%2028.082l11.535-11.537S30%2014.357%2030%2011.5C30%207.404%2026.638%204%2022.5%204c-1.57%200-2.973.523-4.11%201.148l-.33.182L16.005%2011h3.621L16%2017.215V13h-3.547l1.545-7.64l-.672-.346C12.25%204.459%2010.952%204%209.5%204m0%202c.778%200%201.496.309%202.207.602L10.007%2015H14v6h2.11L22%2010.895V9h-3.145l.793-2.184C20.522%206.374%2021.486%206%2022.5%206c3.042%200%205.5%202.496%205.5%205.5c0%201.545-1.87%203.621-1.87%203.621l-.001.002L16%2025.252L5.871%2015.123l-.002-.002s-.472-.464-.955-1.185S4%2012.272%204%2011.5C4%208.496%206.458%206%209.5%206%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.5%204C5.362%204%202%207.404%202%2011.5c0%201.428.652%202.653%201.252%203.549a10.5%2010.5%200%200%200%201.213%201.496L16%2028.082l11.535-11.537S30%2014.357%2030%2011.5C30%207.404%2026.638%204%2022.5%204c-1.57%200-2.973.523-4.11%201.148l-.33.182L16.005%2011h3.621L16%2017.215V13h-3.547l1.545-7.64l-.672-.346C12.25%204.459%2010.952%204%209.5%204m0%202c.778%200%201.496.309%202.207.602L10.007%2015H14v6h2.11L22%2010.895V9h-3.145l.793-2.184C20.522%206.374%2021.486%206%2022.5%206c3.042%200%205.5%202.496%205.5%205.5c0%201.545-1.87%203.621-1.87%203.621l-.001.002L16%2025.252L5.871%2015.123l-.002-.002s-.472-.464-.955-1.185S4%2012.272%204%2011.5C4%208.496%206.458%206%209.5%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/heart-broken.svg?color=%231a73e8&size=48
