How to Use IcoMoon: The Full App Tutorial

The short version: open the IcoMoon app, click the icons you want, hit Generate Font, then Download — you get a zip with font files, a ready stylesheet and a working demo page. The whole round trip takes about 5 minutes for a typical set of 20–30 icons. The longer version, with the details that trip people up, is below.

Step 1 — Select (or import) your icons

Open the app at icomoon.io/app — no account needed. The IcoMoon Free set (491 icons) sits at the top; click any glyph to toggle it into your selection. To use your own artwork, hit Import Icons and drop in SVG files — they land in an "Untitled Set" you can select from just like the built-in library. The selection counter in the bottom bar keeps a running total.

Step 2 — Generate the font

Click Generate Font in the bottom bar. This screen is worth a minute: every glyph shows its CSS class name and unicode code point (Private Use Area values like \e900, so they never collide with real text). Rename anything unclear now — the names become your CSS classes. Under Preferences you can change the icon- class prefix and the font name before exporting.

Step 3 — Download and inspect the export

Hit Download and unzip. Inside: a fonts/ folder (WOFF2, WOFF, TTF), a generated style.css with the @font-face rule and one class per icon, a demo.html you can open to sanity-check everything, and selection.json. Do not delete that last file: import it back into the app later and your whole project — names, codes, settings — comes back exactly as you left it. It is the app's save file.