---
title: "Airplane animated icon"
description: "Airplane animated icon (Travel). The plane takes off. Light: it turns its nose 35° toward the upper right and accelerates out along it, laying a contrail from each wingtip and the tail, and fades before the edge; the contrails hang until it returns; it glides back in from the lower left on the same line, levels off and lands on its rest pose with a small overshoot. Strong: a short draw-back first, a faster launch with contrails twice as long, and a landing that overshoots and settles in two beats."
canonical: https://generativeicons.com/icons/airplane/
---

# Airplane animated icon

The plane takes off. Light: it turns its nose 35° toward the upper right and accelerates out along it, laying a contrail from each wingtip and the tail, and fades before the edge; the contrails hang until it returns; it glides back in from the lower left on the same line, levels off and lands on its rest pose with a small overshoot. Strong: a short draw-back first, a faster launch with contrails twice as long, and a landing that overshoots and settles in two beats.

- Id: `airplane`
- Category: Travel
- Search terms: plane, aeroplane, aircraft, jet, flight, flights, fly, airport, takeoff, departures, airplane mode, flight mode, airline, air travel
- 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/airplane.lottie (dotLottie, 4729 bytes, sha256 310bc5d326bcf36a3090a6c1bbdf73c473daadde7600f9366758a0540a1727d5)
- License: MIT

## Install

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

## React

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

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