---
title: "Path direction animated icon"
description: "Path direction animated icon (Vector editing & design). The path shows which way it winds. Light: the tangent arrow runs one full lap clockwise along the contour, each anchor point pops in turn as the arrow passes it (bottom, then left), and the arrow lands back on top with a small settle. Strong: the arrow draws back first, runs the lap faster, overshoots the top and settles, and the anchors pop harder. The closed path never moves; the arrow ends exactly where it started."
canonical: https://generativeicons.com/icons/path-direction/
---

# Path direction animated icon

The path shows which way it winds. Light: the tangent arrow runs one full lap clockwise along the contour, each anchor point pops in turn as the arrow passes it (bottom, then left), and the arrow lands back on top with a small settle. Strong: the arrow draws back first, runs the lap faster, overshoots the top and settles, and the anchors pop harder. The closed path never moves; the arrow ends exactly where it started.

- Id: `path-direction`
- Category: Vector editing & design
- Search terms: winding, winding order, winding direction, clockwise, counterclockwise, anticlockwise, reverse path, reverse direction, stroke direction, contour direction, fill rule
- 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/path-direction.lottie (dotLottie, 4150 bytes, sha256 d2348519e8de3d75df3281cc0850e3449380faf056ea731f98f94022cd233ac4)
- License: MIT

## Install

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

## React

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

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