Airplane Take Off icon
Used for lift off time and general travel. The Airplane Take Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Airplane Take Off icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { AirplaneTakeOff24Regular, AirplaneTakeOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <AirplaneTakeOff24Regular aria-label="Airplane Take Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_airplane_take_off_24_regular.svg" width="24" height="24" alt="Airplane Take Off"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.31551 8.40816L7.54364 7.28135C6.59057 5.89 7.58682 4 9.27329 4C9.75351 4 10.2192 4.16486 10.5924 4.46701L13.1732 6.55618C13.4827 6.22856 13.852 5.87691 14.2634 5.55966C14.9221 5.0518 15.7632 4.57418 16.6924 4.50263C18.9302 4.33032 20.6017 5.7461 21.547 6.82923C22.0357 7.38921 22.1337 8.09723 21.9247 8.71205C21.7201 9.31393 21.2312 9.80871 20.5828 10.0323L15.212 11.8842L12.0496 16.1009C11.6249 16.6672 10.9584 17.0004 10.2506 17.0004C8.83529 17.0004 7.77186 15.7086 8.04385 14.3196L8.29513 13.0364L5.7653 13.5826C4.34291 13.8897 3 12.8058 3 11.3506V7.69166C3 6.75761 3.7572 6.00041 4.69125 6.00041C5.31015 6.00041 5.87962 6.33847 6.17598 6.8818L7.14191 8.65266L8.31551 8.40816ZM8.78114 6.43365L9.90662 8.07668L11.8053 7.68112C11.8953 7.66237 11.9844 7.63316 12.0714 7.59414L9.64863 5.63288C9.54243 5.54691 9.40993 5.5 9.27329 5.5C8.79343 5.5 8.50996 6.03777 8.78114 6.43365ZM16.8076 5.9982C16.3011 6.0372 15.7399 6.31535 15.1793 6.74757C14.63 7.17109 14.1517 7.68771 13.8188 8.08877C13.3987 8.5949 12.813 9.00339 12.1113 9.14959L6.90297 10.2346C6.5794 10.3021 6.24985 10.1497 6.09158 9.85955L4.85914 7.60008C4.82563 7.53864 4.76123 7.50041 4.69125 7.50041C4.58562 7.50041 4.5 7.58604 4.5 7.69166V11.3506C4.5 11.8498 4.96073 12.2217 5.44873 12.1164L9.09172 11.3298C9.33829 11.2766 9.59511 11.3509 9.7752 11.5275C9.95528 11.7041 10.0345 11.9595 9.98602 12.207L9.51589 14.6078C9.42534 15.0703 9.7794 15.5004 10.2506 15.5004C10.4863 15.5004 10.7082 15.3895 10.8496 15.2009L14.15 10.8002C14.2399 10.6802 14.3638 10.59 14.5055 10.5411L20.0938 8.61424C20.3174 8.53712 20.4536 8.37897 20.5045 8.22935C20.5509 8.09266 20.5347 7.95059 20.4168 7.81553C19.5642 6.83853 18.3185 5.88186 16.8076 5.9982ZM3.75 19.5C3.33579 19.5 3 19.8358 3 20.25C3 20.6642 3.33579 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25C21 19.8358 20.6642 19.5 20.25 19.5H3.75Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/airplane_take_off_24_regular.svg";Details
| Name | Airplane Take Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_airplane_take_off_24_regular.svg |
| Filled file | ic_fluent_airplane_take_off_24_filled.svg |
| React components | AirplaneTakeOff24Regular, AirplaneTakeOff24Filled |
| License | MIT (© Microsoft Corporation) |