Loading Techie Utils…

SVG to Icon Font Generator

Build a web font from SVG icons or an SVG font. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.

About Icon Font Generator

Add SVG icons — dropped in, chosen from disk or pasted as markup, a few at a time — and get a web font back: WOFF2, WOFF, TrueType, OpenType, EOT and an SVG font, whichever you ask for, with the stylesheet that binds each icon to a class name and a zip holding the lot. Point an existing SVG font at it instead and its glyphs are read straight out, which is how an old icon set is brought forward without redrawing it.

The icons stay a list you can work with: each one shows the outline the font will actually carry, keeps a name you can edit — the name becomes the CSS class — and can be dropped from the set without starting again. The preview is drawn from the extracted geometry rather than by rendering the file, so nothing inside an untrusted SVG is ever executed here.

The awkward part is co-ordinates. An SVG draws downwards from the top-left corner of its viewBox in whatever units the artboard used; a font draws upwards from a baseline in em units. Each icon is therefore scaled into the em square, centred, flipped, and set on the baseline where a capital letter sits, so an icon lines up with the text beside it rather than floating above it.

Code points start at U+E900 in the private use area, the same place IcoMoon and Fontello start, and the table lists what each icon became: its class, its code point, and the escape to write in content. The preview grid is drawn by the generated font itself rather than by the original SVGs, so what you see is what a page using the stylesheet would show.

Everything happens in this tab — the icons are never uploaded — and the font is assembled from filled outlines. Strokes, <use> references and even-odd fills are the three things that do not survive the trip, and each is called out when it is found.

Where it helps

  • Reads a folder of SVG icons or an existing SVG font, and writes OpenType, WOFF and the CSS together.
  • Scales and centres every icon on the baseline, so glyphs line up with text instead of drifting.
  • Lists each icon's class, code point and CSS escape, which is the part people otherwise write out by hand.
  • Previews the result with the generated font itself, not with the source SVGs.
  • Runs entirely in the browser, so an unreleased icon set never leaves the machine.

Limits

  • A font holds filled outlines only: stroke-based icons have to be converted to outlines first, and the tool says so when it sees one.
  • Fonts fill by the non-zero rule, so a shape relying on even-odd may lose its holes unless the inner contour runs the other way.
  • Colour is dropped — an icon font is monochrome by definition, and multi-colour icons should stay as SVG.
  • WOFF2 is written by Google's own encoder, which repacks the glyphs before compressing them; it is a megabyte of wasm and is fetched only the first time that format is asked for.
  • <use> references are not resolved, so an icon assembled from symbols will be missing that part.

Frequently asked questions

Why do my icons come out hollow or empty?

They are drawn with strokes rather than fills. A font has no notion of a stroke, so convert the strokes to outlines — Illustrator's *Object → Path → Outline Stroke*, Figma's *Flatten* — and rebuild.

Where do the code points come from?

They are assigned in order from the first one you give, U+E900 by default, which sits in the private use area set aside for exactly this. Nothing standard lives there, so no real character is displaced.

Should I still be using an icon font?

Inline SVG is the modern default: it takes colour, scales cleanly and needs no font loading. An icon font still wins when icons must be styled as text through font-size and color, or when a legacy stylesheet already expects one.

Which formats do I actually need?

WOFF2 alone covers every browser still receiving updates, with WOFF as a fallback for older ones. TrueType is for desktop applications and build tools, OpenType is the CFF-outline equivalent, EOT is only for Internet Explorer 8 and earlier, and the SVG font is for toolchains that still read one. Whatever you pick, the zip holds all of it plus the stylesheet.

How do I use the files?

Put the WOFF and OpenType files beside the stylesheet, keep the names as generated, and the @font-face rule in the CSS resolves them. Then <i class="icon-name"></i> renders the icon.

Can it read an existing icon font?

An SVG font, yes — its glyphs, names and code points are carried across. A TTF or WOFF is not read back; export it to an SVG font first, or keep the original SVG sources.

Related tools

  • Image Converter — Convert between PNG, JPEG, JFIF, WebP, GIF, HEIC and SVG
  • Image Compressor — Resize and re-encode images to save bytes
  • Image Colour Picker — Pick a colour out of a picture and read it back
  • Base64 — Encode or decode UTF-8 text and URL-safe Base64
  • Image Resizer — Resize to a size, a proportion or a longest side
  • Crop Image — Cut a rectangle out, or trim a flat border away

More Images & Files tools