The Phosphor face mask icon visually represents personal protective equipment, commonly used in UIs to signify health, safety, or medical contexts.
Common uses
- Indicating COVID-19 related information.
- Representing a health or medical service.
- Symbolizing a requirement for protective gear.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { FaceMask } from '@phosphor-icons/react';
<FaceMask size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<FaceMask size={24} />thin
<FaceMask size={24} weight="thin" />light
<FaceMask size={24} weight="light" />bold
<FaceMask size={24} weight="bold" />fill
<FaceMask size={24} weight="fill" />duotone
<FaceMask size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- health & wellness
- Keywords
- ppefacemaskcovid-19coronavirusflucoldhealth & wellnessfacemaskcovid maskhealth mask
FAQ
- What is this icon for?
- This icon is used to represent face masks, often in the context of health, safety, or medical information like COVID-19 precautions.
- How do I use this in React?
- You can import and use it in your React project with: import { FaceMask } from '@phosphor-icons/react'
- What is the license for this icon?
- The Phosphor icon library, including the face mask icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →