heart smile icon

heart-smile-rounded from Material Symbols Light by Google · Rounded · Social · Apache-2.0 Free for personal and commercial use.

Name
heart-smile-rounded
Set
Material Symbols Light
Style
Rounded
Category
Social
Viewbox
24×24
License
Apache 2.0

3 other variants in Material Symbols Light

heart-smileheart-smile-outlineheart-smile-outline-rounded

The same icon in other sets

heart-smileMaterial Symbols

More social icons from Material Symbols Light

18-up-rating6-ft-apartacupunctureadd-reactionadmin-medsagenderallergiesallergyaltitudeantigravityavocado-beanbarefootbedtimebedtime-offblindblood-pressurebloodtypebody-fatbody-systembombboybreastfeedingbrickbring-your-own-ip

Use the heart smile icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15q1.196 0 2.184-.651t1.485-1.741q.079-.183 0-.385t-.267-.275q-.183-.073-.382.012q-.199.086-.278.269q-.358.829-1.1 1.3Q12.897 14 12 14t-1.641-.471t-1.101-1.3q-.08-.183-.278-.268q-.2-.086-.382-.013q-.188.073-.267.275t0 .385q.498 1.09 1.485 1.741T12 15M9.81 9.81q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228m5.5 0q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228M12 6.64q.87-1.289 2.025-1.964T16.5 4q1.908 0 3.204 1.296T21 8.52q0 .896-.293 1.782t-1.027 1.93t-1.973 2.352t-3.132 3.075l-1.48 1.346q-.46.423-1.095.423t-1.094-.423l-1.481-1.346q-1.892-1.77-3.132-3.075T4.32 12.232q-.733-1.045-1.027-1.931T3 8.519q0-1.927 1.296-3.223T7.5 4q1.32 0 2.475.675T12 6.639"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightHeartSmileRounded(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15q1.196 0 2.184-.651t1.485-1.741q.079-.183 0-.385t-.267-.275q-.183-.073-.382.012q-.199.086-.278.269q-.358.829-1.1 1.3Q12.897 14 12 14t-1.641-.471t-1.101-1.3q-.08-.183-.278-.268q-.2-.086-.382-.013q-.188.073-.267.275t0 .385q.498 1.09 1.485 1.741T12 15M9.81 9.81q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228m5.5 0q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228M12 6.64q.87-1.289 2.025-1.964T16.5 4q1.908 0 3.204 1.296T21 8.52q0 .896-.293 1.782t-1.027 1.93t-1.973 2.352t-3.132 3.075l-1.48 1.346q-.46.423-1.095.423t-1.094-.423l-1.481-1.346q-1.892-1.77-3.132-3.075T4.32 12.232q-.733-1.045-1.027-1.931T3 8.519q0-1.927 1.296-3.223T7.5 4q1.32 0 2.475.675T12 6.639"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15q1.196 0 2.184-.651t1.485-1.741q.079-.183 0-.385t-.267-.275q-.183-.073-.382.012q-.199.086-.278.269q-.358.829-1.1 1.3Q12.897 14 12 14t-1.641-.471t-1.101-1.3q-.08-.183-.278-.268q-.2-.086-.382-.013q-.188.073-.267.275t0 .385q.498 1.09 1.485 1.741T12 15M9.81 9.81q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228m5.5 0q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228M12 6.64q.87-1.289 2.025-1.964T16.5 4q1.908 0 3.204 1.296T21 8.52q0 .896-.293 1.782t-1.027 1.93t-1.973 2.352t-3.132 3.075l-1.48 1.346q-.46.423-1.095.423t-1.094-.423l-1.481-1.346q-1.892-1.77-3.132-3.075T4.32 12.232q-.733-1.045-1.027-1.931T3 8.519q0-1.927 1.296-3.223T7.5 4q1.32 0 2.475.675T12 6.639"/></svg>
</template>

CSS

.icon-heart-smile-rounded {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2015q1.196%200%202.184-.651t1.485-1.741q.079-.183%200-.385t-.267-.275q-.183-.073-.382.012q-.199.086-.278.269q-.358.829-1.1%201.3Q12.897%2014%2012%2014t-1.641-.471t-1.101-1.3q-.08-.183-.278-.268q-.2-.086-.382-.013q-.188.073-.267.275t0%20.385q.498%201.09%201.485%201.741T12%2015M9.81%209.81q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228m5.5%200q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228M12%206.64q.87-1.289%202.025-1.964T16.5%204q1.908%200%203.204%201.296T21%208.52q0%20.896-.293%201.782t-1.027%201.93t-1.973%202.352t-3.132%203.075l-1.48%201.346q-.46.423-1.095.423t-1.094-.423l-1.481-1.346q-1.892-1.77-3.132-3.075T4.32%2012.232q-.733-1.045-1.027-1.931T3%208.519q0-1.927%201.296-3.223T7.5%204q1.32%200%202.475.675T12%206.639%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2015q1.196%200%202.184-.651t1.485-1.741q.079-.183%200-.385t-.267-.275q-.183-.073-.382.012q-.199.086-.278.269q-.358.829-1.1%201.3Q12.897%2014%2012%2014t-1.641-.471t-1.101-1.3q-.08-.183-.278-.268q-.2-.086-.382-.013q-.188.073-.267.275t0%20.385q.498%201.09%201.485%201.741T12%2015M9.81%209.81q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228m5.5%200q.228-.227.228-.56t-.228-.56t-.56-.228t-.56.228q-.228.227-.228.56t.228.56t.56.228t.56-.228M12%206.64q.87-1.289%202.025-1.964T16.5%204q1.908%200%203.204%201.296T21%208.52q0%20.896-.293%201.782t-1.027%201.93t-1.973%202.352t-3.132%203.075l-1.48%201.346q-.46.423-1.095.423t-1.094-.423l-1.481-1.346q-1.892-1.77-3.132-3.075T4.32%2012.232q-.733-1.045-1.027-1.931T3%208.519q0-1.927%201.296-3.223T7.5%204q1.32%200%202.475.675T12%206.639%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/heart-smile-rounded.svg?color=%231a73e8&size=48