smiling face with hearts emoji

smiling-face-with-hearts from Twitter Emoji by Twitter · Default · Smileys & Emotion · CC-BY-4.0 Attribution required.

Name
smiling-face-with-hearts
Set
Twitter Emoji
Style
Default
Category
Smileys & Emotion
Viewbox
36×36
License
CC BY 4.0
Aliases
smiling-face-with-3-hearts

The same emoji in other sets

smiling-face-with-heartsFluent Emojismiling-face-with-heartsFluent Emoji Flatsmiling-face-with-heartsFluent Emoji High Contrastsmiling-face-with-heartsNoto Emojismiling-face-with-heartsOpenMoji

More smileys & emotion icons from Twitter Emoji

alienalien-monsteranger-symbolangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebeaming-face-with-smiling-eyesbeating-heartblack-heartblue-heartbroken-heartbrown-heartcat-with-tears-of-joycat-with-wry-smileclown-facecold-facecollisionconfounded-faceconfused-facecowboy-hat-facecrying-catcrying-face

Use the smiling face with hearts emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#ffcc4d"/><path fill="#664500" d="M16 16.958c-.419 0-.809-.265-.949-.684c-.203-.599-1.018-2.316-2.051-2.316c-1.062 0-1.888 1.827-2.051 2.316a1 1 0 1 1-1.897-.633c.125-.377 1.304-3.684 3.949-3.684s3.823 3.307 3.949 3.684a1 1 0 0 1-.95 1.317m10 0a1 1 0 0 1-.948-.684c-.203-.599-1.019-2.316-2.052-2.316c-1.062 0-1.889 1.827-2.052 2.316a1 1 0 0 1-1.897-.633c.125-.377 1.304-3.684 3.948-3.684s3.823 3.307 3.948 3.684A1 1 0 0 1 26 16.958m1.335 3.733a.5.5 0 0 0-.635-.029c-.039.029-3.922 2.9-8.7 2.9c-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 0 0-.729.657c.129.215 3.217 5.243 9.429 5.243s9.301-5.028 9.429-5.243a.5.5 0 0 0-.094-.628"/><path fill="#ffac33" d="M21.229 3.947c0 .24.03.472.082.696c.425 2.643 3.364 5.431 5.47 6.197c1.665-.605 3.846-2.476 4.898-4.539A18.03 18.03 0 0 0 23.75.939a3.06 3.06 0 0 0-2.521 3.008m-7.486 25.131c.057-.242.09-.494.09-.754a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.3 3.3 0 0 0-2.88 1.698a18.07 18.07 0 0 0 8.068 7.574c1.637-1.351 3.131-3.307 3.435-5.199m20.558-3.436a2.29 2.29 0 0 0-4.062-.685a2.299 2.299 0 0 0-4.105 1.859c.307 1.905 2.348 3.896 3.909 4.561a18.05 18.05 0 0 0 4.258-5.735"/><path fill="#dd2e44" d="M33.625 3.269A3.063 3.063 0 0 0 30.562.206a3.06 3.06 0 0 0-2.489 1.282a3.063 3.063 0 0 0-5.47 2.477c.426 2.643 3.364 5.431 5.47 6.197c2.106-.766 5.044-3.554 5.469-6.196q.081-.337.083-.697M12.208 28.408a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.32 3.32 0 0 0-3.23 4.073c.461 2.863 3.644 5.884 5.926 6.714c2.282-.829 5.465-3.85 5.926-6.713q.089-.366.091-.755m23.74-2.281a2.299 2.299 0 0 0-4.167-1.337a2.299 2.299 0 0 0-4.105 1.859c.319 1.983 2.524 4.076 4.105 4.65c1.58-.574 3.786-2.667 4.104-4.65q.061-.252.063-.522"/></svg>

React

import type { SVGProps } from "react";

