heart dislike circle icon

2 other variants in IonIcons

Related icons in IonIcons

Use the heart dislike circle icon

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="M333.2 297.69c18.28-23.39 27.06-47.43 26.79-73.37c-.31-31.06-25.22-56.33-55.53-56.33c-20.4 0-35 10.64-44.11 20.42a5.93 5.93 0 0 1-8.7 0c-9.11-9.78-23.71-20.42-44.11-20.42L206 168a4 4 0 0 0-2.75 6.84l124 123.21a3.92 3.92 0 0 0 5.95-.36M158.84 221a4 4 0 0 0-6.82 2.72v.64c-.28 27.1 9.31 52.13 29.3 76.5c9.38 11.44 26.4 29.73 65.7 56.41a15.93 15.93 0 0 0 18 0c5.15-3.49 9.9-6.84 14.31-10a4 4 0 0 0 .46-6.07ZM336 368a15.92 15.92 0 0 1-11.31-4.69l-176-176a16 16 0 0 1 22.62-22.62l176 176A16 16 0 0 1 336 368"/></svg>

import type { SVGProps } from "react";

export function IonHeartDislikeCircleOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeMiterlimit="10" strokeWidth="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="M333.2 297.69c18.28-23.39 27.06-47.43 26.79-73.37c-.31-31.06-25.22-56.33-55.53-56.33c-20.4 0-35 10.64-44.11 20.42a5.93 5.93 0 0 1-8.7 0c-9.11-9.78-23.71-20.42-44.11-20.42L206 168a4 4 0 0 0-2.75 6.84l124 123.21a3.92 3.92 0 0 0 5.95-.36M158.84 221a4 4 0 0 0-6.82 2.72v.64c-.28 27.1 9.31 52.13 29.3 76.5c9.38 11.44 26.4 29.73 65.7 56.41a15.93 15.93 0 0 0 18 0c5.15-3.49 9.9-6.84 14.31-10a4 4 0 0 0 .46-6.07ZM336 368a15.92 15.92 0 0 1-11.31-4.69l-176-176a16 16 0 0 1 22.62-22.62l176 176A16 16 0 0 1 336 368"/></svg>
  );
}

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="M333.2 297.69c18.28-23.39 27.06-47.43 26.79-73.37c-.31-31.06-25.22-56.33-55.53-56.33c-20.4 0-35 10.64-44.11 20.42a5.93 5.93 0 0 1-8.7 0c-9.11-9.78-23.71-20.42-44.11-20.42L206 168a4 4 0 0 0-2.75 6.84l124 123.21a3.92 3.92 0 0 0 5.95-.36M158.84 221a4 4 0 0 0-6.82 2.72v.64c-.28 27.1 9.31 52.13 29.3 76.5c9.38 11.44 26.4 29.73 65.7 56.41a15.93 15.93 0 0 0 18 0c5.15-3.49 9.9-6.84 14.31-10a4 4 0 0 0 .46-6.07ZM336 368a15.92 15.92 0 0 1-11.31-4.69l-176-176a16 16 0 0 1 22.62-22.62l176 176A16 16 0 0 1 336 368"/></svg>
</template>

.icon-heart-dislike-circle-outline {
  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%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M448%20256c0-106-86-192-192-192S64%20150%2064%20256s86%20192%20192%20192s192-86%20192-192Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M333.2%20297.69c18.28-23.39%2027.06-47.43%2026.79-73.37c-.31-31.06-25.22-56.33-55.53-56.33c-20.4%200-35%2010.64-44.11%2020.42a5.93%205.93%200%200%201-8.7%200c-9.11-9.78-23.71-20.42-44.11-20.42L206%20168a4%204%200%200%200-2.75%206.84l124%20123.21a3.92%203.92%200%200%200%205.95-.36M158.84%20221a4%204%200%200%200-6.82%202.72v.64c-.28%2027.1%209.31%2052.13%2029.3%2076.5c9.38%2011.44%2026.4%2029.73%2065.7%2056.41a15.93%2015.93%200%200%200%2018%200c5.15-3.49%209.9-6.84%2014.31-10a4%204%200%200%200%20.46-6.07ZM336%20368a15.92%2015.92%200%200%201-11.31-4.69l-176-176a16%2016%200%200%201%2022.62-22.62l176%20176A16%2016%200%200%201%20336%20368%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%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M448%20256c0-106-86-192-192-192S64%20150%2064%20256s86%20192%20192%20192s192-86%20192-192Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M333.2%20297.69c18.28-23.39%2027.06-47.43%2026.79-73.37c-.31-31.06-25.22-56.33-55.53-56.33c-20.4%200-35%2010.64-44.11%2020.42a5.93%205.93%200%200%201-8.7%200c-9.11-9.78-23.71-20.42-44.11-20.42L206%20168a4%204%200%200%200-2.75%206.84l124%20123.21a3.92%203.92%200%200%200%205.95-.36M158.84%20221a4%204%200%200%200-6.82%202.72v.64c-.28%2027.1%209.31%2052.13%2029.3%2076.5c9.38%2011.44%2026.4%2029.73%2065.7%2056.41a15.93%2015.93%200%200%200%2018%200c5.15-3.49%209.9-6.84%2014.31-10a4%204%200%200%200%20.46-6.07ZM336%20368a15.92%2015.92%200%200%201-11.31-4.69l-176-176a16%2016%200%200%201%2022.62-22.62l176%20176A16%2016%200%200%201%20336%20368%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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