The Heroicons shield exclamation icon depicts a shield with an exclamation mark, commonly used to indicate security alerts, warnings, or important notifications.
Common uses
- Displaying security breach warnings
- Highlighting urgent system status updates
- Indicating a need for user attention on a security setting
Use it in React
Install
npm i @heroicons/reactImport & render
import { ShieldExclamationIcon } from '@heroicons/react/24/outline';
<ShieldExclamationIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ShieldExclamationIcon className="size-6" />24/solid
<ShieldExclamationIcon className="size-6" />20/solid
<ShieldExclamationIcon className="size-6" />16/solid
<ShieldExclamationIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- shieldexclamationsecurity alertwarning shieldalert iconnotification shield
FAQ
- What is the shield exclamation icon used for?
- It's typically used to draw attention to security-related alerts or warnings, signifying potential issues or important notifications.
- How do I use the shield exclamation icon in React?
- You can import and use it like this: import { ShieldExclamationIcon } from '@heroicons/react/24/outline'. Then render it as <ShieldExclamationIcon className="h-6 w-6" />.
- What is the license for Heroicons?
- Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons 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 →