Gentleface › Health & medical › face-mask

face-mask icon

Face mask: face mask, mask required, medical mask, surgical mask. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.491 4.281C13.813 4.472 14.093 4.745 14.33 5.101C14.556 5.44 14.727 5.829 14.843 6.268C14.948 6.665 15 7.075 15 7.5C15 7.925 14.948 8.335 14.843 8.732C14.727 9.171 14.556 9.56 14.33 9.899C14.093 10.255 13.813 10.528 13.491 10.719C13.281 10.844 13.063 10.928 12.837 10.969C12.719 10.991 12.598 10.965 12.5 10.897C12.332 11.089 12.13 11.244 11.894 11.362L9.171 12.724C8.802 12.908 8.412 13 8 13C7.588 13 7.198 12.908 6.829 12.724L4.106 11.362C3.87 11.244 3.668 11.089 3.5 10.897C3.402 10.965 3.281 10.991 3.163 10.969C2.937 10.928 2.719 10.844 2.509 10.719C2.187 10.528 1.907 10.255 1.67 9.899C1.444 9.56 1.273 9.171 1.157 8.732C1.052 8.335 1 7.925 1 7.5C1 7.075 1.052 6.665 1.157 6.268C1.273 5.829 1.444 5.44 1.67 5.101C1.907 4.745 2.187 4.472 2.509 4.281C2.719 4.156 2.937 4.072 3.163 4.031C3.281 4.009 3.402 4.035 3.5 4.103C3.668 3.911 3.87 3.756 4.106 3.638L6.829 2.276C7.198 2.092 7.588 2 8 2C8.412 2 8.802 2.092 9.171 2.276L11.894 3.638C12.13 3.756 12.332 3.911 12.5 4.103C12.598 4.035 12.719 4.009 12.837 4.031C13.063 4.072 13.281 4.156 13.491 4.281ZM4.553 10.467L7.276 11.829C7.504 11.943 7.745 12 8 12C8.255 12 8.496 11.943 8.724 11.829L11.447 10.467C11.617 10.383 11.751 10.26 11.851 10.099C11.95 9.938 12 9.762 12 9.573L12 5.427C12 5.238 11.95 5.062 11.851 4.901C11.751 4.74 11.617 4.617 11.447 4.533L8.724 3.171C8.496 3.057 8.255 3 8 3C7.745 3 7.504 3.057 7.276 3.171L4.553 4.533C4.383 4.617 4.249 4.74 4.149 4.901C4.05 5.062 4 5.238 4 5.427L4 9.573C4 9.762 4.05 9.938 4.149 10.099C4.249 10.26 4.383 10.383 4.553 10.467ZM12.981 9.859C13.173 9.746 13.345 9.574 13.498 9.344C13.663 9.097 13.789 8.808 13.876 8.477C13.959 8.164 14 7.838 14 7.5C14 7.162 13.959 6.836 13.876 6.523C13.789 6.192 13.663 5.903 13.498 5.656C13.345 5.426 13.173 5.254 12.981 5.141L12.98 5.14C12.993 5.234 13 5.33 13 5.427L13 9.573C13 9.67 12.993 9.766 12.98 9.86L12.981 9.859ZM3.02 5.14L3.019 5.141C2.827 5.254 2.655 5.426 2.502 5.656C2.337 5.903 2.211 6.192 2.124 6.523C2.041 6.836 2 7.162 2 7.5C2 7.838 2.041 8.164 2.124 8.477C2.211 8.808 2.337 9.097 2.502 9.344C2.655 9.574 2.827 9.746 3.019 9.859L3.02 9.86C3.007 9.766 3 9.67 3 9.573L3 5.427C3 5.33 3.007 5.234 3.02 5.14ZM5 6.5C5 6.359 5.048 6.241 5.144 6.144C5.241 6.048 5.359 6 5.5 6L10.5 6C10.641 6 10.759 6.048 10.856 6.144C10.952 6.241 11 6.359 11 6.5C11 6.641 10.952 6.759 10.856 6.856C10.759 6.952 10.641 7 10.5 7L5.5 7C5.359 7 5.241 6.952 5.144 6.856C5.048 6.759 5 6.641 5 6.5ZM5 8.5C5 8.359 5.048 8.241 5.144 8.144C5.241 8.048 5.359 8 5.5 8L10.5 8C10.641 8 10.759 8.048 10.856 8.144C10.952 8.241 11 8.359 11 8.5C11 8.641 10.952 8.759 10.856 8.856C10.759 8.952 10.641 9 10.5 9L5.5 9C5.359 9 5.241 8.952 5.144 8.856C5.048 8.759 5 8.641 5 8.5Z"/></svg>

React

// Gentleface "face-mask" (line-round), MIT. https://gentleface.com/icons/face-mask
import type { SVGProps } from 'react';

