heart circle hint icon
heart-circle-hint-28-regular from Fluent UI System Icons by Microsoft Corporation · 28 Regular · MIT Free for personal and commercial use.
- Name
- heart-circle-hint-28-regular
- Set
- Fluent UI System Icons
- Style
- 28 Regular
- Viewbox
- 28×28
- License
- MIT
11 other variants in Fluent UI System Icons
heart-circle-hint-16-filledheart-circle-hint-16-regularheart-circle-hint-20-filledheart-circle-hint-20-regularheart-circle-hint-24-filledheart-circle-hint-24-regularheart-circle-hint-28-filledheart-circle-hint-32-filledheart-circle-hint-32-regularheart-circle-hint-48-filledheart-circle-hint-48-regular
Related icons in Fluent UI System Icons
Use the heart circle hint icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M16.185 24.273c.374-.08.76.106.907.46c.171.414-.053.888-.491.985a12.1 12.1 0 0 1-5.2 0c-.438-.097-.663-.571-.49-.986a.8.8 0 0 1 .906-.46a10.55 10.55 0 0 0 4.368 0M4.225 19.4a.8.8 0 0 1 .966.317a10.6 10.6 0 0 0 3.092 3.092c.32.208.464.613.318.966c-.172.415-.667.591-1.045.35a12.1 12.1 0 0 1-3.68-3.68c-.241-.379-.066-.873.349-1.045m18.585.316a.8.8 0 0 1 .965-.318c.415.172.591.667.35 1.045a12.1 12.1 0 0 1-3.68 3.681c-.378.241-.872.065-1.044-.35a.796.796 0 0 1 .317-.965a10.6 10.6 0 0 0 3.092-3.093m-8.192-9.604a3.04 3.04 0 0 1 4.696 3.86l-4.732 5.755a.75.75 0 0 1-1.16 0l-4.73-5.755a3.039 3.039 0 1 1 4.695-3.86l.615.75zm3.536.953a1.54 1.54 0 0 0-2.377 0l-1.195 1.454a.75.75 0 0 1-1.16 0l-1.195-1.454a1.539 1.539 0 1 0-2.376 1.955l4.151 5.05l4.152-5.05a1.54 1.54 0 0 0 0-1.955m-15.87.33c.096-.437.57-.662.985-.49a.8.8 0 0 1 .46.908a10.5 10.5 0 0 0-.001 4.37a.8.8 0 0 1-.46.908c-.415.171-.889-.054-.986-.492A12 12 0 0 1 2 14c0-.894.098-1.766.283-2.604m22.447-.489c.415-.171.889.053.986.492a12.05 12.05 0 0 1 .001 5.2c-.097.438-.571.663-.986.49a.8.8 0 0 1-.459-.906Q24.5 15.124 24.5 14q-.002-1.126-.227-2.187a.8.8 0 0 1 .458-.907m-5.328-6.678c.172-.415.667-.592 1.045-.35a12.1 12.1 0 0 1 3.674 3.674c.241.378.066.873-.349 1.045a.8.8 0 0 1-.966-.317a10.6 10.6 0 0 0-3.087-3.087a.8.8 0 0 1-.317-.965m-11.85-.351c.379-.241.873-.065 1.045.35a.796.796 0 0 1-.317.965A10.6 10.6 0 0 0 5.193 8.28a.796.796 0 0 1-.965.317c-.415-.172-.59-.667-.35-1.045a12.1 12.1 0 0 1 3.676-3.674M14 2c.894 0 1.765.098 2.604.283c.437.097.662.571.49.986a.8.8 0 0 1-.908.46a10.5 10.5 0 0 0-4.371-.001a.8.8 0 0 1-.908-.46c-.171-.414.053-.888.491-.985A12 12 0 0 1 14 2"/></svg>
React
import type { SVGProps } from "react";
export function FluentHeartCircleHint28Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M16.185 24.273c.374-.08.76.106.907.46c.171.414-.053.888-.491.985a12.1 12.1 0 0 1-5.2 0c-.438-.097-.663-.571-.49-.986a.8.8 0 0 1 .906-.46a10.55 10.55 0 0 0 4.368 0M4.225 19.4a.8.8 0 0 1 .966.317a10.6 10.6 0 0 0 3.092 3.092c.32.208.464.613.318.966c-.172.415-.667.591-1.045.35a12.1 12.1 0 0 1-3.68-3.68c-.241-.379-.066-.873.349-1.045m18.585.316a.8.8 0 0 1 .965-.318c.415.172.591.667.35 1.045a12.1 12.1 0 0 1-3.68 3.681c-.378.241-.872.065-1.044-.35a.796.796 0 0 1 .317-.965a10.6 10.6 0 0 0 3.092-3.093m-8.192-9.604a3.04 3.04 0 0 1 4.696 3.86l-4.732 5.755a.75.75 0 0 1-1.16 0l-4.73-5.755a3.039 3.039 0 1 1 4.695-3.86l.615.75zm3.536.953a1.54 1.54 0 0 0-2.377 0l-1.195 1.454a.75.75 0 0 1-1.16 0l-1.195-1.454a1.539 1.539 0 1 0-2.376 1.955l4.151 5.05l4.152-5.05a1.54 1.54 0 0 0 0-1.955m-15.87.33c.096-.437.57-.662.985-.49a.8.8 0 0 1 .46.908a10.5 10.5 0 0 0-.001 4.37a.8.8 0 0 1-.46.908c-.415.171-.889-.054-.986-.492A12 12 0 0 1 2 14c0-.894.098-1.766.283-2.604m22.447-.489c.415-.171.889.053.986.492a12.05 12.05 0 0 1 .001 5.2c-.097.438-.571.663-.986.49a.8.8 0 0 1-.459-.906Q24.5 15.124 24.5 14q-.002-1.126-.227-2.187a.8.8 0 0 1 .458-.907m-5.328-6.678c.172-.415.667-.592 1.045-.35a12.1 12.1 0 0 1 3.674 3.674c.241.378.066.873-.349 1.045a.8.8 0 0 1-.966-.317a10.6 10.6 0 0 0-3.087-3.087a.8.8 0 0 1-.317-.965m-11.85-.351c.379-.241.873-.065 1.045.35a.796.796 0 0 1-.317.965A10.6 10.6 0 0 0 5.193 8.28a.796.796 0 0 1-.965.317c-.415-.172-.59-.667-.35-1.045a12.1 12.1 0 0 1 3.676-3.674M14 2c.894 0 1.765.098 2.604.283c.437.097.662.571.49.986a.8.8 0 0 1-.908.46a10.5 10.5 0 0 0-4.371-.001a.8.8 0 0 1-.908-.46c-.171-.414.053-.888.491-.985A12 12 0 0 1 14 2"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M16.185 24.273c.374-.08.76.106.907.46c.171.414-.053.888-.491.985a12.1 12.1 0 0 1-5.2 0c-.438-.097-.663-.571-.49-.986a.8.8 0 0 1 .906-.46a10.55 10.55 0 0 0 4.368 0M4.225 19.4a.8.8 0 0 1 .966.317a10.6 10.6 0 0 0 3.092 3.092c.32.208.464.613.318.966c-.172.415-.667.591-1.045.35a12.1 12.1 0 0 1-3.68-3.68c-.241-.379-.066-.873.349-1.045m18.585.316a.8.8 0 0 1 .965-.318c.415.172.591.667.35 1.045a12.1 12.1 0 0 1-3.68 3.681c-.378.241-.872.065-1.044-.35a.796.796 0 0 1 .317-.965a10.6 10.6 0 0 0 3.092-3.093m-8.192-9.604a3.04 3.04 0 0 1 4.696 3.86l-4.732 5.755a.75.75 0 0 1-1.16 0l-4.73-5.755a3.039 3.039 0 1 1 4.695-3.86l.615.75zm3.536.953a1.54 1.54 0 0 0-2.377 0l-1.195 1.454a.75.75 0 0 1-1.16 0l-1.195-1.454a1.539 1.539 0 1 0-2.376 1.955l4.151 5.05l4.152-5.05a1.54 1.54 0 0 0 0-1.955m-15.87.33c.096-.437.57-.662.985-.49a.8.8 0 0 1 .46.908a10.5 10.5 0 0 0-.001 4.37a.8.8 0 0 1-.46.908c-.415.171-.889-.054-.986-.492A12 12 0 0 1 2 14c0-.894.098-1.766.283-2.604m22.447-.489c.415-.171.889.053.986.492a12.05 12.05 0 0 1 .001 5.2c-.097.438-.571.663-.986.49a.8.8 0 0 1-.459-.906Q24.5 15.124 24.5 14q-.002-1.126-.227-2.187a.8.8 0 0 1 .458-.907m-5.328-6.678c.172-.415.667-.592 1.045-.35a12.1 12.1 0 0 1 3.674 3.674c.241.378.066.873-.349 1.045a.8.8 0 0 1-.966-.317a10.6 10.6 0 0 0-3.087-3.087a.8.8 0 0 1-.317-.965m-11.85-.351c.379-.241.873-.065 1.045.35a.796.796 0 0 1-.317.965A10.6 10.6 0 0 0 5.193 8.28a.796.796 0 0 1-.965.317c-.415-.172-.59-.667-.35-1.045a12.1 12.1 0 0 1 3.676-3.674M14 2c.894 0 1.765.098 2.604.283c.437.097.662.571.49.986a.8.8 0 0 1-.908.46a10.5 10.5 0 0 0-4.371-.001a.8.8 0 0 1-.908-.46c-.171-.414.053-.888.491-.985A12 12 0 0 1 14 2"/></svg> </template>
CSS
.icon-heart-circle-hint-28-regular {
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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.185%2024.273c.374-.08.76.106.907.46c.171.414-.053.888-.491.985a12.1%2012.1%200%200%201-5.2%200c-.438-.097-.663-.571-.49-.986a.8.8%200%200%201%20.906-.46a10.55%2010.55%200%200%200%204.368%200M4.225%2019.4a.8.8%200%200%201%20.966.317a10.6%2010.6%200%200%200%203.092%203.092c.32.208.464.613.318.966c-.172.415-.667.591-1.045.35a12.1%2012.1%200%200%201-3.68-3.68c-.241-.379-.066-.873.349-1.045m18.585.316a.8.8%200%200%201%20.965-.318c.415.172.591.667.35%201.045a12.1%2012.1%200%200%201-3.68%203.681c-.378.241-.872.065-1.044-.35a.796.796%200%200%201%20.317-.965a10.6%2010.6%200%200%200%203.092-3.093m-8.192-9.604a3.04%203.04%200%200%201%204.696%203.86l-4.732%205.755a.75.75%200%200%201-1.16%200l-4.73-5.755a3.039%203.039%200%201%201%204.695-3.86l.615.75zm3.536.953a1.54%201.54%200%200%200-2.377%200l-1.195%201.454a.75.75%200%200%201-1.16%200l-1.195-1.454a1.539%201.539%200%201%200-2.376%201.955l4.151%205.05l4.152-5.05a1.54%201.54%200%200%200%200-1.955m-15.87.33c.096-.437.57-.662.985-.49a.8.8%200%200%201%20.46.908a10.5%2010.5%200%200%200-.001%204.37a.8.8%200%200%201-.46.908c-.415.171-.889-.054-.986-.492A12%2012%200%200%201%202%2014c0-.894.098-1.766.283-2.604m22.447-.489c.415-.171.889.053.986.492a12.05%2012.05%200%200%201%20.001%205.2c-.097.438-.571.663-.986.49a.8.8%200%200%201-.459-.906Q24.5%2015.124%2024.5%2014q-.002-1.126-.227-2.187a.8.8%200%200%201%20.458-.907m-5.328-6.678c.172-.415.667-.592%201.045-.35a12.1%2012.1%200%200%201%203.674%203.674c.241.378.066.873-.349%201.045a.8.8%200%200%201-.966-.317a10.6%2010.6%200%200%200-3.087-3.087a.8.8%200%200%201-.317-.965m-11.85-.351c.379-.241.873-.065%201.045.35a.796.796%200%200%201-.317.965A10.6%2010.6%200%200%200%205.193%208.28a.796.796%200%200%201-.965.317c-.415-.172-.59-.667-.35-1.045a12.1%2012.1%200%200%201%203.676-3.674M14%202c.894%200%201.765.098%202.604.283c.437.097.662.571.49.986a.8.8%200%200%201-.908.46a10.5%2010.5%200%200%200-4.371-.001a.8.8%200%200%201-.908-.46c-.171-.414.053-.888.491-.985A12%2012%200%200%201%2014%202%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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.185%2024.273c.374-.08.76.106.907.46c.171.414-.053.888-.491.985a12.1%2012.1%200%200%201-5.2%200c-.438-.097-.663-.571-.49-.986a.8.8%200%200%201%20.906-.46a10.55%2010.55%200%200%200%204.368%200M4.225%2019.4a.8.8%200%200%201%20.966.317a10.6%2010.6%200%200%200%203.092%203.092c.32.208.464.613.318.966c-.172.415-.667.591-1.045.35a12.1%2012.1%200%200%201-3.68-3.68c-.241-.379-.066-.873.349-1.045m18.585.316a.8.8%200%200%201%20.965-.318c.415.172.591.667.35%201.045a12.1%2012.1%200%200%201-3.68%203.681c-.378.241-.872.065-1.044-.35a.796.796%200%200%201%20.317-.965a10.6%2010.6%200%200%200%203.092-3.093m-8.192-9.604a3.04%203.04%200%200%201%204.696%203.86l-4.732%205.755a.75.75%200%200%201-1.16%200l-4.73-5.755a3.039%203.039%200%201%201%204.695-3.86l.615.75zm3.536.953a1.54%201.54%200%200%200-2.377%200l-1.195%201.454a.75.75%200%200%201-1.16%200l-1.195-1.454a1.539%201.539%200%201%200-2.376%201.955l4.151%205.05l4.152-5.05a1.54%201.54%200%200%200%200-1.955m-15.87.33c.096-.437.57-.662.985-.49a.8.8%200%200%201%20.46.908a10.5%2010.5%200%200%200-.001%204.37a.8.8%200%200%201-.46.908c-.415.171-.889-.054-.986-.492A12%2012%200%200%201%202%2014c0-.894.098-1.766.283-2.604m22.447-.489c.415-.171.889.053.986.492a12.05%2012.05%200%200%201%20.001%205.2c-.097.438-.571.663-.986.49a.8.8%200%200%201-.459-.906Q24.5%2015.124%2024.5%2014q-.002-1.126-.227-2.187a.8.8%200%200%201%20.458-.907m-5.328-6.678c.172-.415.667-.592%201.045-.35a12.1%2012.1%200%200%201%203.674%203.674c.241.378.066.873-.349%201.045a.8.8%200%200%201-.966-.317a10.6%2010.6%200%200%200-3.087-3.087a.8.8%200%200%201-.317-.965m-11.85-.351c.379-.241.873-.065%201.045.35a.796.796%200%200%201-.317.965A10.6%2010.6%200%200%200%205.193%208.28a.796.796%200%200%201-.965.317c-.415-.172-.59-.667-.35-1.045a12.1%2012.1%200%200%201%203.676-3.674M14%202c.894%200%201.765.098%202.604.283c.437.097.662.571.49.986a.8.8%200%200%201-.908.46a10.5%2010.5%200%200%200-4.371-.001a.8.8%200%200%201-.908-.46c-.171-.414.053-.888.491-.985A12%2012%200%200%201%2014%202%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-28-regular.svg?color=%231a73e8&size=48
