smiling face with halo emoji

smiling-face-with-halo from Emoji One (Colored) by Emoji One · Default · People · CC-BY-4.0 Attribution required.

Name
smiling-face-with-halo
Set
Emoji One (Colored)
Style
Default
Category
People
Viewbox
64×64
License
CC BY 4.0

The same emoji in other sets

More people icons from Emoji One (Colored)

Use the smiling face with halo emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffdd67" d="M61 33c0 16-13 29-29 29S3 49 3 33S16 4 32 4s29 13 29 29"/><path fill="#664e27" d="M28.6 34.4c-1.8-4.9-4.5-7.4-7.2-7.4s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.5.5 1.4-.4 1.2-.9m21.2 0C48 29.5 45.3 27 42.6 27s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.4.5 1.4-.4 1.2-.9m-5.6 7.8c-7.8 5.5-16.5 5.4-24.3 0c-.9-.7-1.8.5-1.1 1.5c2.4 3.9 7.2 7.4 13.3 7.4s10.9-3.5 13.3-7.4c.5-1-.3-2.1-1.2-1.5"/><path fill="#4aa9ff" d="M54.3 7.2C53.8 3 45.9.8 28.5 2.6C12.2 4.4 3.9 8.3 4.3 12.4c.7 6.4 12.2 8.6 26 7.1c13.8-1.4 24.6-5.9 24-12.3m-24.7 5.4c-9.2 1-16.9.4-17-1.2c-.1-.6.9-1.2 2.5-1.9C19.8 6.1 25.7 4 32 4c4.5 0 8.8 1 12.6 2.9c.9.3 1.4.6 1.4 1c.2 1.5-7.2 3.7-16.4 4.7"/></svg>

React

import type { SVGProps } from "react";

export function EmojioneSmilingFaceWithHalo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffdd67" d="M61 33c0 16-13 29-29 29S3 49 3 33S16 4 32 4s29 13 29 29"/><path fill="#664e27" d="M28.6 34.4c-1.8-4.9-4.5-7.4-7.2-7.4s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.5.5 1.4-.4 1.2-.9m21.2 0C48 29.5 45.3 27 42.6 27s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.4.5 1.4-.4 1.2-.9m-5.6 7.8c-7.8 5.5-16.5 5.4-24.3 0c-.9-.7-1.8.5-1.1 1.5c2.4 3.9 7.2 7.4 13.3 7.4s10.9-3.5 13.3-7.4c.5-1-.3-2.1-1.2-1.5"/><path fill="#4aa9ff" d="M54.3 7.2C53.8 3 45.9.8 28.5 2.6C12.2 4.4 3.9 8.3 4.3 12.4c.7 6.4 12.2 8.6 26 7.1c13.8-1.4 24.6-5.9 24-12.3m-24.7 5.4c-9.2 1-16.9.4-17-1.2c-.1-.6.9-1.2 2.5-1.9C19.8 6.1 25.7 4 32 4c4.5 0 8.8 1 12.6 2.9c.9.3 1.4.6 1.4 1c.2 1.5-7.2 3.7-16.4 4.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#ffdd67" d="M61 33c0 16-13 29-29 29S3 49 3 33S16 4 32 4s29 13 29 29"/><path fill="#664e27" d="M28.6 34.4c-1.8-4.9-4.5-7.4-7.2-7.4s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.5.5 1.4-.4 1.2-.9m21.2 0C48 29.5 45.3 27 42.6 27s-5.4 2.5-7.2 7.4c-.2.5.7 1.4 1.2.9c1.7-1.8 3.8-2.6 6-2.6s4.3.7 6 2.6c.4.5 1.4-.4 1.2-.9m-5.6 7.8c-7.8 5.5-16.5 5.4-24.3 0c-.9-.7-1.8.5-1.1 1.5c2.4 3.9 7.2 7.4 13.3 7.4s10.9-3.5 13.3-7.4c.5-1-.3-2.1-1.2-1.5"/><path fill="#4aa9ff" d="M54.3 7.2C53.8 3 45.9.8 28.5 2.6C12.2 4.4 3.9 8.3 4.3 12.4c.7 6.4 12.2 8.6 26 7.1c13.8-1.4 24.6-5.9 24-12.3m-24.7 5.4c-9.2 1-16.9.4-17-1.2c-.1-.6.9-1.2 2.5-1.9C19.8 6.1 25.7 4 32 4c4.5 0 8.8 1 12.6 2.9c.9.3 1.4.6 1.4 1c.2 1.5-7.2 3.7-16.4 4.7"/></svg>
</template>

