The Heroicons exclamation triangle icon depicts a warning symbol and is commonly used to indicate alerts, errors, or important notices.
Common uses
- Displaying error messages
- Signaling critical warnings
- Highlighting important user notifications
Use it in React
Install
npm i @heroicons/reactImport & render
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
<ExclamationTriangleIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<ExclamationTriangleIcon className="size-6" />24/solid
<ExclamationTriangleIcon className="size-6" />20/solid
<ExclamationTriangleIcon className="size-6" />16/solid
<ExclamationTriangleIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- exclamationtrianglewarning iconalert iconerror symboldanger icon
FAQ
- What is the exclamation triangle icon used for?
- It's typically used to draw attention to warnings, errors, or important alerts that require user acknowledgment.
- How do I use the exclamation triangle icon in React?
- You can import it from Heroicons like this: import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'. Then use it as a component: <ExclamationTriangleIcon className="h-6 w-6" />.
- What is the license for Heroicons?
- Heroicons are available under the MIT license, which allows for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Heroicons.