mask happy icon

5 other variants in Phosphor

The same icon in other sets

Related icons in Phosphor

Use the mask happy icon

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M187 125.33a4 4 0 1 1-6 5.33c-3.4-3.8-10.72-6.66-17-6.66s-13.62 2.86-17 6.66a4 4 0 0 1-3 1.34a4 4 0 0 1-3-6.67c4.92-5.5 14.37-9.33 23-9.33s18.06 3.83 23 9.33m-78 5.33a4 4 0 1 0 6-5.33c-4.92-5.5-14.37-9.33-23-9.33s-18.06 3.83-23 9.33a4 4 0 0 0 3 6.67a4 4 0 0 0 3-1.34c3.4-3.8 10.72-6.66 17-6.66s13.62 2.86 17 6.66m50.3 34.74a40.89 40.89 0 0 1-62.64 0a4 4 0 0 0-6.09 5.2a48.92 48.92 0 0 0 74.82 0a4 4 0 0 0-6.09-5.2M220 48v55.78c0 35-9.4 68-26.48 92.92C176.13 222.05 152.86 236 128 236s-48.13-13.95-65.52-39.29C45.4 171.83 36 138.83 36 103.79V48a12 12 0 0 1 16.34-11.2C66.66 42.38 95.53 51.7 128 51.7s61.34-9.32 75.66-14.88A12 12 0 0 1 220 48m-8 0a4 4 0 0 0-5.44-3.74C191.72 50 161.77 59.7 128 59.7S64.28 50 49.44 44.27A4.1 4.1 0 0 0 48 44a3.87 3.87 0 0 0-2.23.7A4 4 0 0 0 44 48v55.77C44 172.28 81.68 228 128 228s84-55.72 84-124.21Z"/></svg>

import type { SVGProps } from "react";

export function PhMaskHappyThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M187 125.33a4 4 0 1 1-6 5.33c-3.4-3.8-10.72-6.66-17-6.66s-13.62 2.86-17 6.66a4 4 0 0 1-3 1.34a4 4 0 0 1-3-6.67c4.92-5.5 14.37-9.33 23-9.33s18.06 3.83 23 9.33m-78 5.33a4 4 0 1 0 6-5.33c-4.92-5.5-14.37-9.33-23-9.33s-18.06 3.83-23 9.33a4 4 0 0 0 3 6.67a4 4 0 0 0 3-1.34c3.4-3.8 10.72-6.66 17-6.66s13.62 2.86 17 6.66m50.3 34.74a40.89 40.89 0 0 1-62.64 0a4 4 0 0 0-6.09 5.2a48.92 48.92 0 0 0 74.82 0a4 4 0 0 0-6.09-5.2M220 48v55.78c0 35-9.4 68-26.48 92.92C176.13 222.05 152.86 236 128 236s-48.13-13.95-65.52-39.29C45.4 171.83 36 138.83 36 103.79V48a12 12 0 0 1 16.34-11.2C66.66 42.38 95.53 51.7 128 51.7s61.34-9.32 75.66-14.88A12 12 0 0 1 220 48m-8 0a4 4 0 0 0-5.44-3.74C191.72 50 161.77 59.7 128 59.7S64.28 50 49.44 44.27A4.1 4.1 0 0 0 48 44a3.87 3.87 0 0 0-2.23.7A4 4 0 0 0 44 48v55.77C44 172.28 81.68 228 128 228s84-55.72 84-124.21Z"/></svg>
  );
}

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M187 125.33a4 4 0 1 1-6 5.33c-3.4-3.8-10.72-6.66-17-6.66s-13.62 2.86-17 6.66a4 4 0 0 1-3 1.34a4 4 0 0 1-3-6.67c4.92-5.5 14.37-9.33 23-9.33s18.06 3.83 23 9.33m-78 5.33a4 4 0 1 0 6-5.33c-4.92-5.5-14.37-9.33-23-9.33s-18.06 3.83-23 9.33a4 4 0 0 0 3 6.67a4 4 0 0 0 3-1.34c3.4-3.8 10.72-6.66 17-6.66s13.62 2.86 17 6.66m50.3 34.74a40.89 40.89 0 0 1-62.64 0a4 4 0 0 0-6.09 5.2a48.92 48.92 0 0 0 74.82 0a4 4 0 0 0-6.09-5.2M220 48v55.78c0 35-9.4 68-26.48 92.92C176.13 222.05 152.86 236 128 236s-48.13-13.95-65.52-39.29C45.4 171.83 36 138.83 36 103.79V48a12 12 0 0 1 16.34-11.2C66.66 42.38 95.53 51.7 128 51.7s61.34-9.32 75.66-14.88A12 12 0 0 1 220 48m-8 0a4 4 0 0 0-5.44-3.74C191.72 50 161.77 59.7 128 59.7S64.28 50 49.44 44.27A4.1 4.1 0 0 0 48 44a3.87 3.87 0 0 0-2.23.7A4 4 0 0 0 44 48v55.77C44 172.28 81.68 228 128 228s84-55.72 84-124.21Z"/></svg>
</template>

