---
title: "World clock animated icon"
description: "World clock animated icon (Scheduling & time tools). The clock switches to the other side of the world. Light: the globe turns half a turn, and a beat behind it the zone dial's minute hand swings half a turn to the new time, stops dead, ticks back and settles, the hour hand following it geared 12:1; the new time stays. Strong: the globe and the minute hand wind back first, the globe spins faster, and the hand lands harder with two ticks back. Neither hand passes the new time. The reset fades the hands back."
canonical: https://generativeicons.com/icons/world-clock/
---

# World clock animated icon

The clock switches to the other side of the world. Light: the globe turns half a turn, and a beat behind it the zone dial's minute hand swings half a turn to the new time, stops dead, ticks back and settles, the hour hand following it geared 12:1; the new time stays. Strong: the globe and the minute hand wind back first, the globe spins faster, and the hand lands harder with two ticks back. Neither hand passes the new time. The reset fades the hands back.

- Id: `world-clock`
- Category: Scheduling & time tools
- Search terms: time zone, timezone, time zones, world time, global time, international time, local time, utc, gmt, time difference
- 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.com/assets/world-clock.lottie (dotLottie, 6198 bytes, sha256 8d92b36e81fe6b08c94113a7173cb489a062e2305c7e49742b67d2c6803bab3f)
- License: MIT

## Install

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

## React

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

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