---
title: "Globe animated icon"
description: "Globe animated icon (Travel). A flick spins the globe on its axis. Light: one flick sends the meridians sweeping left to right across the face: the left one crosses to the right, the right one runs off at the limb and a new one comes in from the left; the turn coasts a little past and settles back onto the rest pattern. Strong: a harder spin that turns two meridian spacings, picking up speed through the first and coasting past and settling after the second. The sphere outline, the equator, the stand and the foot never move."
canonical: https://generativeicons.com/icons/globe/
---

# Globe animated icon

A flick spins the globe on its axis. Light: one flick sends the meridians sweeping left to right across the face: the left one crosses to the right, the right one runs off at the limb and a new one comes in from the left; the turn coasts a little past and settles back onto the rest pattern. Strong: a harder spin that turns two meridian spacings, picking up speed through the first and coasting past and settling after the second. The sphere outline, the equator, the stand and the foot never move.

- Id: `globe`
- Category: Travel
- Search terms: world, earth, planet, global, worldwide, international, internet, web, website, world travel, countries
- 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/globe.lottie (dotLottie, 3949 bytes, sha256 6fa28407ac7c7b087a0d8fec6ede74052387c6d8ace4609047c3030c609e5826)
- License: MIT

## Install

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

## React

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

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