heart circle hint icon

heart-circle-hint-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.

Name
heart-circle-hint-20-filled
Set
Fluent UI System Icons
Style
20 Filled
Viewbox
20×20
License
MIT

11 other variants in Fluent UI System Icons

heart-circle-hint-16-filledheart-circle-hint-16-regularheart-circle-hint-20-regularheart-circle-hint-24-filledheart-circle-hint-24-regularheart-circle-hint-28-filledheart-circle-hint-28-regularheart-circle-hint-32-filledheart-circle-hint-32-regularheart-circle-hint-48-filledheart-circle-hint-48-regular

Related icons in Fluent UI System Icons

heart-broken-16-filledheart-circle-16-filledheart-off-16-filledheart-pulse-20-filledheart-pulse-checkmark-20-filledheart-pulse-error-20-filledheart-pulse-warning-20-filled

Use the heart circle hint icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.44 2.152a8 8 0 0 1 3.12 0a.5.5 0 0 1-.193.981a7 7 0 0 0-2.734 0a.5.5 0 0 1-.194-.98m-5.7 5.894a.5.5 0 0 1 .393.587a7 7 0 0 0 0 2.734a.5.5 0 0 1-.98.194a8 8 0 0 1 0-3.122a.5.5 0 0 1 .587-.393m14.52 0a.5.5 0 0 1 .588.393a8 8 0 0 1 0 3.122a.5.5 0 0 1-.981-.194a7 7 0 0 0 0-2.734a.5.5 0 0 1 .393-.587M8.046 17.26a.5.5 0 0 1 .587-.393a7 7 0 0 0 2.734 0a.5.5 0 1 1 .194.98a8 8 0 0 1-3.122 0a.5.5 0 0 1-.393-.587m6.4-13.913a8 8 0 0 1 2.207 2.208a.5.5 0 1 1-.831.556a7 7 0 0 0-1.933-1.933a.5.5 0 0 1 .557-.83m-8.198.138a.5.5 0 0 1-.137.693a7 7 0 0 0-1.933 1.933a.5.5 0 0 1-.83-.556a8 8 0 0 1 2.206-2.208a.5.5 0 0 1 .694.138m10.268 10.267a.5.5 0 0 1 .137.694a8 8 0 0 1-2.207 2.207a.5.5 0 0 1-.557-.83a7 7 0 0 0 1.933-1.934a.5.5 0 0 1 .694-.137m-13.032 0a.5.5 0 0 1 .694.137a7 7 0 0 0 1.933 1.933a.5.5 0 1 1-.557.831a8 8 0 0 1-2.207-2.207a.5.5 0 0 1 .137-.694m9.985-6.08c-.78-.861-2.12-.9-2.95-.085l-.52.512l-.52-.512a2.045 2.045 0 0 0-2.95 2.83l3.1 3.423a.5.5 0 0 0 .74 0l3.1-3.423a2.045 2.045 0 0 0 0-2.745"/></svg>

React

import type { SVGProps } from "react";

export function FluentHeartCircleHint20Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.44 2.152a8 8 0 0 1 3.12 0a.5.5 0 0 1-.193.981a7 7 0 0 0-2.734 0a.5.5 0 0 1-.194-.98m-5.7 5.894a.5.5 0 0 1 .393.587a7 7 0 0 0 0 2.734a.5.5 0 0 1-.98.194a8 8 0 0 1 0-3.122a.5.5 0 0 1 .587-.393m14.52 0a.5.5 0 0 1 .588.393a8 8 0 0 1 0 3.122a.5.5 0 0 1-.981-.194a7 7 0 0 0 0-2.734a.5.5 0 0 1 .393-.587M8.046 17.26a.5.5 0 0 1 .587-.393a7 7 0 0 0 2.734 0a.5.5 0 1 1 .194.98a8 8 0 0 1-3.122 0a.5.5 0 0 1-.393-.587m6.4-13.913a8 8 0 0 1 2.207 2.208a.5.5 0 1 1-.831.556a7 7 0 0 0-1.933-1.933a.5.5 0 0 1 .557-.83m-8.198.138a.5.5 0 0 1-.137.693a7 7 0 0 0-1.933 1.933a.5.5 0 0 1-.83-.556a8 8 0 0 1 2.206-2.208a.5.5 0 0 1 .694.138m10.268 10.267a.5.5 0 0 1 .137.694a8 8 0 0 1-2.207 2.207a.5.5 0 0 1-.557-.83a7 7 0 0 0 1.933-1.934a.5.5 0 0 1 .694-.137m-13.032 0a.5.5 0 0 1 .694.137a7 7 0 0 0 1.933 1.933a.5.5 0 1 1-.557.831a8 8 0 0 1-2.207-2.207a.5.5 0 0 1 .137-.694m9.985-6.08c-.78-.861-2.12-.9-2.95-.085l-.52.512l-.52-.512a2.045 2.045 0 0 0-2.95 2.83l3.1 3.423a.5.5 0 0 0 .74 0l3.1-3.423a2.045 2.045 0 0 0 0-2.745"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.44 2.152a8 8 0 0 1 3.12 0a.5.5 0 0 1-.193.981a7 7 0 0 0-2.734 0a.5.5 0 0 1-.194-.98m-5.7 5.894a.5.5 0 0 1 .393.587a7 7 0 0 0 0 2.734a.5.5 0 0 1-.98.194a8 8 0 0 1 0-3.122a.5.5 0 0 1 .587-.393m14.52 0a.5.5 0 0 1 .588.393a8 8 0 0 1 0 3.122a.5.5 0 0 1-.981-.194a7 7 0 0 0 0-2.734a.5.5 0 0 1 .393-.587M8.046 17.26a.5.5 0 0 1 .587-.393a7 7 0 0 0 2.734 0a.5.5 0 1 1 .194.98a8 8 0 0 1-3.122 0a.5.5 0 0 1-.393-.587m6.4-13.913a8 8 0 0 1 2.207 2.208a.5.5 0 1 1-.831.556a7 7 0 0 0-1.933-1.933a.5.5 0 0 1 .557-.83m-8.198.138a.5.5 0 0 1-.137.693a7 7 0 0 0-1.933 1.933a.5.5 0 0 1-.83-.556a8 8 0 0 1 2.206-2.208a.5.5 0 0 1 .694.138m10.268 10.267a.5.5 0 0 1 .137.694a8 8 0 0 1-2.207 2.207a.5.5 0 0 1-.557-.83a7 7 0 0 0 1.933-1.934a.5.5 0 0 1 .694-.137m-13.032 0a.5.5 0 0 1 .694.137a7 7 0 0 0 1.933 1.933a.5.5 0 1 1-.557.831a8 8 0 0 1-2.207-2.207a.5.5 0 0 1 .137-.694m9.985-6.08c-.78-.861-2.12-.9-2.95-.085l-.52.512l-.52-.512a2.045 2.045 0 0 0-2.95 2.83l3.1 3.423a.5.5 0 0 0 .74 0l3.1-3.423a2.045 2.045 0 0 0 0-2.745"/></svg>
</template>

