head side mask icon

head-side-mask from Unicons Monochrome by Iconscout · Monochrome · Medical · Apache-2.0 Free for personal and commercial use.

Name: head-side-mask
Set: Unicons Monochrome
Style: Monochrome
Category: Medical
Viewbox: 24×24
License: Apache 2.0

The same icon in other sets

head-side-maskFont Awesome 6 Solid head-side-maskFont Awesome Solid head-side-maskUnicons head-side-maskUnicons Solid

More medical icons from Unicons Monochrome

Use the head side mask icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.476 9.287L12.337 12H4.5a1 1 0 0 0-.938 1.348l1.448 3.895a1 1 0 0 0 .043.099A2.98 2.98 0 0 0 7.736 19H12.5a1 1 0 0 0 .32-.052l5.864-1.978l.616-2.319l-5.8 1.956v-2.886l6.634-2.211l.333-1.254A1 1 0 0 0 20.5 10v-.228c0-.163-.014-.324-.024-.485"/><path fill="currentColor" d="M3.508 12.894v.03zm.17-.465A1 1 0 0 1 4.5 12h7.837l8.14-2.713a7.676 7.676 0 0 0-7.247-7.284a7.36 7.36 0 0 0-5.453 2.114A7.44 7.44 0 0 0 5.5 9.465l-1.852 3.011c-.005.009-.004.02-.01.03c.015-.026.024-.053.04-.077m9.822 1.292v2.886l5.8-1.956l1.167-4.395l-.333 1.254zm5.037 3.801l.2-.754l-.053.202l-5.865 1.978A1 1 0 0 1 12.5 19h-4v2a1 1 0 0 0 1 1h9a1 1 0 0 0 .96-1.277Z" opacity=".5"/></svg>

React

import type { SVGProps } from "react";

export function UimHeadSideMask(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="M20.476 9.287L12.337 12H4.5a1 1 0 0 0-.938 1.348l1.448 3.895a1 1 0 0 0 .043.099A2.98 2.98 0 0 0 7.736 19H12.5a1 1 0 0 0 .32-.052l5.864-1.978l.616-2.319l-5.8 1.956v-2.886l6.634-2.211l.333-1.254A1 1 0 0 0 20.5 10v-.228c0-.163-.014-.324-.024-.485"/><path fill="currentColor" d="M3.508 12.894v.03zm.17-.465A1 1 0 0 1 4.5 12h7.837l8.14-2.713a7.676 7.676 0 0 0-7.247-7.284a7.36 7.36 0 0 0-5.453 2.114A7.44 7.44 0 0 0 5.5 9.465l-1.852 3.011c-.005.009-.004.02-.01.03c.015-.026.024-.053.04-.077m9.822 1.292v2.886l5.8-1.956l1.167-4.395l-.333 1.254zm5.037 3.801l.2-.754l-.053.202l-5.865 1.978A1 1 0 0 1 12.5 19h-4v2a1 1 0 0 0 1 1h9a1 1 0 0 0 .96-1.277Z" opacity=".5"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.476 9.287L12.337 12H4.5a1 1 0 0 0-.938 1.348l1.448 3.895a1 1 0 0 0 .043.099A2.98 2.98 0 0 0 7.736 19H12.5a1 1 0 0 0 .32-.052l5.864-1.978l.616-2.319l-5.8 1.956v-2.886l6.634-2.211l.333-1.254A1 1 0 0 0 20.5 10v-.228c0-.163-.014-.324-.024-.485"/><path fill="currentColor" d="M3.508 12.894v.03zm.17-.465A1 1 0 0 1 4.5 12h7.837l8.14-2.713a7.676 7.676 0 0 0-7.247-7.284a7.36 7.36 0 0 0-5.453 2.114A7.44 7.44 0 0 0 5.5 9.465l-1.852 3.011c-.005.009-.004.02-.01.03c.015-.026.024-.053.04-.077m9.822 1.292v2.886l5.8-1.956l1.167-4.395l-.333 1.254zm5.037 3.801l.2-.754l-.053.202l-5.865 1.978A1 1 0 0 1 12.5 19h-4v2a1 1 0 0 0 1 1h9a1 1 0 0 0 .96-1.277Z" opacity=".5"/></svg>
</template>

CSS

.icon-head-side-mask {
  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%22M20.476%209.287L12.337%2012H4.5a1%201%200%200%200-.938%201.348l1.448%203.895a1%201%200%200%200%20.043.099A2.98%202.98%200%200%200%207.736%2019H12.5a1%201%200%200%200%20.32-.052l5.864-1.978l.616-2.319l-5.8%201.956v-2.886l6.634-2.211l.333-1.254A1%201%200%200%200%2020.5%2010v-.228c0-.163-.014-.324-.024-.485%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.508%2012.894v.03zm.17-.465A1%201%200%200%201%204.5%2012h7.837l8.14-2.713a7.676%207.676%200%200%200-7.247-7.284a7.36%207.36%200%200%200-5.453%202.114A7.44%207.44%200%200%200%205.5%209.465l-1.852%203.011c-.005.009-.004.02-.01.03c.015-.026.024-.053.04-.077m9.822%201.292v2.886l5.8-1.956l1.167-4.395l-.333%201.254zm5.037%203.801l.2-.754l-.053.202l-5.865%201.978A1%201%200%200%201%2012.5%2019h-4v2a1%201%200%200%200%201%201h9a1%201%200%200%200%20.96-1.277Z%22%20opacity%3D%22.5%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%22M20.476%209.287L12.337%2012H4.5a1%201%200%200%200-.938%201.348l1.448%203.895a1%201%200%200%200%20.043.099A2.98%202.98%200%200%200%207.736%2019H12.5a1%201%200%200%200%20.32-.052l5.864-1.978l.616-2.319l-5.8%201.956v-2.886l6.634-2.211l.333-1.254A1%201%200%200%200%2020.5%2010v-.228c0-.163-.014-.324-.024-.485%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.508%2012.894v.03zm.17-.465A1%201%200%200%201%204.5%2012h7.837l8.14-2.713a7.676%207.676%200%200%200-7.247-7.284a7.36%207.36%200%200%200-5.453%202.114A7.44%207.44%200%200%200%205.5%209.465l-1.852%203.011c-.005.009-.004.02-.01.03c.015-.026.024-.053.04-.077m9.822%201.292v2.886l5.8-1.956l1.167-4.395l-.333%201.254zm5.037%203.801l.2-.754l-.053.202l-5.865%201.978A1%201%200%200%201%2012.5%2019h-4v2a1%201%200%200%200%201%201h9a1%201%200%200%200%20.96-1.277Z%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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