webfontShip icon sets as one font

Turn SVG icons into WOFF2, WOFF, TTF, EOT, and SVG fonts at build time. CLI, Node API, or a local MCP server. Pure JavaScript, no native toolchain.

Get Started

Demo

View on GitHub



Live font from SVG fixtures:
one font, many glyphs

One artifact, many glyphs

Ship a single WOFF2 or TTF instead of a growing folder of SVG files. Fewer assets to download, cache, and keep in sync.

Built for growing sets

Design systems rarely stay at a handful of icons. Icon fonts keep pace when the library expands; a pile of SVGs does not.

Runtime as a string

Reference glyphs by class name or codepoint. Drive icons from the backend or config without a network request per image URL.

CLI, API, and local MCP

Run webfont in CI or scripts, call webfont() from Node, or use the private monorepo MCP so agents convert SVGs without shelling out by hand.

Flutter

Generate a TrueType icon font for Flutter and map each glyph to IconData.

Generate fonts for Flutter

When SVG starts to hurt

A small, stable icon set can live happily as SVG. The friction shows up on the growth curve: every new icon is another file in the bundle, another asset to version, and another thing to fetch or embed.

An icon font packs many glyphs into one build-time artifact. You still author SVGs; webfont turns that folder into fonts and optional CSS templates, but apps and sites consume a font, not a herd of images.

Monochrome by design

Icon fonts paint each glyph with one color (via color / currentColor). That is what makes them flexible in UI: tint nav, buttons, and states without exporting variants.

Multi-tone or richly filled illustrations do not map cleanly onto a single glyph. Keep those as SVG (or another format) where the craft needs more than one fill.

A practical hybrid

Most product icons are single-color navigation, actions, and status. Generate those with webfont.

Reserve SVG for the few marks that need dual tone or fine multi-color detail. That keeps the common path light and the exceptions intentional, without pretending every icon belongs in a font.

Also available: encode an existing TTF into web formats, or decompress WOFF/WOFF2 back to the embedded TTF/OTF. See Features and Configuration.

Install webfont · See the live demo