Skip to content

5 icons · MIT licensed

Animated alert icons

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.

All alerts icons

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 · 4

    Plays continuously; stays on the static first frame when reduced motion is preferred. Alert circle, Alert octagon, Alert triangle, Error.

  • Click animated icons · 1

    Replays once from the start on every click unless reduced motion is preferred. X Octagon.

Add one to your app

With React, install react-useanimations and import the icon; it plays its loop interaction on its own. Every icon in this category works the same way: swap alertTriangle for the name on its page.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import alertTriangle from 'react-useanimations/lib/alertTriangle';

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

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

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.