heart broken icon
heart-broken from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- heart-broken
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
The same icon in other sets
Related icons in IonIcons
Use the heart broken icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M229 288c1-18 0-38 8-55 2-5 1-10 1-15-4-21-14-40-15-60 0-1.39 1.004-4.771 1.005-6.157-3.216 2.234-7.607 4.024-11.005 5.157-20 6-17.51 2.573-34.51 13.573l-11.933 7.228c16.343-17.939 38.528-24.781 56.525-38.714.194-15.438.858-30.677 3.137-45.84C185.61 53.496 121.785 54.268 82.123 95.57c-45.497 47.344-45.497 124.101 0 171.445l152.849 159.096c-.085-10.656-.443-21.176-1.972-31.111-6-36-4-71-4-107z" fill="currentColor"/><path d="M322 301c-11-26-33-44-63-50-.85 0-1.879-.543-2.936-1.319-.023.107-.041.213-.064.319-11 48-23 94-21 142 0 12.227 3.983 25.117 3.833 38.131L256 448l104-108.25c-14.847-10.479-29.572-21.129-38-38.75z" fill="currentColor"/><path d="M429.874 95.57c-40.426-42.094-105.989-42.094-146.408 0L264 115.403c.075 13.175.213 26.202-3 38.597-2 10-19 19-16 31 3.003 13.213 8.166 25.705 10.732 38.559C271.014 232.084 284.771 242.896 297 256c22.801 26.766 37.747 57.459 65.283 81.371l67.591-70.355c45.501-47.345 45.501-124.102 0-171.446z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function IonHeartBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M229 288c1-18 0-38 8-55 2-5 1-10 1-15-4-21-14-40-15-60 0-1.39 1.004-4.771 1.005-6.157-3.216 2.234-7.607 4.024-11.005 5.157-20 6-17.51 2.573-34.51 13.573l-11.933 7.228c16.343-17.939 38.528-24.781 56.525-38.714.194-15.438.858-30.677 3.137-45.84C185.61 53.496 121.785 54.268 82.123 95.57c-45.497 47.344-45.497 124.101 0 171.445l152.849 159.096c-.085-10.656-.443-21.176-1.972-31.111-6-36-4-71-4-107z" fill="currentColor"/><path d="M322 301c-11-26-33-44-63-50-.85 0-1.879-.543-2.936-1.319-.023.107-.041.213-.064.319-11 48-23 94-21 142 0 12.227 3.983 25.117 3.833 38.131L256 448l104-108.25c-14.847-10.479-29.572-21.129-38-38.75z" fill="currentColor"/><path d="M429.874 95.57c-40.426-42.094-105.989-42.094-146.408 0L264 115.403c.075 13.175.213 26.202-3 38.597-2 10-19 19-16 31 3.003 13.213 8.166 25.705 10.732 38.559C271.014 232.084 284.771 242.896 297 256c22.801 26.766 37.747 57.459 65.283 81.371l67.591-70.355c45.501-47.345 45.501-124.102 0-171.446z" fill="currentColor"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M229 288c1-18 0-38 8-55 2-5 1-10 1-15-4-21-14-40-15-60 0-1.39 1.004-4.771 1.005-6.157-3.216 2.234-7.607 4.024-11.005 5.157-20 6-17.51 2.573-34.51 13.573l-11.933 7.228c16.343-17.939 38.528-24.781 56.525-38.714.194-15.438.858-30.677 3.137-45.84C185.61 53.496 121.785 54.268 82.123 95.57c-45.497 47.344-45.497 124.101 0 171.445l152.849 159.096c-.085-10.656-.443-21.176-1.972-31.111-6-36-4-71-4-107z" fill="currentColor"/><path d="M322 301c-11-26-33-44-63-50-.85 0-1.879-.543-2.936-1.319-.023.107-.041.213-.064.319-11 48-23 94-21 142 0 12.227 3.983 25.117 3.833 38.131L256 448l104-108.25c-14.847-10.479-29.572-21.129-38-38.75z" fill="currentColor"/><path d="M429.874 95.57c-40.426-42.094-105.989-42.094-146.408 0L264 115.403c.075 13.175.213 26.202-3 38.597-2 10-19 19-16 31 3.003 13.213 8.166 25.705 10.732 38.559C271.014 232.084 284.771 242.896 297 256c22.801 26.766 37.747 57.459 65.283 81.371l67.591-70.355c45.501-47.345 45.501-124.102 0-171.446z" fill="currentColor"/></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%20512%20512%22%3E%3Cpath%20d%3D%22M229%20288c1-18%200-38%208-55%202-5%201-10%201-15-4-21-14-40-15-60%200-1.39%201.004-4.771%201.005-6.157-3.216%202.234-7.607%204.024-11.005%205.157-20%206-17.51%202.573-34.51%2013.573l-11.933%207.228c16.343-17.939%2038.528-24.781%2056.525-38.714.194-15.438.858-30.677%203.137-45.84C185.61%2053.496%20121.785%2054.268%2082.123%2095.57c-45.497%2047.344-45.497%20124.101%200%20171.445l152.849%20159.096c-.085-10.656-.443-21.176-1.972-31.111-6-36-4-71-4-107z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M322%20301c-11-26-33-44-63-50-.85%200-1.879-.543-2.936-1.319-.023.107-.041.213-.064.319-11%2048-23%2094-21%20142%200%2012.227%203.983%2025.117%203.833%2038.131L256%20448l104-108.25c-14.847-10.479-29.572-21.129-38-38.75z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M429.874%2095.57c-40.426-42.094-105.989-42.094-146.408%200L264%20115.403c.075%2013.175.213%2026.202-3%2038.597-2%2010-19%2019-16%2031%203.003%2013.213%208.166%2025.705%2010.732%2038.559C271.014%20232.084%20284.771%20242.896%20297%20256c22.801%2026.766%2037.747%2057.459%2065.283%2081.371l67.591-70.355c45.501-47.345%2045.501-124.102%200-171.446z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M229%20288c1-18%200-38%208-55%202-5%201-10%201-15-4-21-14-40-15-60%200-1.39%201.004-4.771%201.005-6.157-3.216%202.234-7.607%204.024-11.005%205.157-20%206-17.51%202.573-34.51%2013.573l-11.933%207.228c16.343-17.939%2038.528-24.781%2056.525-38.714.194-15.438.858-30.677%203.137-45.84C185.61%2053.496%20121.785%2054.268%2082.123%2095.57c-45.497%2047.344-45.497%20124.101%200%20171.445l152.849%20159.096c-.085-10.656-.443-21.176-1.972-31.111-6-36-4-71-4-107z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M322%20301c-11-26-33-44-63-50-.85%200-1.879-.543-2.936-1.319-.023.107-.041.213-.064.319-11%2048-23%2094-21%20142%200%2012.227%203.983%2025.117%203.833%2038.131L256%20448l104-108.25c-14.847-10.479-29.572-21.129-38-38.75z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M429.874%2095.57c-40.426-42.094-105.989-42.094-146.408%200L264%20115.403c.075%2013.175.213%2026.202-3%2038.597-2%2010-19%2019-16%2031%203.003%2013.213%208.166%2025.705%2010.732%2038.559C271.014%20232.084%20284.771%20242.896%20297%20256c22.801%2026.766%2037.747%2057.459%2065.283%2081.371l67.591-70.355c45.501-47.345%2045.501-124.102%200-171.446z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/heart-broken.svg?color=%231a73e8&size=48
