Specify a range to reset character codes or ligatures. You can find a glyph's index by hovering over it.

@font-face { font-family: 'icomoon-font-tab'; src: url({{localFont}}) format('truetype'); font-weight: normal; font-style: normal; } .ff-icomoon-font-tab { font-family: 'icomoon-font-tab', sans-serif; } .glyphName { padding-bottom: {{10 / 128 + max(fontPref.metrics.baseline / 100, 0)}}em; }

Development Links

reference.html | selection.json | style.css | variables.{{fontPref.cssVarsFormat}} | style.{{fontPref.cssVarsFormat}}

Do not use these links in production.
In order to generate production-ready CDN links, get the Unlimited plan.

These links expire in 24 hours. To generate permanent unchanging links, use paid plans.

Production Links

Last uploaded on

to upload fonts for hosting or sharing. Using this feature, you can reference your fonts in HTML and easily change your icon selection on the fly, without having to update your CSS.

Multicolor glyphs take more than one character code and cannot have ligatures.

Nothing to show! Please select some icons first.

#glyphSet{{$index}} .fs-prevSize { font-size: {{glyphs[0].properties.prevSize}}px; }

Grid Size: {{glyphs.grid || 'Unknown'}}

{{glyph.properties.tempChar}} {{glyph.properties.tempChar}} {{tChar}}
#{{glyph.idx + 1}}
  • Ligatures with special characters or numbers may not work as expected in some browsers.

Unicode Symbols

By selecting a Unicode character below, you can assign its code point to your glyph.
You can also use services like emojipedia.org or emojifinder.com to find appropriate characters.

Note that Unicode characters visualization will depend on the character support of your web browser and the fonts installed on your system.

To edit glyph codes, press the button in the toolbar.

To add or edit ligatures, press the button in the toolbar.

Generate SVG, … & MoreSelection ({{getSelectionCount()}}) Font