Skip to content

4 icons · MIT licensed

Animated notification bell icons

Bell icons that ring for new activity or switch between bell and bell-off. A short swing on the bell draws the eye to an unread count, and the toggling versions double as the mute control for a channel or thread.

Of the 4 icons, 2 loop continuously and 2 toggle between two states on 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 notifications icons

Where to use them

  • Notification centre button in an app header
  • Unread badge that rings when a new message arrives
  • Mute and unmute switch for a channel or thread
  • Email and push notification settings
  • Reminder and alert subscription buttons

By interaction

  • Looping animated icons · 2

    Plays continuously; stays on the static first frame when reduced motion is preferred. Notification V3, Notification V4.

  • Click-to-toggle animated icons · 2

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Notification, Notification V2.

Add one to your app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/notification.json
import { AnimatedNotification } from '@/components/animations/notification';

<AnimatedNotification 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 notification bell icons are included?

4 icons: Notification, Notification V2, Notification V3 and Notification V4. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated notification bell icons in React?

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

Can I use these animated notification bell icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/notification.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.