user heart icon
user-heart-broken from Solar by 480 Design · Broken · Users · CC-BY-4.0 Attribution required.
- Name
- user-heart-broken
- Set
- Solar
- Style
- Broken
- Category
- Users
- Viewbox
- 24×24
- License
- CC BY 4.0
5 other variants in Solar
The same icon in other sets
More users icons from Solar
user-block-bolduser-block-rounded-bolduser-bolduser-check-bolduser-check-rounded-bolduser-circle-bolduser-cross-bolduser-cross-rounded-bolduser-hand-up-bolduser-hands-bolduser-heart-rounded-bolduser-id-bolduser-minus-bolduser-minus-rounded-bolduser-plus-bolduser-plus-rounded-bolduser-rounded-bolduser-speak-bolduser-speak-rounded-boldusers-group-rounded-boldusers-group-two-rounded-bold
Use the user heart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="6" r="4"/><path stroke-linejoin="round" d="M16 9.69673C16 10.6812 17.1649 11.7213 18.0429 12.3656C18.4626 12.6736 18.6725 12.8276 19 12.8276C19.3275 12.8276 19.5374 12.6736 19.9571 12.3656C20.8352 11.7214 22 10.6812 22 9.69672C22 8.0235 20.35 7.39879 19 8.69135C17.65 7.39879 16 8.0235 16 9.69673Z"/><path stroke-linecap="round" d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634"/></g></svg>
React
import type { SVGProps } from "react";
export function SolarUserHeartBroken(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="10" cy="6" r="4"/><path strokeLinejoin="round" d="M16 9.69673C16 10.6812 17.1649 11.7213 18.0429 12.3656C18.4626 12.6736 18.6725 12.8276 19 12.8276C19.3275 12.8276 19.5374 12.6736 19.9571 12.3656C20.8352 11.7214 22 10.6812 22 9.69672C22 8.0235 20.35 7.39879 19 8.69135C17.65 7.39879 16 8.0235 16 9.69673Z"/><path strokeLinecap="round" d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="6" r="4"/><path stroke-linejoin="round" d="M16 9.69673C16 10.6812 17.1649 11.7213 18.0429 12.3656C18.4626 12.6736 18.6725 12.8276 19 12.8276C19.3275 12.8276 19.5374 12.6736 19.9571 12.3656C20.8352 11.7214 22 10.6812 22 9.69672C22 8.0235 20.35 7.39879 19 8.69135C17.65 7.39879 16 8.0235 16 9.69673Z"/><path stroke-linecap="round" d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634"/></g></svg> </template>
CSS
.icon-user-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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M16%209.69673C16%2010.6812%2017.1649%2011.7213%2018.0429%2012.3656C18.4626%2012.6736%2018.6725%2012.8276%2019%2012.8276C19.3275%2012.8276%2019.5374%2012.6736%2019.9571%2012.3656C20.8352%2011.7214%2022%2010.6812%2022%209.69672C22%208.0235%2020.35%207.39879%2019%208.69135C17.65%207.39879%2016%208.0235%2016%209.69673Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M17.9975%2018C18%2017.8358%2018%2017.669%2018%2017.5C18%2015.0147%2014.4183%2013%2010%2013C5.58172%2013%202%2015.0147%202%2017.5C2%2019.9853%202%2022%2010%2022C12.231%2022%2013.8398%2021.8433%2015%2021.5634%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M16%209.69673C16%2010.6812%2017.1649%2011.7213%2018.0429%2012.3656C18.4626%2012.6736%2018.6725%2012.8276%2019%2012.8276C19.3275%2012.8276%2019.5374%2012.6736%2019.9571%2012.3656C20.8352%2011.7214%2022%2010.6812%2022%209.69672C22%208.0235%2020.35%207.39879%2019%208.69135C17.65%207.39879%2016%208.0235%2016%209.69673Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M17.9975%2018C18%2017.8358%2018%2017.669%2018%2017.5C18%2015.0147%2014.4183%2013%2010%2013C5.58172%2013%202%2015.0147%202%2017.5C2%2019.9853%202%2022%2010%2022C12.231%2022%2013.8398%2021.8433%2015%2021.5634%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/user-heart-broken.svg?color=%231a73e8&size=48