.icon-mask-happy-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M187%20125.33a4%204%200%201%201-6%205.33c-3.4-3.8-10.72-6.66-17-6.66s-13.62%202.86-17%206.66a4%204%200%200%201-3%201.34a4%204%200%200%201-3-6.67c4.92-5.5%2014.37-9.33%2023-9.33s18.06%203.83%2023%209.33m-78%205.33a4%204%200%201%200%206-5.33c-4.92-5.5-14.37-9.33-23-9.33s-18.06%203.83-23%209.33a4%204%200%200%200%203%206.67a4%204%200%200%200%203-1.34c3.4-3.8%2010.72-6.66%2017-6.66s13.62%202.86%2017%206.66m50.3%2034.74a40.89%2040.89%200%200%201-62.64%200a4%204%200%200%200-6.09%205.2a48.92%2048.92%200%200%200%2074.82%200a4%204%200%200%200-6.09-5.2M220%2048v55.78c0%2035-9.4%2068-26.48%2092.92C176.13%20222.05%20152.86%20236%20128%20236s-48.13-13.95-65.52-39.29C45.4%20171.83%2036%20138.83%2036%20103.79V48a12%2012%200%200%201%2016.34-11.2C66.66%2042.38%2095.53%2051.7%20128%2051.7s61.34-9.32%2075.66-14.88A12%2012%200%200%201%20220%2048m-8%200a4%204%200%200%200-5.44-3.74C191.72%2050%20161.77%2059.7%20128%2059.7S64.28%2050%2049.44%2044.27A4.1%204.1%200%200%200%2048%2044a3.87%203.87%200%200%200-2.23.7A4%204%200%200%200%2044%2048v55.77C44%20172.28%2081.68%20228%20128%20228s84-55.72%2084-124.21Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M187%20125.33a4%204%200%201%201-6%205.33c-3.4-3.8-10.72-6.66-17-6.66s-13.62%202.86-17%206.66a4%204%200%200%201-3%201.34a4%204%200%200%201-3-6.67c4.92-5.5%2014.37-9.33%2023-9.33s18.06%203.83%2023%209.33m-78%205.33a4%204%200%201%200%206-5.33c-4.92-5.5-14.37-9.33-23-9.33s-18.06%203.83-23%209.33a4%204%200%200%200%203%206.67a4%204%200%200%200%203-1.34c3.4-3.8%2010.72-6.66%2017-6.66s13.62%202.86%2017%206.66m50.3%2034.74a40.89%2040.89%200%200%201-62.64%200a4%204%200%200%200-6.09%205.2a48.92%2048.92%200%200%200%2074.82%200a4%204%200%200%200-6.09-5.2M220%2048v55.78c0%2035-9.4%2068-26.48%2092.92C176.13%20222.05%20152.86%20236%20128%20236s-48.13-13.95-65.52-39.29C45.4%20171.83%2036%20138.83%2036%20103.79V48a12%2012%200%200%201%2016.34-11.2C66.66%2042.38%2095.53%2051.7%20128%2051.7s61.34-9.32%2075.66-14.88A12%2012%200%200%201%20220%2048m-8%200a4%204%200%200%200-5.44-3.74C191.72%2050%20161.77%2059.7%20128%2059.7S64.28%2050%2049.44%2044.27A4.1%204.1%200%200%200%2048%2044a3.87%203.87%200%200%200-2.23.7A4%204%200%200%200%2044%2048v55.77C44%20172.28%2081.68%20228%20128%20228s84-55.72%2084-124.21Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/mask-happy-thin.svg?color=%231a73e8&size=48