hearts icon
hearts-broken from Solar by 480 Design · Broken · Like · CC-BY-4.0 Attribution required.
- Name
- hearts-broken
- Set
- Solar
- Style
- Broken
- Category
- Like
- Viewbox
- 24×24
- License
- CC BY 4.0
5 other variants in Solar
The same icon in other sets
More like icons from Solar
Use the hearts icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.52401 17C7.34949 17.6794 8.19243 18.3044 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C12.6939 20.5 13.3878 20.1289 14.0945 19.6283M14.0945 19.6283C14.3462 19.8137 14.5939 19.993 14.8291 20.1692C15.4001 20.5971 15.95 21 16.5 21C17.05 21 17.6 20.5971 18.171 20.1692C18.4357 19.9709 18.7161 19.7689 19.0001 19.5584M21.5091 17C21.8135 16.4363 22 15.798 22 15.0595C22 14.2243 21.6735 13.4689 21.1474 12.9177C21.1311 12.9007 21.1147 12.8838 21.098 12.8672C20.0141 11.7831 18.1368 11.5419 16.5 13.1584C14.8381 11.5171 12.9283 11.7909 11.8528 12.9177C11.3266 13.4689 11.0001 14.2243 11.0001 15.0595C11.0001 17.2323 12.6149 18.5377 14.0945 19.6283M3 13.0516C2.38338 11.9242 2 10.639 2 9.1371C2 4.27416 7.50016 0.825464 12 5.50063C16.4998 0.825464 22 4.27416 22 9.1371C22 10.5577 21.657 11.7844 21.098 12.8672"/></svg>
React
import type { SVGProps } from "react";
export function SolarHeartsBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M6.52401 17C7.34949 17.6794 8.19243 18.3044 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C12.6939 20.5 13.3878 20.1289 14.0945 19.6283M14.0945 19.6283C14.3462 19.8137 14.5939 19.993 14.8291 20.1692C15.4001 20.5971 15.95 21 16.5 21C17.05 21 17.6 20.5971 18.171 20.1692C18.4357 19.9709 18.7161 19.7689 19.0001 19.5584M21.5091 17C21.8135 16.4363 22 15.798 22 15.0595C22 14.2243 21.6735 13.4689 21.1474 12.9177C21.1311 12.9007 21.1147 12.8838 21.098 12.8672C20.0141 11.7831 18.1368 11.5419 16.5 13.1584C14.8381 11.5171 12.9283 11.7909 11.8528 12.9177C11.3266 13.4689 11.0001 14.2243 11.0001 15.0595C11.0001 17.2323 12.6149 18.5377 14.0945 19.6283M3 13.0516C2.38338 11.9242 2 10.639 2 9.1371C2 4.27416 7.50016 0.825464 12 5.50063C16.4998 0.825464 22 4.27416 22 9.1371C22 10.5577 21.657 11.7844 21.098 12.8672"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.52401 17C7.34949 17.6794 8.19243 18.3044 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C12.6939 20.5 13.3878 20.1289 14.0945 19.6283M14.0945 19.6283C14.3462 19.8137 14.5939 19.993 14.8291 20.1692C15.4001 20.5971 15.95 21 16.5 21C17.05 21 17.6 20.5971 18.171 20.1692C18.4357 19.9709 18.7161 19.7689 19.0001 19.5584M21.5091 17C21.8135 16.4363 22 15.798 22 15.0595C22 14.2243 21.6735 13.4689 21.1474 12.9177C21.1311 12.9007 21.1147 12.8838 21.098 12.8672C20.0141 11.7831 18.1368 11.5419 16.5 13.1584C14.8381 11.5171 12.9283 11.7909 11.8528 12.9177C11.3266 13.4689 11.0001 14.2243 11.0001 15.0595C11.0001 17.2323 12.6149 18.5377 14.0945 19.6283M3 13.0516C2.38338 11.9242 2 10.639 2 9.1371C2 4.27416 7.50016 0.825464 12 5.50063C16.4998 0.825464 22 4.27416 22 9.1371C22 10.5577 21.657 11.7844 21.098 12.8672"/></svg> </template>
CSS
.icon-hearts-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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6.52401%2017C7.34949%2017.6794%208.19243%2018.3044%208.96173%2018.9109C10%2019.7294%2011%2020.5%2012%2020.5C12.6939%2020.5%2013.3878%2020.1289%2014.0945%2019.6283M14.0945%2019.6283C14.3462%2019.8137%2014.5939%2019.993%2014.8291%2020.1692C15.4001%2020.5971%2015.95%2021%2016.5%2021C17.05%2021%2017.6%2020.5971%2018.171%2020.1692C18.4357%2019.9709%2018.7161%2019.7689%2019.0001%2019.5584M21.5091%2017C21.8135%2016.4363%2022%2015.798%2022%2015.0595C22%2014.2243%2021.6735%2013.4689%2021.1474%2012.9177C21.1311%2012.9007%2021.1147%2012.8838%2021.098%2012.8672C20.0141%2011.7831%2018.1368%2011.5419%2016.5%2013.1584C14.8381%2011.5171%2012.9283%2011.7909%2011.8528%2012.9177C11.3266%2013.4689%2011.0001%2014.2243%2011.0001%2015.0595C11.0001%2017.2323%2012.6149%2018.5377%2014.0945%2019.6283M3%2013.0516C2.38338%2011.9242%202%2010.639%202%209.1371C2%204.27416%207.50016%200.825464%2012%205.50063C16.4998%200.825464%2022%204.27416%2022%209.1371C22%2010.5577%2021.657%2011.7844%2021.098%2012.8672%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6.52401%2017C7.34949%2017.6794%208.19243%2018.3044%208.96173%2018.9109C10%2019.7294%2011%2020.5%2012%2020.5C12.6939%2020.5%2013.3878%2020.1289%2014.0945%2019.6283M14.0945%2019.6283C14.3462%2019.8137%2014.5939%2019.993%2014.8291%2020.1692C15.4001%2020.5971%2015.95%2021%2016.5%2021C17.05%2021%2017.6%2020.5971%2018.171%2020.1692C18.4357%2019.9709%2018.7161%2019.7689%2019.0001%2019.5584M21.5091%2017C21.8135%2016.4363%2022%2015.798%2022%2015.0595C22%2014.2243%2021.6735%2013.4689%2021.1474%2012.9177C21.1311%2012.9007%2021.1147%2012.8838%2021.098%2012.8672C20.0141%2011.7831%2018.1368%2011.5419%2016.5%2013.1584C14.8381%2011.5171%2012.9283%2011.7909%2011.8528%2012.9177C11.3266%2013.4689%2011.0001%2014.2243%2011.0001%2015.0595C11.0001%2017.2323%2012.6149%2018.5377%2014.0945%2019.6283M3%2013.0516C2.38338%2011.9242%202%2010.639%202%209.1371C2%204.27416%207.50016%200.825464%2012%205.50063C16.4998%200.825464%2022%204.27416%2022%209.1371C22%2010.5577%2021.657%2011.7844%2021.098%2012.8672%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/hearts-broken.svg?color=%231a73e8&size=48
