heart slash circle icon
heart-slash-circle-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.
- Name
- heart-slash-circle-fill
- Set
- Framework7 Icons
- Style
- Fill
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
Use the heart slash circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m8.719-11.531L14.266 17.969a1.047 1.047 0 0 1 0-1.5c.398-.399 1.078-.399 1.5 0l22.43 22.406c.421.398.398 1.102 0 1.5a1.06 1.06 0 0 1-1.477 0m-14.227-22.43c2.508 0 4.547 1.453 5.719 3.633c1.172-2.18 3.187-3.633 5.719-3.633c4.054 0 6.96 3.047 6.96 7.29c0 3.445-2.039 6.773-4.64 9.562l-16.383-16.36a7.3 7.3 0 0 1 2.625-.492M16.211 22L32.43 38.219c-1.055.843-2.086 1.547-3.047 2.18c-.375.257-.82.515-1.172.515s-.82-.258-1.195-.516c-4.852-3.14-11.485-8.906-11.485-15.164c0-1.195.234-2.297.68-3.234"/></svg>
React
import type { SVGProps } from "react";
export function F7HeartSlashCircleFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m8.719-11.531L14.266 17.969a1.047 1.047 0 0 1 0-1.5c.398-.399 1.078-.399 1.5 0l22.43 22.406c.421.398.398 1.102 0 1.5a1.06 1.06 0 0 1-1.477 0m-14.227-22.43c2.508 0 4.547 1.453 5.719 3.633c1.172-2.18 3.187-3.633 5.719-3.633c4.054 0 6.96 3.047 6.96 7.29c0 3.445-2.039 6.773-4.64 9.562l-16.383-16.36a7.3 7.3 0 0 1 2.625-.492M16.211 22L32.43 38.219c-1.055.843-2.086 1.547-3.047 2.18c-.375.257-.82.515-1.172.515s-.82-.258-1.195-.516c-4.852-3.14-11.485-8.906-11.485-15.164c0-1.195.234-2.297.68-3.234"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m8.719-11.531L14.266 17.969a1.047 1.047 0 0 1 0-1.5c.398-.399 1.078-.399 1.5 0l22.43 22.406c.421.398.398 1.102 0 1.5a1.06 1.06 0 0 1-1.477 0m-14.227-22.43c2.508 0 4.547 1.453 5.719 3.633c1.172-2.18 3.187-3.633 5.719-3.633c4.054 0 6.96 3.047 6.96 7.29c0 3.445-2.039 6.773-4.64 9.562l-16.383-16.36a7.3 7.3 0 0 1 2.625-.492M16.211 22L32.43 38.219c-1.055.843-2.086 1.547-3.047 2.18c-.375.257-.82.515-1.172.515s-.82-.258-1.195-.516c-4.852-3.14-11.485-8.906-11.485-15.164c0-1.195.234-2.297.68-3.234"/></svg> </template>
CSS
.icon-heart-slash-circle-fill {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m8.719-11.531L14.266%2017.969a1.047%201.047%200%200%201%200-1.5c.398-.399%201.078-.399%201.5%200l22.43%2022.406c.421.398.398%201.102%200%201.5a1.06%201.06%200%200%201-1.477%200m-14.227-22.43c2.508%200%204.547%201.453%205.719%203.633c1.172-2.18%203.187-3.633%205.719-3.633c4.054%200%206.96%203.047%206.96%207.29c0%203.445-2.039%206.773-4.64%209.562l-16.383-16.36a7.3%207.3%200%200%201%202.625-.492M16.211%2022L32.43%2038.219c-1.055.843-2.086%201.547-3.047%202.18c-.375.257-.82.515-1.172.515s-.82-.258-1.195-.516c-4.852-3.14-11.485-8.906-11.485-15.164c0-1.195.234-2.297.68-3.234%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m8.719-11.531L14.266%2017.969a1.047%201.047%200%200%201%200-1.5c.398-.399%201.078-.399%201.5%200l22.43%2022.406c.421.398.398%201.102%200%201.5a1.06%201.06%200%200%201-1.477%200m-14.227-22.43c2.508%200%204.547%201.453%205.719%203.633c1.172-2.18%203.187-3.633%205.719-3.633c4.054%200%206.96%203.047%206.96%207.29c0%203.445-2.039%206.773-4.64%209.562l-16.383-16.36a7.3%207.3%200%200%201%202.625-.492M16.211%2022L32.43%2038.219c-1.055.843-2.086%201.547-3.047%202.18c-.375.257-.82.515-1.172.515s-.82-.258-1.195-.516c-4.852-3.14-11.485-8.906-11.485-15.164c0-1.195.234-2.297.68-3.234%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/heart-slash-circle-fill.svg?color=%231a73e8&size=48