export function FaceMaskIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M13.491 4.281C13.813 4.472 14.093 4.745 14.33 5.101C14.556 5.44 14.727 5.829 14.843 6.268C14.948 6.665 15 7.075 15 7.5C15 7.925 14.948 8.335 14.843 8.732C14.727 9.171 14.556 9.56 14.33 9.899C14.093 10.255 13.813 10.528 13.491 10.719C13.281 10.844 13.063 10.928 12.837 10.969C12.719 10.991 12.598 10.965 12.5 10.897C12.332 11.089 12.13 11.244 11.894 11.362L9.171 12.724C8.802 12.908 8.412 13 8 13C7.588 13 7.198 12.908 6.829 12.724L4.106 11.362C3.87 11.244 3.668 11.089 3.5 10.897C3.402 10.965 3.281 10.991 3.163 10.969C2.937 10.928 2.719 10.844 2.509 10.719C2.187 10.528 1.907 10.255 1.67 9.899C1.444 9.56 1.273 9.171 1.157 8.732C1.052 8.335 1 7.925 1 7.5C1 7.075 1.052 6.665 1.157 6.268C1.273 5.829 1.444 5.44 1.67 5.101C1.907 4.745 2.187 4.472 2.509 4.281C2.719 4.156 2.937 4.072 3.163 4.031C3.281 4.009 3.402 4.035 3.5 4.103C3.668 3.911 3.87 3.756 4.106 3.638L6.829 2.276C7.198 2.092 7.588 2 8 2C8.412 2 8.802 2.092 9.171 2.276L11.894 3.638C12.13 3.756 12.332 3.911 12.5 4.103C12.598 4.035 12.719 4.009 12.837 4.031C13.063 4.072 13.281 4.156 13.491 4.281ZM4.553 10.467L7.276 11.829C7.504 11.943 7.745 12 8 12C8.255 12 8.496 11.943 8.724 11.829L11.447 10.467C11.617 10.383 11.751 10.26 11.851 10.099C11.95 9.938 12 9.762 12 9.573L12 5.427C12 5.238 11.95 5.062 11.851 4.901C11.751 4.74 11.617 4.617 11.447 4.533L8.724 3.171C8.496 3.057 8.255 3 8 3C7.745 3 7.504 3.057 7.276 3.171L4.553 4.533C4.383 4.617 4.249 4.74 4.149 4.901C4.05 5.062 4 5.238 4 5.427L4 9.573C4 9.762 4.05 9.938 4.149 10.099C4.249 10.26 4.383 10.383 4.553 10.467ZM12.981 9.859C13.173 9.746 13.345 9.574 13.498 9.344C13.663 9.097 13.789 8.808 13.876 8.477C13.959 8.164 14 7.838 14 7.5C14 7.162 13.959 6.836 13.876 6.523C13.789 6.192 13.663 5.903 13.498 5.656C13.345 5.426 13.173 5.254 12.981 5.141L12.98 5.14C12.993 5.234 13 5.33 13 5.427L13 9.573C13 9.67 12.993 9.766 12.98 9.86L12.981 9.859ZM3.02 5.14L3.019 5.141C2.827 5.254 2.655 5.426 2.502 5.656C2.337 5.903 2.211 6.192 2.124 6.523C2.041 6.836 2 7.162 2 7.5C2 7.838 2.041 8.164 2.124 8.477C2.211 8.808 2.337 9.097 2.502 9.344C2.655 9.574 2.827 9.746 3.019 9.859L3.02 9.86C3.007 9.766 3 9.67 3 9.573L3 5.427C3 5.33 3.007 5.234 3.02 5.14ZM5 6.5C5 6.359 5.048 6.241 5.144 6.144C5.241 6.048 5.359 6 5.5 6L10.5 6C10.641 6 10.759 6.048 10.856 6.144C10.952 6.241 11 6.359 11 6.5C11 6.641 10.952 6.759 10.856 6.856C10.759 6.952 10.641 7 10.5 7L5.5 7C5.359 7 5.241 6.952 5.144 6.856C5.048 6.759 5 6.641 5 6.5ZM5 8.5C5 8.359 5.048 8.241 5.144 8.144C5.241 8.048 5.359 8 5.5 8L10.5 8C10.641 8 10.759 8.048 10.856 8.144C10.952 8.241 11 8.359 11 8.5C11 8.641 10.952 8.759 10.856 8.856C10.759 8.952 10.641 9 10.5 9L5.5 9C5.359 9 5.241 8.952 5.144 8.856C5.048 8.759 5 8.641 5 8.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/face-mask.md

Svelte

Svelte: see /icons/face-mask.md

HTML img

HTML img: see /icons/face-mask.md

CSS

CSS: see /icons/face-mask.md

Data URL

Data URL: see /icons/face-mask.md

Sprite

Sprite: see /icons/face-mask.md

SwiftUI

SwiftUI: see /icons/face-mask.md

Compose

Compose: see /icons/face-mask.md

Android XML

Android XML: see /icons/face-mask.md

Flutter

Flutter: see /icons/face-mask.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

face mask, mask required, medical mask, surgical mask, ppe

Don’t confuse with

mask: mask is the layer or clipping mask (design)

Not for

layer mask (use mask): a medical face mask

Tags

mask, face-mask, medical, surgical, covid, hygiene, protection, virus, respirator

Category

Health & medical

Component name

FaceMaskIcon

History

2026-10-16 added

More health & medical icons

bandage bone cigarette cigarette-off first-aid-kit heart-pulse heart-pulse-alert hospital-bed lungs pill pill-bottle pill-check pill-clock pill-plus prescription stethoscope · all health & medical icons

For agents

Metadata: /icons/face-mask.json · Markdown: /icons/face-mask.md · SVG: https://gentleface.com/svg/{style}/16/face-mask.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/face-mask.png

face-mask icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More health & medical icons

For agents

face-mask icon