---
title: "Bell ring animated icon"
description: "Bell ring animated icon (Notifications). Light: the bell rocks 6° about its crown and the clapper follows. Strong: it winds back, strikes 14° with the clapper swinging wide, two strike marks flash, and it rings down to rest."
canonical: https://generativeicons.com/icons/bell-ring/
---

# Bell ring animated icon

Light: the bell rocks 6° about its crown and the clapper follows. Strong: it winds back, strikes 14° with the clapper swinging wide, two strike marks flash, and it rings down to rest.

- Id: `bell-ring`
- Category: Notifications
- Search terms: notification, notifications, notify, alert, ringing, ding, notifications on, new alert, incoming alert, doorbell chime
- 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/bell-ring.lottie (dotLottie, 4663 bytes, sha256 fb1cb688890953a4795fb02c8c3f9a0b4ebb5491903e04cfcc10f6c3a650b452)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add bell-ring
```

## React

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

export function BellRingIcon() {
  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/bell-ring.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/bell-ring/ · https://generativeicons.com/api/icons/bell-ring