Iconotype

Icon fonts, without the round trip.

Drop in SVGs or an existing IcoMoon project, fix the geometry a font actually needs, and write the woff2 and the stylesheet straight into your repo — from the editor you are already in.

Open the web app Download for desktop VSCode extension

Free and open source. Your artwork never leaves your machine.

Real app, one take: four icons out of 230+ collections, exported, used on a page, fixed on the em square, and the page rebuilt with the new font.

IcoMoon in, anything outProjects, selections, font packages, folders of SVG.
Codepoints never moveAppend-only, locked, checked in CI.
Reproducible buildsSame input, same bytes, every time.

What it does

Finds the icon for you

Search Lucide, Material Symbols, MDI, Tabler, Phosphor and 230 more as one index. Stroke sets are outlined into fills on the way in, and each collection's licence follows its icons all the way into the generated stylesheet.

Fixes SVGs for fonts

Thirteen stages: inlined CSS, dereferenced <use>, shapes to paths, baked transforms, strokes outlined into fills, even-odd to non-zero, clips and masks applied. Anything a font cannot represent is reported, not silently mangled.

An editor for the real work

Align, nudge, scale, rotate, flip, fit to the em box, merge overlaps, snap to grid — on an em square with the baseline drawn. Step through a whole set with one key.

Exports the whole package

woff2, woff, ttf, svg fonts. CSS, SCSS, LESS, variables-only partials, CSS custom properties, JSON maps, Flutter IconData, sprite sheets, PNGs, favicons, React and Vue components, and a .d.ts of every icon name.

Codepoints are an API

Allocation is append-only and written to codepoints.lock. Renaming an icon moves its name, never its codepoint, so a font already shipped keeps rendering what it rendered yesterday. CI fails a build that would break one.

Knows where your icons are used

The extension scans your source for references, tells you which icons nothing uses, renames one everywhere at once, and flags a typo before it renders as a blank square.

One core, three shells

The same model, fixer and font writer behind the web app, the desktop app and the extension — so a project opened in one is the same project in the others.

Get it

Web app

Nothing to install. Projects live in your browser's storage; artwork never leaves the tab.

Open it

Desktop

Real files, native dialogs, drag-and-drop from Finder or Explorer. macOS, Windows, Linux.

Download

VSCode

The sidebar, autocompletion on your icon names, inline previews, usage search, and export straight into app/fonts and app/css.

Install

And in CI

The same build the editor runs, so a font built on a laptop and a font built on a runner are the same bytes. 

# turn an existing IcoMoon project into a committed one
npx @iconotype/cli init --input icomoon/project.json \
  --fonts-dir app/fonts --styles-dir app/css --style-kind scss-variables

# build it wherever the project file says
npx @iconotype/cli build --input app.iconotype.json

# fail the build if a codepoint moved
npx @iconotype/cli diff --input app.iconotype.json --against origin/main