CSS

.icon-heart-circle-hint-20-filled {
  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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.44%202.152a8%208%200%200%201%203.12%200a.5.5%200%200%201-.193.981a7%207%200%200%200-2.734%200a.5.5%200%200%201-.194-.98m-5.7%205.894a.5.5%200%200%201%20.393.587a7%207%200%200%200%200%202.734a.5.5%200%200%201-.98.194a8%208%200%200%201%200-3.122a.5.5%200%200%201%20.587-.393m14.52%200a.5.5%200%200%201%20.588.393a8%208%200%200%201%200%203.122a.5.5%200%200%201-.981-.194a7%207%200%200%200%200-2.734a.5.5%200%200%201%20.393-.587M8.046%2017.26a.5.5%200%200%201%20.587-.393a7%207%200%200%200%202.734%200a.5.5%200%201%201%20.194.98a8%208%200%200%201-3.122%200a.5.5%200%200%201-.393-.587m6.4-13.913a8%208%200%200%201%202.207%202.208a.5.5%200%201%201-.831.556a7%207%200%200%200-1.933-1.933a.5.5%200%200%201%20.557-.83m-8.198.138a.5.5%200%200%201-.137.693a7%207%200%200%200-1.933%201.933a.5.5%200%200%201-.83-.556a8%208%200%200%201%202.206-2.208a.5.5%200%200%201%20.694.138m10.268%2010.267a.5.5%200%200%201%20.137.694a8%208%200%200%201-2.207%202.207a.5.5%200%200%201-.557-.83a7%207%200%200%200%201.933-1.934a.5.5%200%200%201%20.694-.137m-13.032%200a.5.5%200%200%201%20.694.137a7%207%200%200%200%201.933%201.933a.5.5%200%201%201-.557.831a8%208%200%200%201-2.207-2.207a.5.5%200%200%201%20.137-.694m9.985-6.08c-.78-.861-2.12-.9-2.95-.085l-.52.512l-.52-.512a2.045%202.045%200%200%200-2.95%202.83l3.1%203.423a.5.5%200%200%200%20.74%200l3.1-3.423a2.045%202.045%200%200%200%200-2.745%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.44%202.152a8%208%200%200%201%203.12%200a.5.5%200%200%201-.193.981a7%207%200%200%200-2.734%200a.5.5%200%200%201-.194-.98m-5.7%205.894a.5.5%200%200%201%20.393.587a7%207%200%200%200%200%202.734a.5.5%200%200%201-.98.194a8%208%200%200%201%200-3.122a.5.5%200%200%201%20.587-.393m14.52%200a.5.5%200%200%201%20.588.393a8%208%200%200%201%200%203.122a.5.5%200%200%201-.981-.194a7%207%200%200%200%200-2.734a.5.5%200%200%201%20.393-.587M8.046%2017.26a.5.5%200%200%201%20.587-.393a7%207%200%200%200%202.734%200a.5.5%200%201%201%20.194.98a8%208%200%200%201-3.122%200a.5.5%200%200%201-.393-.587m6.4-13.913a8%208%200%200%201%202.207%202.208a.5.5%200%201%201-.831.556a7%207%200%200%200-1.933-1.933a.5.5%200%200%201%20.557-.83m-8.198.138a.5.5%200%200%201-.137.693a7%207%200%200%200-1.933%201.933a.5.5%200%200%201-.83-.556a8%208%200%200%201%202.206-2.208a.5.5%200%200%201%20.694.138m10.268%2010.267a.5.5%200%200%201%20.137.694a8%208%200%200%201-2.207%202.207a.5.5%200%200%201-.557-.83a7%207%200%200%200%201.933-1.934a.5.5%200%200%201%20.694-.137m-13.032%200a.5.5%200%200%201%20.694.137a7%207%200%200%200%201.933%201.933a.5.5%200%201%201-.557.831a8%208%200%200%201-2.207-2.207a.5.5%200%200%201%20.137-.694m9.985-6.08c-.78-.861-2.12-.9-2.95-.085l-.52.512l-.52-.512a2.045%202.045%200%200%200-2.95%202.83l3.1%203.423a.5.5%200%200%200%20.74%200l3.1-3.423a2.045%202.045%200%200%200%200-2.745%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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