Turn a folder of SVGs into an icon font

Point it at a directory. Out come woff2, woff, ttf and a stylesheet, with the geometry a font actually needs — strokes outlined, transforms baked, codepoints assigned once and never moved again.

From the command line

npx @iconotype/cli init --input icons/ \
  --fonts-dir app/fonts --styles-dir app/css --style-kind scss-variables

npx @iconotype/cli build --input app.iconotype.json
# built 27 glyph(s) → app/fonts/app.woff2, app/fonts/app.woff, app/fonts/app.ttf, app/css/_app.scss

init writes a committed project file and a codepoints.lock; build is what runs afterwards, on a laptop or a runner, and produces identical bytes from identical input. Files whose contents have not changed are not rewritten, so a no-op build leaves the working tree clean.

The part that usually goes wrong

A font glyph has no stroke, no transform, no clip and no even-odd fill rule. Artwork drawn anywhere other than a font editor has all four, which is why so many generated icon fonts come out hollow, doubled or empty. Everything that goes in runs through a fixer first:

• inlined <style> rules resolved, <use> dereferenced
• shapes converted to paths, transforms baked into coordinates
• strokes outlined into fills, which is what most stroke-based sets need
• clips and masks applied, even-odd converted to non-zero, degenerate geometry removed

Anything that cannot survive the trip is reported rather than silently mangled — 31 findings, each with a code — and the whole pipeline is pinned by a 75-fixture visual regression suite, so a change that alters what an icon looks like fails the build.

What comes out

Codepoints are an API

The number behind .icon-home is baked into every stylesheet you have ever shipped and every page a browser has cached. Allocation is append-only from the Private Use Area and recorded in a lockfile: renaming an icon moves its name, never its number, and removing one leaves its codepoint reserved.

npx @iconotype/cli diff --input app.iconotype.json --against origin/main   # non-zero if a codepoint moved
npx @iconotype/cli scan --input app.iconotype.json                         # which icons nothing references

Questions

Do my SVGs need preparing first?

No. Strokes, transforms, clips, masks and even-odd fills are all handled on the way in, and anything unrepresentable is reported with a code rather than mangled.

Can it run in CI?

Yes, and that is the point: builds are byte-reproducible, and diff fails a pull request that would move a codepoint.

Do the icons have to be the same size?

No. Each set keeps the coordinate grid it was drawn on, and glyphs are fitted to the em box on the way into the font.

Is there a GUI?

A web app with nothing to install, a desktop app for macOS, Windows and Linux, and a VSCode extension — all over the same core as the CLI, on the same project file.