How to Use IcoMoon to Create and Integrate High Quality Vector Icon Fonts

Part 2: IcoMoon Workflow: How to Create & Manage Custom Icon Fonts Easily.

In Part 1 of this series, we covered the basics of getting started with IcoMoon: picking icons, generating your font, and integrating it into your project.

Now it’s time to dive into the fun stuff: a workflow that keeps your icon font process smooth, consistent, and dare I say, enjoyable.

Decide on Icons Early in the Design Stage

Before you even touch a text editor, make the decision to use an icon font. This isn’t just a developer thing, it’s a design choice. Whether you’re the designer or you’re collaborating with one, agreeing to use icons from IcoMoon early on will save a ton of headaches later.

That said… what if you just can’t find the perfect icon? No problem. IcoMoon lets you upload your own SVGs (we’ll explore this in Part 3).

My IcoMoon Workflow

Once I have the design direction ready and I’m ready to start building the site, here’s the process I follow:

1. Identify all the icons in the design

   • Go through the mockups and note every icon you’ll need.

2. Head to IcoMoon and select those icons (or upload custom ones).

3. Generate your icon font

   • Hit that Font button, review your selection, and download your generated font set.

4. Organize your files

   • Copy all four font formats (.svg, .ttf, .woff, .woff2) into your /fonts/ directory.
   • Keep the original IcoMoon download folder intact, you’ll want index.html handy for reference.

5. Keep index.html open while coding

   • This file lists all your selected icons along with their unicode values, making it easy to copy and paste the right code.

Updating Your Icon Font Later

Design change? Client requests a new icon? No sweat. If you’ve kept your IcoMoon folder untouched, you can:

• Reopen your original selection in IcoMoon
• Add or replace icons
• Regenerate the font
• Copy the new font files back into /fonts/

Always download the selection.json session file from IcoMoon (available in generated font pack .zip you downloaded or accessed from Main Menu → Manage Projects → Project Name → Download). This file is your safety net for making updates in the future. We’ll cover this in more detail in part 3 of this series.

Integrating with SASS for Extra Convenience

These days, I write all my styles in SASS, which makes managing icon fonts even easier.

1. Define variables in _variables.scss

$icon-font: "icomoon"; // Your icon font name
$icon-github: "\efc4"; // Unicode for your github icon

2. Use pseudo-elements to insert icons

.foo {
  &:before {
    content: $icon-github;
    font-family: $icon-font;
    speak: none;
    font-weight: normal;
  }
}

3. Or extend classes directly from IcoMoon’s style.css:

.foo {
  &:before {
    @extend .icon-github; //found in the downloaded style.css
  }
}

Creating a Silent Extendable Icon Class

For ultimate reusability, I like to make a silent extendable %icon class

%icon {
  font-family: $icon-font;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

Then use it wherever you need an icon

.foo {
  &:before {
    @extend %icon;
    content: $icon-github;
  }
}

And it’s that it. As easy as vector based pie!
This workflow keeps your icons consistent, your code clean, and your future updates painless.

In part 3, we’ll take things up a notch with some ninja-level IcoMoon tricks that will really unlock the tool’s full potential.