---
title: "Directions animated icon"
description: "Directions animated icon (Maps & navigation). The pointer sets off along its heading. Light: it draws back, launches forward and streaks out of view with two speed lines left behind its tail, then comes back up from behind as the route rolls on and arrives on its spot with a small overrun and settle. Strong: it first swings to find its heading and locks on with a hard stop, then draws back further, launches and arrives with a two-beat settle. The pointer stays rigid."
canonical: https://generativeicons.com/icons/directions/
---

# Directions animated icon

The pointer sets off along its heading. Light: it draws back, launches forward and streaks out of view with two speed lines left behind its tail, then comes back up from behind as the route rolls on and arrives on its spot with a small overrun and settle. Strong: it first swings to find its heading and locks on with a hard stop, then draws back further, launches and arrives with a two-beat settle. The pointer stays rigid.

- Id: `directions`
- Category: Maps & navigation
- Search terms: navigate, navigation arrow, get directions, start navigation, bearing, sat nav, satnav, wayfinding, go there
- 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/directions.lottie (dotLottie, 3619 bytes, sha256 eb91c32682ec2175809820fd4c41c81b5c30d39f419944467e17d07e72a7a8be)
- License: MIT

## Install

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

## React

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

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