Font · 11 tools · nothing uploads

Turn an icon font into an SVG sprite

Convert every mapped glyph in an icon font (Font Awesome, Material Icons, ...) into one SVG sprite of `<symbol id="uXXXX">` elements, so a page can `<use href="#u...">` an icon without loading the font at all. Capped at 2000 glyphs.

Input

Turn an icon font into an SVG sprite converts every mapped glyph into one SVG file of symbol elements. A page can then reference an icon with that sprite, without loading the font itself. Control characters and space are skipped, since they carry no outline. Conversion stops after 2000 glyphs, with the true total still reported.

Questions

What counts as a glyph worth including?

Any Unicode code point above the space character and not equal to the delete character 0x7F that the font's cmap table maps to a glyph; C0 and C1 control codes and the space itself are excluded, since icon fonts sometimes map them but they carry no useful outline.

What is the 2000-glyph cap about?

Once a font maps more than 2000 code points, only the first 2000 in code-point order are turned into symbols; the summary line still reports the true total alongside the capped count so you know some were left out.

What does the output sprite file contain?

One SVG with display:none containing a symbol element per glyph, each with its own id in the form uXXXX and its own viewBox; a page later renders one with a use element pointing at that id, so the original font file never has to load.

What if the font has no Unicode-mapped glyphs at all?

The tool refuses, saying the font has no Unicode-mapped glyphs to build symbols from, since there is nothing in the cmap table to enumerate.

Does it work on any font, or only icon fonts?

It works on any font with a cmap table, but it is built for icon fonts like Font Awesome and Material Icons, where every mapped code point is a meaningful icon rather than a normal letter someone would type.

Compare

Related Font tools

1→1Convert a font to OTFRe-encode a TTF, OTF or WOFF font as OpenType/CFF (.otf). This build of opentype.js only writes CFF outlines (verified by execution: it always emits the OTTO sfnt tag, never TrueType glyf, regardless of the source format), so OTF is the one honest direction: a real outline-format change coming from a TrueType source, a clean re-serialize coming from an OTF one.Takes one file1→1Subset a font to specific charactersDrop every glyph except the characters you list. A smaller file that still renders exactly the text you use.Takes one file1→1Render a font specimen sheetDraw a sample of a font's own glyphs to a PNG. It flattens the real bézier outlines and fills them with a nonzero-winding scanline rasterizer (no <canvas>, no upload), so what you see is what the font file contains.Takes one file1→1Export font glyphs as SVGTurn specific characters into standalone SVG files, one per glyph, using the font's own bézier outlines, normalised to a 1000-unit em so files from different fonts are comparably sized.Takes one file1→1Convert text to an SVG pathSet a line of text in a font and get back one SVG with a single `<path>` element, the outlines, not a `<text>` tag, so it renders identically everywhere without the font installed.Takes one file1→1Embed a font as a CSS data URIBase64 a font file into a self-contained `@font-face` rule, no separate file to host, at the cost of the file growing about a third larger as text. Fine for a small icon font, wasteful for a large family.Takes one file