exclamation circle icon

Common uses

• Displaying validation errors for form fields.
• Signaling critical system status alerts.
• Highlighting important user-facing warnings.

Use it in React

npm i @heroicons/react

import { ExclamationCircleIcon } from '@heroicons/react/24/outline';

<ExclamationCircleIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<ExclamationCircleIcon className="size-6" />

<ExclamationCircleIcon className="size-6" />

<ExclamationCircleIcon className="size-6" />

<ExclamationCircleIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

exclamationcirclewarning iconalert iconerror iconcaution icon

FAQ

What is the primary purpose of the exclamation circle icon?

It's used to draw attention to warnings, errors, or important information that requires user awareness.

How do I use this icon in a React application?

Import it using `import { ExclamationCircleIcon } from '@heroicons/react/24/outline'` and then render the component.

What is the license for Heroicons?

Heroicons are distributed under the MIT license, allowing for free use in both open-source and commercial projects.

Related icons

The same idea in other libraries, and near matches in Heroicons.