CSS

.icon-smiling-face-with-halo {
  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%2064%2064%22%3E%3Cpath%20fill%3D%22%23ffdd67%22%20d%3D%22M61%2033c0%2016-13%2029-29%2029S3%2049%203%2033S16%204%2032%204s29%2013%2029%2029%22%2F%3E%3Cpath%20fill%3D%22%23664e27%22%20d%3D%22M28.6%2034.4c-1.8-4.9-4.5-7.4-7.2-7.4s-5.4%202.5-7.2%207.4c-.2.5.7%201.4%201.2.9c1.7-1.8%203.8-2.6%206-2.6s4.3.7%206%202.6c.5.5%201.4-.4%201.2-.9m21.2%200C48%2029.5%2045.3%2027%2042.6%2027s-5.4%202.5-7.2%207.4c-.2.5.7%201.4%201.2.9c1.7-1.8%203.8-2.6%206-2.6s4.3.7%206%202.6c.4.5%201.4-.4%201.2-.9m-5.6%207.8c-7.8%205.5-16.5%205.4-24.3%200c-.9-.7-1.8.5-1.1%201.5c2.4%203.9%207.2%207.4%2013.3%207.4s10.9-3.5%2013.3-7.4c.5-1-.3-2.1-1.2-1.5%22%2F%3E%3Cpath%20fill%3D%22%234aa9ff%22%20d%3D%22M54.3%207.2C53.8%203%2045.9.8%2028.5%202.6C12.2%204.4%203.9%208.3%204.3%2012.4c.7%206.4%2012.2%208.6%2026%207.1c13.8-1.4%2024.6-5.9%2024-12.3m-24.7%205.4c-9.2%201-16.9.4-17-1.2c-.1-.6.9-1.2%202.5-1.9C19.8%206.1%2025.7%204%2032%204c4.5%200%208.8%201%2012.6%202.9c.9.3%201.4.6%201.4%201c.2%201.5-7.2%203.7-16.4%204.7%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%2064%2064%22%3E%3Cpath%20fill%3D%22%23ffdd67%22%20d%3D%22M61%2033c0%2016-13%2029-29%2029S3%2049%203%2033S16%204%2032%204s29%2013%2029%2029%22%2F%3E%3Cpath%20fill%3D%22%23664e27%22%20d%3D%22M28.6%2034.4c-1.8-4.9-4.5-7.4-7.2-7.4s-5.4%202.5-7.2%207.4c-.2.5.7%201.4%201.2.9c1.7-1.8%203.8-2.6%206-2.6s4.3.7%206%202.6c.5.5%201.4-.4%201.2-.9m21.2%200C48%2029.5%2045.3%2027%2042.6%2027s-5.4%202.5-7.2%207.4c-.2.5.7%201.4%201.2.9c1.7-1.8%203.8-2.6%206-2.6s4.3.7%206%202.6c.4.5%201.4-.4%201.2-.9m-5.6%207.8c-7.8%205.5-16.5%205.4-24.3%200c-.9-.7-1.8.5-1.1%201.5c2.4%203.9%207.2%207.4%2013.3%207.4s10.9-3.5%2013.3-7.4c.5-1-.3-2.1-1.2-1.5%22%2F%3E%3Cpath%20fill%3D%22%234aa9ff%22%20d%3D%22M54.3%207.2C53.8%203%2045.9.8%2028.5%202.6C12.2%204.4%203.9%208.3%204.3%2012.4c.7%206.4%2012.2%208.6%2026%207.1c13.8-1.4%2024.6-5.9%2024-12.3m-24.7%205.4c-9.2%201-16.9.4-17-1.2c-.1-.6.9-1.2%202.5-1.9C19.8%206.1%2025.7%204%2032%204c4.5%200%208.8%201%2012.6%202.9c.9.3%201.4.6%201.4%201c.2%201.5-7.2%203.7-16.4%204.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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