The Phosphor warning octagon icon depicts a red octagon with an exclamation mark, commonly used to signify alerts, danger, or critical errors in a user interface.
Common uses
- Displaying critical error messages
- Indicating a dangerous action confirmation
- Highlighting system status alerts
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { WarningOctagon } from '@phosphor-icons/react';
<WarningOctagon size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<WarningOctagon size={24} />thin
<WarningOctagon size={24} weight="thin" />light
<WarningOctagon size={24} weight="light" />bold
<WarningOctagon size={24} weight="bold" />fill
<WarningOctagon size={24} weight="fill" />duotone
<WarningOctagon size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- system
- Keywords
- alertdangerdangerouscautionerrors8eightsystemwarningoctagonalert octagondanger octagoncaution symbolsystem alert
FAQ
- What is the warning octagon icon used for?
- It's used to draw attention to serious issues like errors, dangers, or critical alerts within an application.
- How do I use the warning octagon icon in React?
- You can import and use it like this: import { WarningOctagon } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the warning octagon 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 →