The OpenVibe glyphs
Airplane
A free airplane icon in the OpenVibe hand, as SVG, PNG and a font. In place of Font Awesome’s fa-plane, fa-plane-departure.
- Name
airplane- Character
U+E0C1- Drawn
- Drawn for the set
- Licence
- MIT, free for any use
Every size by itself
At 18 px and under it switches to its solid drawing, which stays clear when small; above that it is the line. Sites do it with no code, and the files below do it on style=auto.
Names and keywords
The names it answers to and the words people search with. airplane is its registry name; it stands in for fa-plane, fa-plane-departure.
Suggest one for a button
Type what the button says. The set’s names and keywords answer first; a small model orders the shortlist when the words are new. The API is GET /api/v1/glyphs/suggest?label=.
Make a PNG
Any size up to 1024 pixels at 1×, 2× or 3×, in any colour or the mark’s two, a lighter or heavier line, flat or with the mark’s depth and glow, room around it and a ground behind it. The link rebuilds the same file every time.
Use it
Every way is the same drawing, free to use with no sign-in. On an OpenVibe site the navbar already loads the drop-in, so Font Awesome’s markup shows it.
Any page
No sign-in. It follows the text’s size and colour, and turns solid when small.
<script src="https://openvibe.design/ov-icon.js" defer></script>
<ov-icon name="airplane"></ov-icon>Inline SVG
HTML, Vue, Svelte, Solid, Angular.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.2c0.9 0 1.4 0.9 1.4 2.4V9.8l7 4.2V15.4l-7-2.4V17.2l1.9 1.4V20L12 19.1l-3.3 0.9v-1.4l1.9-1.4v-4.2L3.6 15.4v-1.4L10.6 9.8V5.6C10.6 4.2 11.1 3.2 12 3.2Z"/></svg>React
export function AirplaneIcon(props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}><path d="M12 3.2c0.9 0 1.4 0.9 1.4 2.4V9.8l7 4.2V15.4l-7-2.4V17.2l1.9 1.4V20L12 19.1l-3.3 0.9v-1.4l1.9-1.4v-4.2L3.6 15.4v-1.4L10.6 9.8V5.6C10.6 4.2 11.1 3.2 12 3.2Z"/></svg>
);
}A link
https://openvibe.design/icons/airplane.svg
https://openvibe.design/icons/airplane.png?size=512&color=mark
https://openvibe.design/icons/airplane.svg?style=solid8 more ways Font Awesome markup · The font · The sprite · CSS, no markup · Data URI · ES module · Node · Android
Font Awesome markup
Keep your markup; the drop-in draws ours.
<script src="https://openvibe.design/shared/ov-glyphs.js" defer></script>
<i class="fa-solid fa-plane"></i>The font
<link rel="stylesheet" href="https://openvibe.design/shared/ov-glyphs-font.css">
<i class="ovi ovi-airplane"></i>The sprite
<svg width="24" height="24"><use href="https://openvibe.design/shared/ov-glyphs.svg#ovg-airplane"/></svg>CSS, no markup
A mask painted in the text’s colour: <span class="icon-airplane"></span>. Or link it, with any others: <link rel="stylesheet" href="https://openvibe.design/icons.css?names=airplane">; add is-solid for the solid drawing.
.icon-airplane {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c0.9 0 1.4 0.9 1.4 2.4V9.8l7 4.2V15.4l-7-2.4V17.2l1.9 1.4V20L12 19.1l-3.3 0.9v-1.4l1.9-1.4v-4.2L3.6 15.4v-1.4L10.6 9.8V5.6C10.6 4.2 11.1 3.2 12 3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c0.9 0 1.4 0.9 1.4 2.4V9.8l7 4.2V15.4l-7-2.4V17.2l1.9 1.4V20L12 19.1l-3.3 0.9v-1.4l1.9-1.4v-4.2L3.6 15.4v-1.4L10.6 9.8V5.6C10.6 4.2 11.1 3.2 12 3.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}Data URI
For an <img> or a CSS url(), in a fixed colour.
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c0.9 0 1.4 0.9 1.4 2.4V9.8l7 4.2V15.4l-7-2.4V17.2l1.9 1.4V20L12 19.1l-3.3 0.9v-1.4l1.9-1.4v-4.2L3.6 15.4v-1.4L10.6 9.8V5.6C10.6 4.2 11.1 3.2 12 3.2Z'/%3E%3C/svg%3EES module
import airplane from 'https://openvibe.design/icons/airplane.mjs';
// { name, line, solid }: the drawings, for a component of your ownNode
require('openvibe-shared/glyphs').svg('airplane', { size: 24 })Android
A VectorDrawable: download the XML. iOS: Xcode takes the SVG as it is (keep “Preserve Vector Data” on).
<!-- res/drawable/ic_airplane.xml -->
https://openvibe.design/icons/airplane.xml
Make it move
One move when something happens: point at each, press it, or tap the first to draw it again. Nothing loops or spins, and calm or reduced motion stops them.
With <ov-icon>
<ov-icon name="airplane" motion="pop"></ov-icon>
<ov-icon name="airplane" motion="beat" on></ov-icon> <!-- on: the solid drawing, as when turned on -->On any SVG
<link rel="stylesheet" href="https://openvibe.design/icons/pack/ov-icon-motion.css">
<svg class="ovm-pop" …>…</svg>Near it
Glyphs that share a word with airplane, then its neighbours. All 287.