# Animated alert icons

> 5 free animated alert icons, including Alert circle, Alert octagon and Alert triangle. For React, shadcn/ui and Lottie JSON, MIT licensed.

Warning triangles, alert circles and stop signs that pulse just enough to be noticed without flashing. Put them next to a failed form field, at the start of an error banner or in a status column, where a still icon is easy to scroll past.

Of the 5 icons, 4 loop continuously and 1 replays on every click. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

## Icons

- [Alert circle](https://useanimations.com/icons/alert-circle) (`alertCircle`, loop)
- [Alert octagon](https://useanimations.com/icons/alert-octagon) (`alertOctagon`, loop)
- [Alert triangle](https://useanimations.com/icons/alert-triangle) (`alertTriangle`, loop)
- [Error](https://useanimations.com/icons/error) (`error`, loop)
- [X Octagon](https://useanimations.com/icons/x-octagon) (`xOctagon`, click-replay)

## Where to use them

- Inline validation errors under form fields
- Error and warning banners at the top of a page
- Failed rows in a deploy or job status table
- Destructive-action confirmation dialogs
- System status pages during an incident

## By interaction

- [Looping animated icons](https://useanimations.com/interactions/loop) (4): Plays continuously; stays on the static first frame when reduced motion is preferred.
- [Click animated icons](https://useanimations.com/interactions/click-replay) (1): Replays once from the start on every click unless reduced motion is preferred.

## Code

```jsx
import UseAnimations from 'react-useanimations';
import alertTriangle from 'react-useanimations/lib/alertTriangle';

<UseAnimations animation={alertTriangle} size={32} />
```

```bash
npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
```

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

## FAQ

### Which animated alert icons are included?

5 icons: Alert circle, Alert octagon, Alert triangle, Error and X Octagon. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

### How do I use these animated alert icons in React?

Install react-useanimations, add import alertTriangle from 'react-useanimations/lib/alertTriangle' and render <UseAnimations animation={alertTriangle} size={32} />. The icon plays its loop interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/alert-triangle.json instead.

### Can I use these animated alert icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/alert-triangle.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. Error uses After Effects expressions, so on the web it needs lottie-web's full build.

## More categories

- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated media player icons](https://useanimations.com/categories/media) (28)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/alerts