---
title: "Order tracking animated icon"
description: "Order tracking animated icon (Commerce & delivery). The order reaches its destination. Light: the location pin hops along the route in one arc and drops onto the last stop with a hit and a small bounce; the stop pings as it lands, a ring that spreads and fades. Strong: the pin crouches, hops to the middle stop leaning into the jump, lands with a ping, crouches again and hops on to the last stop with a second, wider ping and two decaying bounces. The pin stays rigid and holds on the last stop; the route never moves. The reverse hops it back, pinging the stops it lands on."
canonical: https://generativeicons.com/icons/order-tracking/
---

# Order tracking animated icon

The order reaches its destination. Light: the location pin hops along the route in one arc and drops onto the last stop with a hit and a small bounce; the stop pings as it lands, a ring that spreads and fades. Strong: the pin crouches, hops to the middle stop leaning into the jump, lands with a ping, crouches again and hops on to the last stop with a second, wider ping and two decaying bounces. The pin stays rigid and holds on the last stop; the route never moves. The reverse hops it back, pinging the stops it lands on.

- Id: `order-tracking`
- Category: Commerce & delivery
- Search terms: track order, track package, track shipment, tracking number, parcel tracking, shipment tracking, delivery status, order status, shipping status, track my order, en route
- Two states: first-stop to delivered, 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/order-tracking.lottie (dotLottie, 9135 bytes, sha256 b9a5d877e5e722162ab227b6d18ef2f3918050d48ce8888c7517b6f72cafeac8)
- License: MIT

## Install

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

## React

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

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