The Phosphor shield warning icon depicts a shield with a warning symbol, commonly used to indicate security alerts, potential threats, or an unauthenticated state.
Common uses
- Displaying security vulnerabilities
- Notifying about unencrypted data
- Indicating an unauthenticated user session
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ShieldWarning } from '@phosphor-icons/react';
<ShieldWarning size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ShieldWarning size={24} />thin
<ShieldWarning size={24} weight="thin" />light
<ShieldWarning size={24} weight="light" />bold
<ShieldWarning size={24} weight="bold" />fill
<ShieldWarning size={24} weight="fill" />duotone
<ShieldWarning size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- badgesecurityunsecureddefenseundefendedauthenticationunauthenticatedunguardedunlockedunencryptedencryptionerrorssystemobjectsshieldwarning
FAQ
- What is the purpose of the shield warning icon?
- This icon signifies security-related issues such as warnings, unauthenticated access, or potential threats.
- How do I use the shield warning icon in React?
- Import it from the library and use it as a component: import { ShieldWarning } from '@phosphor-icons/react'
- What is the license for this icon?
- The Phosphor icon library, including the shield warning 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 →