How to add an icon (Iconfont)

Verze:

28. 09. 2025

Zodpovědná osoba:

Dominik Šlechta

Guide on how to add a new icon to existing or new icon font

Managing IcoMoon Icon Sets

When working with IcoMoon, the selection.json file is your key to maintaining and updating your custom icon set.
This file contains all the icons you’ve selected, their settings, and class names.

There are two common scenarios when adding icons:

  • Case 1: selection.json exists → You can import and update your existing set.
  • Case 2: selection.json does not exist → You’ll need to start a new set from scratch.

selection.json exists

If you already have a selection.json file from a previous export:

  1. Open IcoMoon App
  2. Import Existing Set
    • Click “Import Icons” (top left).
    • Upload your existing selection.json.
    • Your previous icons will load into the app.
  3. Add New Icon(s)
    • Click “Import Icons” again.
    • Upload your new SVG file(s).
    • They will appear alongside your old icons.
  4. Select Icons
    • Select both old and new icons (or use “Select All”).
  5. Generate New Font/Package
    • Click “Generate Font” at the bottom.
    • Review names and mappings.
    • Download the package.
  6. Update selection.json
    • Replace the old selection.json with the new one from the downloaded zip.

selection.json does not exist

If you don’t have a selection.json yet (first time using IcoMoon):

  1. Open IcoMoon App
  2. Import Icons
    • Click “Import Icons”.
    • Upload your SVG file(s).
  3. Select Icons
    • Choose all icons you want in your set.
  4. Generate Font/Package
    • Click “Generate Font”.
    • Review and adjust class names if needed.
    • Download the package.
  5. Save selection.json
    • The package includes a selection.json file.
    • Keep it safe for future updates.