On the 24-unit grid, strokes two units wide

The OpenVibe glyphs

Flame

A free flame icon in the OpenVibe hand, as SVG, PNG and a font.

Name
flame
Character
U+E116
Drawn
From the kit
Licence
MIT, free for any use
SVG Make a PNG Put it in a kit

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. flame is its registry name.

thin
light
regular
bold
solid
duotone

flame

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.

Flame icon, 256 pixels
PNG, 256 px SVG with these choices

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="flame"></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 20c3.3 0 5.6-2.3 5.6-5.3c0-3.9-4.1-7.2-5.6-11.4c-1.5 4.2-5.6 7.6-5.6 11.4C6.4 17.8 8.6 20 12 20Z"/><path d="M12 16.7c1.3 0 2.3-0.9 2.3-2.2c0-1.3-1.1-2.5-2.3-3.9c-1.1 1.5-2.3 2.6-2.3 3.9c0 1.2 0.9 2.2 2.3 2.2Z"/></svg>

React

export function FlameIcon(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 20c3.3 0 5.6-2.3 5.6-5.3c0-3.9-4.1-7.2-5.6-11.4c-1.5 4.2-5.6 7.6-5.6 11.4C6.4 17.8 8.6 20 12 20Z"/><path d="M12 16.7c1.3 0 2.3-0.9 2.3-2.2c0-1.3-1.1-2.5-2.3-3.9c-1.1 1.5-2.3 2.6-2.3 3.9c0 1.2 0.9 2.2 2.3 2.2Z"/></svg>
    );
}

A link

https://openvibe.design/icons/flame.svg
https://openvibe.design/icons/flame.png?size=512&color=mark
https://openvibe.design/icons/flame.svg?style=solid
7 more ways The font · The sprite · CSS, no markup · Data URI · ES module · Node · Android

The font

<link rel="stylesheet" href="https://openvibe.design/shared/ov-glyphs-font.css">
<i class="ovi ovi-flame"></i>

The sprite

<svg width="24" height="24"><use href="https://openvibe.design/shared/ov-glyphs.svg#ovg-flame"/></svg>

CSS, no markup

A mask painted in the text’s colour: <span class="icon-flame"></span>. Or link it, with any others: <link rel="stylesheet" href="https://openvibe.design/icons.css?names=flame">; add is-solid for the solid drawing.

.icon-flame {
    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 20c3.3 0 5.6-2.3 5.6-5.3c0-3.9-4.1-7.2-5.6-11.4c-1.5 4.2-5.6 7.6-5.6 11.4C6.4 17.8 8.6 20 12 20Z'/%3E%3Cpath d='M12 16.7c1.3 0 2.3-0.9 2.3-2.2c0-1.3-1.1-2.5-2.3-3.9c-1.1 1.5-2.3 2.6-2.3 3.9c0 1.2 0.9 2.2 2.3 2.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 20c3.3 0 5.6-2.3 5.6-5.3c0-3.9-4.1-7.2-5.6-11.4c-1.5 4.2-5.6 7.6-5.6 11.4C6.4 17.8 8.6 20 12 20Z'/%3E%3Cpath d='M12 16.7c1.3 0 2.3-0.9 2.3-2.2c0-1.3-1.1-2.5-2.3-3.9c-1.1 1.5-2.3 2.6-2.3 3.9c0 1.2 0.9 2.2 2.3 2.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 20c3.3 0 5.6-2.3 5.6-5.3c0-3.9-4.1-7.2-5.6-11.4c-1.5 4.2-5.6 7.6-5.6 11.4C6.4 17.8 8.6 20 12 20Z'/%3E%3Cpath d='M12 16.7c1.3 0 2.3-0.9 2.3-2.2c0-1.3-1.1-2.5-2.3-3.9c-1.1 1.5-2.3 2.6-2.3 3.9c0 1.2 0.9 2.2 2.3 2.2Z'/%3E%3C/svg%3E

ES module

import flame from 'https://openvibe.design/icons/flame.mjs';
// { name, line, solid }: the drawings, for a component of your own

Node

require('openvibe-shared/glyphs').svg('flame', { size: 24 })

Android

A VectorDrawable: download the XML. iOS: Xcode takes the SVG as it is (keep “Preserve Vector Data” on).

<!-- res/drawable/ic_flame.xml -->
https://openvibe.design/icons/flame.xml
Files: SVG PNG 1×PNG 2×PNG 3× Android XML Favicon set

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="flame" motion="pop"></ov-icon>
<ov-icon name="flame" 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 flame, then its neighbours. All 287.

flaskfocusfolderfolder-treefoodforwardgamegaugegavelgeargemghost