---
title: "Clock animated icon"
description: "Clock animated icon (Interface). A quarter of an hour passes. Light: the minute hand sweeps from 12 to 3 in one fast move, lands with a hit, recoils and settles; the hour hand is geared to it at a true 12:1 and creeps on 7.5 degrees. Strong: the minute hand jumps in three 5-minute ticks, each a hit with a recoil, the last the hardest with a second, smaller recoil. The hands never pass the new time, the case never moves, and the new time holds."
canonical: https://generativeicons.lottiefiles.com/icons/clock/
---

# Clock animated icon

A quarter of an hour passes. Light: the minute hand sweeps from 12 to 3 in one fast move, lands with a hit, recoils and settles; the hour hand is geared to it at a true 12:1 and creeps on 7.5 degrees. Strong: the minute hand jumps in three 5-minute ticks, each a hit with a recoil, the last the hardest with a second, smaller recoil. The hands never pass the new time, the case never moves, and the new time holds.

- Id: `clock`
- Category: Interface
- Search terms: time, watch, wall clock, analog clock, hours, minutes, time of day, current time, pending, opening hours
- Two states: prepared to result, 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.lottiefiles.com/assets/clock.lottie (dotLottie, 5276 bytes, sha256 969a18590f42a569f4aa7888bb7178074f8f2bef85fd5ec1c4e31cc8cfd34564)
- License: MIT

## Install

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

## React

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

export function ClockIcon() {
  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/clock.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.lottiefiles.com/icons/clock/ · https://generativeicons.lottiefiles.com/api/icons/clock