Plane Takeoff icon

import { PlaneTakeoff } from '@withicons/react'          // line (default style)
import { PlaneTakeoff as PlaneTakeoffSolid } from '@withicons/react/solid'

export function Example() {
  return (
    <>
      <PlaneTakeoff size={24} />
      <PlaneTakeoffSolid size={24} color="#FF5A36" title="Plane Takeoff" />
    </>
  )
}

<script src="https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js" defer></script>

<i class="with with-plane-takeoff"></i>              <!-- line -->
<i class="with with-plane-takeoff with-solid"></i>   <!-- also with-duo, with-gloss, with-engrave, with-blueprint, with-sketch, with-glass, with-kawaii, with-sticker, with-pixel, with-retro, with-luxe, with-bauhaus, with-skeuo, with-anime, with-gothic, with-pastel, with-coquette, with-plush -->

<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web/dist/cdn.js"></script>

<with-icon name="plane-takeoff"></with-icon>
<with-icon name="plane-takeoff" variant="solid" size="32" label="Plane Takeoff"></with-icon>

<script setup>
import { PlaneTakeoff } from '@withicons/vue'          // line (default style)
import { PlaneTakeoff as PlaneTakeoffSolid } from '@withicons/vue/solid'
</script>

<template>
  <PlaneTakeoff :size="24" />
  <PlaneTakeoffSolid :size="24" title="Plane Takeoff" />
</template>

<script>
  import { PlaneTakeoff } from '@withicons/svelte'          // line (default style)
  import { PlaneTakeoff as PlaneTakeoffSolid } from '@withicons/svelte/solid'
</script>

<PlaneTakeoff size={24} />
<PlaneTakeoffSolid size={24} title="Plane Takeoff" />

import { Component } from '@angular/core'
import { WithIconComponent, PlaneTakeoff } from '@withicons/angular'

@Component({
  selector: 'app-example',
  imports: [WithIconComponent],
  template: `<with-icon [icon]="PlaneTakeoff" [size]="24" title="Plane Takeoff" />`,
})
export class ExampleComponent { PlaneTakeoff = PlaneTakeoff }

import { PlaneTakeoff } from '@withicons/solid'          // line (default style)
import { PlaneTakeoff as PlaneTakeoffSolid } from '@withicons/solid/solid'

export const Example = () => <PlaneTakeoff size={24} />

<img src="https://cdn.jsdelivr.net/npm/@withicons/core/dist/svg/line/plane-takeoff.svg" width="24" height="24" alt="Plane Takeoff">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17.36 4.49 C18.62 3.75 19.74 3.99 20.38 4.68 C20.66 5.58 20.31 6.66 19.03 7.39 L15.4 9.5 L15.15 17.88 L13.88 18.62 L11.58 11.7 L8.12 13.7 L7.82 16.54 L7.28 16.85 L5.83 13.08 L3.29 9.94 L3.83 9.63 L6.44 10.79 L9.9 8.79 L5.06 3.34 L6.33 2.61 L13.72 6.59 Z"/><path d="M2.5 21.5 H21.5" class="wm-a"/></svg>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/motion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/icons/plane-takeoff.css">  <!-- this icon's own moves -->

<!-- always moving: nudge -->
<span class="wm wm-loop" data-wm="plane-takeoff"><i class="with with-plane-takeoff"></i></span>

<!-- moves when the button is hovered or focused: pass -->
<button class="wm-trigger"><span class="wm wm-hover" data-wm="plane-takeoff"><i class="with with-plane-takeoff"></i></span> Plane Takeoff</button>

<!-- click to turn plane-takeoff into plane-landing: the button's aria-pressed decides the icon.
     Timing: --wm-swap-dur, --wm-swap-ease, --wm-swap-delay. On its own: wm-swap-auto (+ --wm-swap-hold) -->
<button class="wm-trigger" type="button" aria-pressed="false" aria-label="Plane Takeoff"
        onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">
  <span class="wm-swap wm-fx-fade">
    <i class="with with-plane-takeoff wm-a"></i>
    <i class="with with-plane-landing wm-b"></i>
  </span>
</button>

npx -y @withicons/mcp                 # MCP server for Claude, Cursor, Copilot…
npx withicons search "departures"   # finds: plane-takeoff
curl "https://withicons.com/api/search?q=departures"