---
title: "Notification badge animated icon"
description: "Notification badge animated icon (Notifications). A new notification arrives: the badge springs out of the app tile. Light: the badge ducks into the tile's corner, shrinking, then springs back out to its spot and pops past full size before it settles; the tile recoils as the badge launches. Strong: a deeper duck, a bigger pop with two rebounds, a second ping, and the tile recoils harder and rocks to rest."
canonical: https://generativeicons.com/icons/notification-badge/
---

# Notification badge animated icon

A new notification arrives: the badge springs out of the app tile. Light: the badge ducks into the tile's corner, shrinking, then springs back out to its spot and pops past full size before it settles; the tile recoils as the badge launches. Strong: a deeper duck, a bigger pop with two rebounds, a second ping, and the tile recoils harder and rocks to rest.

- Id: `notification-badge`
- Category: Notifications
- Search terms: unread count, badge count, notification count, app badge, number badge, icon badge, unread, new items, alert count, app tile
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/notification-badge.lottie (dotLottie, 3681 bytes, sha256 8ae258826495e489895117a547e98e45fa1a34ca5668ff8eb3d52b08cb746da1)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add notification-badge
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/notification-badge.mjs';

export function NotificationBadgeIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/notification-badge.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/notification-badge/ · https://generativeicons.com/api/icons/notification-badge