heart circle xmark icon

heart-circle-xmark from Font Awesome Solid by Dave Gandy · Solid · CC-BY-4.0 Attribution required.

Name: heart-circle-xmark
Set: Font Awesome Solid
Style: Solid
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

Related icons in Font Awesome Solid

heart-broken heart-circle-bolt heart-circle-check heart-circle-exclamation heart-circle-minus heart-circle-plus heart-crack heart-music-camera-bolt heart-pulse

Use the heart circle xmark icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m273 151.1l15 20.7l15-20.7C328 116.5 368.2 96 410.9 96C484.4 96 544 155.6 544 229.1v2.6c0 17.6-3.4 35.6-9.5 53.7c-21.8-8.6-45.6-13.4-70.5-13.4c-106 0-192 86-192 192c0 28.5 6.2 55.6 17.4 80H288c-15.5 0-30.8-4.6-43.1-14.1c-73-55.7-212.9-186-212.9-298.2v-2.6C32 155.6 91.6 96 165.1 96c42.7 0 82.9 20.5 107.9 55.1M464 320c79.5 0 144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144m59.3 107.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L464 441.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l36.7 36.7l-36.7 36.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l36.7-36.7l36.7 36.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L486.6 464z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidHeartCircleXmark(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m273 151.1l15 20.7l15-20.7C328 116.5 368.2 96 410.9 96C484.4 96 544 155.6 544 229.1v2.6c0 17.6-3.4 35.6-9.5 53.7c-21.8-8.6-45.6-13.4-70.5-13.4c-106 0-192 86-192 192c0 28.5 6.2 55.6 17.4 80H288c-15.5 0-30.8-4.6-43.1-14.1c-73-55.7-212.9-186-212.9-298.2v-2.6C32 155.6 91.6 96 165.1 96c42.7 0 82.9 20.5 107.9 55.1M464 320c79.5 0 144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144m59.3 107.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L464 441.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l36.7 36.7l-36.7 36.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l36.7-36.7l36.7 36.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L486.6 464z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m273 151.1l15 20.7l15-20.7C328 116.5 368.2 96 410.9 96C484.4 96 544 155.6 544 229.1v2.6c0 17.6-3.4 35.6-9.5 53.7c-21.8-8.6-45.6-13.4-70.5-13.4c-106 0-192 86-192 192c0 28.5 6.2 55.6 17.4 80H288c-15.5 0-30.8-4.6-43.1-14.1c-73-55.7-212.9-186-212.9-298.2v-2.6C32 155.6 91.6 96 165.1 96c42.7 0 82.9 20.5 107.9 55.1M464 320c79.5 0 144 64.5 144 144s-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144m59.3 107.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L464 441.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l36.7 36.7l-36.7 36.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l36.7-36.7l36.7 36.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L486.6 464z"/></svg>
</template>

CSS

.icon-heart-circle-xmark {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m273%20151.1l15%2020.7l15-20.7C328%20116.5%20368.2%2096%20410.9%2096C484.4%2096%20544%20155.6%20544%20229.1v2.6c0%2017.6-3.4%2035.6-9.5%2053.7c-21.8-8.6-45.6-13.4-70.5-13.4c-106%200-192%2086-192%20192c0%2028.5%206.2%2055.6%2017.4%2080H288c-15.5%200-30.8-4.6-43.1-14.1c-73-55.7-212.9-186-212.9-298.2v-2.6C32%20155.6%2091.6%2096%20165.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1M464%20320c79.5%200%20144%2064.5%20144%20144s-64.5%20144-144%20144s-144-64.5-144-144s64.5-144%20144-144m59.3%20107.3c6.2-6.2%206.2-16.4%200-22.6s-16.4-6.2-22.6%200L464%20441.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6%200s-6.2%2016.4%200%2022.6l36.7%2036.7l-36.7%2036.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200l36.7-36.7l36.7%2036.7c6.2%206.2%2016.4%206.2%2022.6%200s6.2-16.4%200-22.6L486.6%20464z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m273%20151.1l15%2020.7l15-20.7C328%20116.5%20368.2%2096%20410.9%2096C484.4%2096%20544%20155.6%20544%20229.1v2.6c0%2017.6-3.4%2035.6-9.5%2053.7c-21.8-8.6-45.6-13.4-70.5-13.4c-106%200-192%2086-192%20192c0%2028.5%206.2%2055.6%2017.4%2080H288c-15.5%200-30.8-4.6-43.1-14.1c-73-55.7-212.9-186-212.9-298.2v-2.6C32%20155.6%2091.6%2096%20165.1%2096c42.7%200%2082.9%2020.5%20107.9%2055.1M464%20320c79.5%200%20144%2064.5%20144%20144s-64.5%20144-144%20144s-144-64.5-144-144s64.5-144%20144-144m59.3%20107.3c6.2-6.2%206.2-16.4%200-22.6s-16.4-6.2-22.6%200L464%20441.4l-36.7-36.7c-6.2-6.2-16.4-6.2-22.6%200s-6.2%2016.4%200%2022.6l36.7%2036.7l-36.7%2036.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200l36.7-36.7l36.7%2036.7c6.2%206.2%2016.4%206.2%2022.6%200s6.2-16.4%200-22.6L486.6%20464z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/heart-circle-xmark.svg?color=%231a73e8&size=48