face mask icon
face-mask-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- face-mask-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the face mask icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M92 88h72a12 12 0 0 1 0 24H92a12 12 0 0 1 0-24m72 40H92a12 12 0 0 0 0 24h72a12 12 0 0 0 0-24m92-24v24a36 36 0 0 1-36 36h-6.15c-7.22 15.48-20.72 28.87-40.07 39.52a169 169 0 0 1-43.43 16.25a12.1 12.1 0 0 1-4.7 0a169 169 0 0 1-43.43-16.25c-19.35-10.65-32.85-24-40.07-39.52H36a36 36 0 0 1-36-36v-24a36 36 0 0 1 36-36h2a19.93 19.93 0 0 1 10.55-9.77l72-28.8a19.9 19.9 0 0 1 14.86 0l72 28.8A19.93 19.93 0 0 1 218 68h2a36 36 0 0 1 36 36M36.13 140c-.08-1.32-.13-2.65-.13-4V92a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12ZM196 79.51l-68-27.2l-68 27.2V136c0 40.63 55.72 56.65 68 59.69c12.25-3 68-19.05 68-59.69ZM232 104a12 12 0 0 0-12-12v44c0 1.35-.05 2.68-.13 4h.13a12 12 0 0 0 12-12Z"/></svg>
React
import type { SVGProps } from "react";
export function PhFaceMaskBold(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="M92 88h72a12 12 0 0 1 0 24H92a12 12 0 0 1 0-24m72 40H92a12 12 0 0 0 0 24h72a12 12 0 0 0 0-24m92-24v24a36 36 0 0 1-36 36h-6.15c-7.22 15.48-20.72 28.87-40.07 39.52a169 169 0 0 1-43.43 16.25a12.1 12.1 0 0 1-4.7 0a169 169 0 0 1-43.43-16.25c-19.35-10.65-32.85-24-40.07-39.52H36a36 36 0 0 1-36-36v-24a36 36 0 0 1 36-36h2a19.93 19.93 0 0 1 10.55-9.77l72-28.8a19.9 19.9 0 0 1 14.86 0l72 28.8A19.93 19.93 0 0 1 218 68h2a36 36 0 0 1 36 36M36.13 140c-.08-1.32-.13-2.65-.13-4V92a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12ZM196 79.51l-68-27.2l-68 27.2V136c0 40.63 55.72 56.65 68 59.69c12.25-3 68-19.05 68-59.69ZM232 104a12 12 0 0 0-12-12v44c0 1.35-.05 2.68-.13 4h.13a12 12 0 0 0 12-12Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M92 88h72a12 12 0 0 1 0 24H92a12 12 0 0 1 0-24m72 40H92a12 12 0 0 0 0 24h72a12 12 0 0 0 0-24m92-24v24a36 36 0 0 1-36 36h-6.15c-7.22 15.48-20.72 28.87-40.07 39.52a169 169 0 0 1-43.43 16.25a12.1 12.1 0 0 1-4.7 0a169 169 0 0 1-43.43-16.25c-19.35-10.65-32.85-24-40.07-39.52H36a36 36 0 0 1-36-36v-24a36 36 0 0 1 36-36h2a19.93 19.93 0 0 1 10.55-9.77l72-28.8a19.9 19.9 0 0 1 14.86 0l72 28.8A19.93 19.93 0 0 1 218 68h2a36 36 0 0 1 36 36M36.13 140c-.08-1.32-.13-2.65-.13-4V92a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12ZM196 79.51l-68-27.2l-68 27.2V136c0 40.63 55.72 56.65 68 59.69c12.25-3 68-19.05 68-59.69ZM232 104a12 12 0 0 0-12-12v44c0 1.35-.05 2.68-.13 4h.13a12 12 0 0 0 12-12Z"/></svg> </template>
CSS
.icon-face-mask-bold {
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%22M92%2088h72a12%2012%200%200%201%200%2024H92a12%2012%200%200%201%200-24m72%2040H92a12%2012%200%200%200%200%2024h72a12%2012%200%200%200%200-24m92-24v24a36%2036%200%200%201-36%2036h-6.15c-7.22%2015.48-20.72%2028.87-40.07%2039.52a169%20169%200%200%201-43.43%2016.25a12.1%2012.1%200%200%201-4.7%200a169%20169%200%200%201-43.43-16.25c-19.35-10.65-32.85-24-40.07-39.52H36a36%2036%200%200%201-36-36v-24a36%2036%200%200%201%2036-36h2a19.93%2019.93%200%200%201%2010.55-9.77l72-28.8a19.9%2019.9%200%200%201%2014.86%200l72%2028.8A19.93%2019.93%200%200%201%20218%2068h2a36%2036%200%200%201%2036%2036M36.13%20140c-.08-1.32-.13-2.65-.13-4V92a12%2012%200%200%200-12%2012v24a12%2012%200%200%200%2012%2012ZM196%2079.51l-68-27.2l-68%2027.2V136c0%2040.63%2055.72%2056.65%2068%2059.69c12.25-3%2068-19.05%2068-59.69ZM232%20104a12%2012%200%200%200-12-12v44c0%201.35-.05%202.68-.13%204h.13a12%2012%200%200%200%2012-12Z%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%22M92%2088h72a12%2012%200%200%201%200%2024H92a12%2012%200%200%201%200-24m72%2040H92a12%2012%200%200%200%200%2024h72a12%2012%200%200%200%200-24m92-24v24a36%2036%200%200%201-36%2036h-6.15c-7.22%2015.48-20.72%2028.87-40.07%2039.52a169%20169%200%200%201-43.43%2016.25a12.1%2012.1%200%200%201-4.7%200a169%20169%200%200%201-43.43-16.25c-19.35-10.65-32.85-24-40.07-39.52H36a36%2036%200%200%201-36-36v-24a36%2036%200%200%201%2036-36h2a19.93%2019.93%200%200%201%2010.55-9.77l72-28.8a19.9%2019.9%200%200%201%2014.86%200l72%2028.8A19.93%2019.93%200%200%201%20218%2068h2a36%2036%200%200%201%2036%2036M36.13%20140c-.08-1.32-.13-2.65-.13-4V92a12%2012%200%200%200-12%2012v24a12%2012%200%200%200%2012%2012ZM196%2079.51l-68-27.2l-68%2027.2V136c0%2040.63%2055.72%2056.65%2068%2059.69c12.25-3%2068-19.05%2068-59.69ZM232%20104a12%2012%200%200%200-12-12v44c0%201.35-.05%202.68-.13%204h.13a12%2012%200%200%200%2012-12Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/face-mask-bold.svg?color=%231a73e8&size=48
