---
title: "Quiet hours animated icon"
description: "Quiet hours animated icon (Preferences). Light: the bell nods 5° while a slash draws across it. Strong: the bell rings 12° each way, the slash strikes through it with a stop and the bell freezes. Reverse: the slash wipes back and the bell rings once, free again."
canonical: https://generativeicons.com/icons/quiet-hours/
---

# Quiet hours animated icon

Light: the bell nods 5° while a slash draws across it. Strong: the bell rings 12° each way, the slash strikes through it with a stop and the bell freezes. Reverse: the slash wipes back and the bell rings once, free again.

- Id: `quiet-hours`
- Category: Preferences
- Search terms: silent mode, silence notifications, mute notifications, mute alerts, no alerts, downtime, bedtime, sleep mode, focus mode, quiet time, after hours
- Two states: on to muted, played forward and back
- 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/quiet-hours.lottie (dotLottie, 11567 bytes, sha256 4c96e123c15849be50b53848815ec5965fc75af55b3f38e1c9af907bcfe3e562)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add quiet-hours
```

## React

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

export function QuietHoursIcon() {
  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/quiet-hours.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/quiet-hours/ · https://generativeicons.com/api/icons/quiet-hours