export function TwemojiSmilingFaceWithHearts(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#ffcc4d"/><path fill="#664500" d="M16 16.958c-.419 0-.809-.265-.949-.684c-.203-.599-1.018-2.316-2.051-2.316c-1.062 0-1.888 1.827-2.051 2.316a1 1 0 1 1-1.897-.633c.125-.377 1.304-3.684 3.949-3.684s3.823 3.307 3.949 3.684a1 1 0 0 1-.95 1.317m10 0a1 1 0 0 1-.948-.684c-.203-.599-1.019-2.316-2.052-2.316c-1.062 0-1.889 1.827-2.052 2.316a1 1 0 0 1-1.897-.633c.125-.377 1.304-3.684 3.948-3.684s3.823 3.307 3.948 3.684A1 1 0 0 1 26 16.958m1.335 3.733a.5.5 0 0 0-.635-.029c-.039.029-3.922 2.9-8.7 2.9c-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 0 0-.729.657c.129.215 3.217 5.243 9.429 5.243s9.301-5.028 9.429-5.243a.5.5 0 0 0-.094-.628"/><path fill="#ffac33" d="M21.229 3.947c0 .24.03.472.082.696c.425 2.643 3.364 5.431 5.47 6.197c1.665-.605 3.846-2.476 4.898-4.539A18.03 18.03 0 0 0 23.75.939a3.06 3.06 0 0 0-2.521 3.008m-7.486 25.131c.057-.242.09-.494.09-.754a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.3 3.3 0 0 0-2.88 1.698a18.07 18.07 0 0 0 8.068 7.574c1.637-1.351 3.131-3.307 3.435-5.199m20.558-3.436a2.29 2.29 0 0 0-4.062-.685a2.299 2.299 0 0 0-4.105 1.859c.307 1.905 2.348 3.896 3.909 4.561a18.05 18.05 0 0 0 4.258-5.735"/><path fill="#dd2e44" d="M33.625 3.269A3.063 3.063 0 0 0 30.562.206a3.06 3.06 0 0 0-2.489 1.282a3.063 3.063 0 0 0-5.47 2.477c.426 2.643 3.364 5.431 5.47 6.197c2.106-.766 5.044-3.554 5.469-6.196q.081-.337.083-.697M12.208 28.408a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.32 3.32 0 0 0-3.23 4.073c.461 2.863 3.644 5.884 5.926 6.714c2.282-.829 5.465-3.85 5.926-6.713q.089-.366.091-.755m23.74-2.281a2.299 2.299 0 0 0-4.167-1.337a2.299 2.299 0 0 0-4.105 1.859c.319 1.983 2.524 4.076 4.105 4.65c1.58-.574 3.786-2.667 4.104-4.65q.061-.252.063-.522"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#ffcc4d"/><path fill="#664500" d="M16 16.958c-.419 0-.809-.265-.949-.684c-.203-.599-1.018-2.316-2.051-2.316c-1.062 0-1.888 1.827-2.051 2.316a1 1 0 1 1-1.897-.633c.125-.377 1.304-3.684 3.949-3.684s3.823 3.307 3.949 3.684a1 1 0 0 1-.95 1.317m10 0a1 1 0 0 1-.948-.684c-.203-.599-1.019-2.316-2.052-2.316c-1.062 0-1.889 1.827-2.052 2.316a1 1 0 0 1-1.897-.633c.125-.377 1.304-3.684 3.948-3.684s3.823 3.307 3.948 3.684A1 1 0 0 1 26 16.958m1.335 3.733a.5.5 0 0 0-.635-.029c-.039.029-3.922 2.9-8.7 2.9c-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 0 0-.729.657c.129.215 3.217 5.243 9.429 5.243s9.301-5.028 9.429-5.243a.5.5 0 0 0-.094-.628"/><path fill="#ffac33" d="M21.229 3.947c0 .24.03.472.082.696c.425 2.643 3.364 5.431 5.47 6.197c1.665-.605 3.846-2.476 4.898-4.539A18.03 18.03 0 0 0 23.75.939a3.06 3.06 0 0 0-2.521 3.008m-7.486 25.131c.057-.242.09-.494.09-.754a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.3 3.3 0 0 0-2.88 1.698a18.07 18.07 0 0 0 8.068 7.574c1.637-1.351 3.131-3.307 3.435-5.199m20.558-3.436a2.29 2.29 0 0 0-4.062-.685a2.299 2.299 0 0 0-4.105 1.859c.307 1.905 2.348 3.896 3.909 4.561a18.05 18.05 0 0 0 4.258-5.735"/><path fill="#dd2e44" d="M33.625 3.269A3.063 3.063 0 0 0 30.562.206a3.06 3.06 0 0 0-2.489 1.282a3.063 3.063 0 0 0-5.47 2.477c.426 2.643 3.364 5.431 5.47 6.197c2.106-.766 5.044-3.554 5.469-6.196q.081-.337.083-.697M12.208 28.408a3.32 3.32 0 0 0-3.319-3.319a3.31 3.31 0 0 0-2.697 1.389a3.31 3.31 0 0 0-2.697-1.389a3.32 3.32 0 0 0-3.23 4.073c.461 2.863 3.644 5.884 5.926 6.714c2.282-.829 5.465-3.85 5.926-6.713q.089-.366.091-.755m23.74-2.281a2.299 2.299 0 0 0-4.167-1.337a2.299 2.299 0 0 0-4.105 1.859c.319 1.983 2.524 4.076 4.105 4.65c1.58-.574 3.786-2.667 4.104-4.65q.061-.252.063-.522"/></svg>
</template>

CSS

.icon-smiling-face-with-hearts {
  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%2036%2036%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%20fill%3D%22%23ffcc4d%22%2F%3E%3Cpath%20fill%3D%22%23664500%22%20d%3D%22M16%2016.958c-.419%200-.809-.265-.949-.684c-.203-.599-1.018-2.316-2.051-2.316c-1.062%200-1.888%201.827-2.051%202.316a1%201%200%201%201-1.897-.633c.125-.377%201.304-3.684%203.949-3.684s3.823%203.307%203.949%203.684a1%201%200%200%201-.95%201.317m10%200a1%201%200%200%201-.948-.684c-.203-.599-1.019-2.316-2.052-2.316c-1.062%200-1.889%201.827-2.052%202.316a1%201%200%200%201-1.897-.633c.125-.377%201.304-3.684%203.948-3.684s3.823%203.307%203.948%203.684A1%201%200%200%201%2026%2016.958m1.335%203.733a.5.5%200%200%200-.635-.029c-.039.029-3.922%202.9-8.7%202.9c-4.766%200-8.662-2.871-8.7-2.9a.5.5%200%200%200-.729.657c.129.215%203.217%205.243%209.429%205.243s9.301-5.028%209.429-5.243a.5.5%200%200%200-.094-.628%22%2F%3E%3Cpath%20fill%3D%22%23ffac33%22%20d%3D%22M21.229%203.947c0%20.24.03.472.082.696c.425%202.643%203.364%205.431%205.47%206.197c1.665-.605%203.846-2.476%204.898-4.539A18.03%2018.03%200%200%200%2023.75.939a3.06%203.06%200%200%200-2.521%203.008m-7.486%2025.131c.057-.242.09-.494.09-.754a3.32%203.32%200%200%200-3.319-3.319a3.31%203.31%200%200%200-2.697%201.389a3.31%203.31%200%200%200-2.697-1.389a3.3%203.3%200%200%200-2.88%201.698a18.07%2018.07%200%200%200%208.068%207.574c1.637-1.351%203.131-3.307%203.435-5.199m20.558-3.436a2.29%202.29%200%200%200-4.062-.685a2.299%202.299%200%200%200-4.105%201.859c.307%201.905%202.348%203.896%203.909%204.561a18.05%2018.05%200%200%200%204.258-5.735%22%2F%3E%3Cpath%20fill%3D%22%23dd2e44%22%20d%3D%22M33.625%203.269A3.063%203.063%200%200%200%2030.562.206a3.06%203.06%200%200%200-2.489%201.282a3.063%203.063%200%200%200-5.47%202.477c.426%202.643%203.364%205.431%205.47%206.197c2.106-.766%205.044-3.554%205.469-6.196q.081-.337.083-.697M12.208%2028.408a3.32%203.32%200%200%200-3.319-3.319a3.31%203.31%200%200%200-2.697%201.389a3.31%203.31%200%200%200-2.697-1.389a3.32%203.32%200%200%200-3.23%204.073c.461%202.863%203.644%205.884%205.926%206.714c2.282-.829%205.465-3.85%205.926-6.713q.089-.366.091-.755m23.74-2.281a2.299%202.299%200%200%200-4.167-1.337a2.299%202.299%200%200%200-4.105%201.859c.319%201.983%202.524%204.076%204.105%204.65c1.58-.574%203.786-2.667%204.104-4.65q.061-.252.063-.522%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%2036%2036%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%2218%22%20fill%3D%22%23ffcc4d%22%2F%3E%3Cpath%20fill%3D%22%23664500%22%20d%3D%22M16%2016.958c-.419%200-.809-.265-.949-.684c-.203-.599-1.018-2.316-2.051-2.316c-1.062%200-1.888%201.827-2.051%202.316a1%201%200%201%201-1.897-.633c.125-.377%201.304-3.684%203.949-3.684s3.823%203.307%203.949%203.684a1%201%200%200%201-.95%201.317m10%200a1%201%200%200%201-.948-.684c-.203-.599-1.019-2.316-2.052-2.316c-1.062%200-1.889%201.827-2.052%202.316a1%201%200%200%201-1.897-.633c.125-.377%201.304-3.684%203.948-3.684s3.823%203.307%203.948%203.684A1%201%200%200%201%2026%2016.958m1.335%203.733a.5.5%200%200%200-.635-.029c-.039.029-3.922%202.9-8.7%202.9c-4.766%200-8.662-2.871-8.7-2.9a.5.5%200%200%200-.729.657c.129.215%203.217%205.243%209.429%205.243s9.301-5.028%209.429-5.243a.5.5%200%200%200-.094-.628%22%2F%3E%3Cpath%20fill%3D%22%23ffac33%22%20d%3D%22M21.229%203.947c0%20.24.03.472.082.696c.425%202.643%203.364%205.431%205.47%206.197c1.665-.605%203.846-2.476%204.898-4.539A18.03%2018.03%200%200%200%2023.75.939a3.06%203.06%200%200%200-2.521%203.008m-7.486%2025.131c.057-.242.09-.494.09-.754a3.32%203.32%200%200%200-3.319-3.319a3.31%203.31%200%200%200-2.697%201.389a3.31%203.31%200%200%200-2.697-1.389a3.3%203.3%200%200%200-2.88%201.698a18.07%2018.07%200%200%200%208.068%207.574c1.637-1.351%203.131-3.307%203.435-5.199m20.558-3.436a2.29%202.29%200%200%200-4.062-.685a2.299%202.299%200%200%200-4.105%201.859c.307%201.905%202.348%203.896%203.909%204.561a18.05%2018.05%200%200%200%204.258-5.735%22%2F%3E%3Cpath%20fill%3D%22%23dd2e44%22%20d%3D%22M33.625%203.269A3.063%203.063%200%200%200%2030.562.206a3.06%203.06%200%200%200-2.489%201.282a3.063%203.063%200%200%200-5.47%202.477c.426%202.643%203.364%205.431%205.47%206.197c2.106-.766%205.044-3.554%205.469-6.196q.081-.337.083-.697M12.208%2028.408a3.32%203.32%200%200%200-3.319-3.319a3.31%203.31%200%200%200-2.697%201.389a3.31%203.31%200%200%200-2.697-1.389a3.32%203.32%200%200%200-3.23%204.073c.461%202.863%203.644%205.884%205.926%206.714c2.282-.829%205.465-3.85%205.926-6.713q.089-.366.091-.755m23.74-2.281a2.299%202.299%200%200%200-4.167-1.337a2.299%202.299%200%200%200-4.105%201.859c.319%201.983%202.524%204.076%204.105%204.65c1.58-.574%203.786-2.667%204.104-4.65q.061-.252.063-.522%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/smiling-face-with-hearts.svg?color=%231a73e8&size=48