Icon fonts are a great solution for displaying icons in your web app or website — they're vector-based, easy to implement, lightweight, and they support older browsers. While SVG icons have gained popularity, icon fonts remain a solid choice for many projects, especially when you need broad compatibility and easy CSS styling.
In this guide, I'll walk through the complete process of creating, generating, and maintaining your own custom icon font — from designing the icons in Sketch or Figma to generating the font files and integrating them into your project.
Icon Size and Padding
Before you start designing, establish consistent artboard specifications:
- Use a consistent artboard size (e.g., 24×24px or 32×32px)
- Leave 1-2px padding on all sides to prevent clipping
- Align icons to a pixel grid for sharp rendering
- Keep stroke widths consistent across all icons (e.g., 2px)
- Design at the largest size you'll need, then scale down
Naming Convention
Establish a clear naming convention early. I recommend using a prefix followed by a descriptive name: icon-arrow-left, icon-settings, icon-user-profile. This makes icons easy to find, sort, and reference in code. Avoid abbreviations — clarity beats brevity.
One Combined Shape
Each icon must be a single combined shape (compound path). If your icon has multiple overlapping shapes, use boolean operations (Union/Subtract) to merge them into one. Font generators can't handle multiple separate shapes within a single glyph — they'll either merge them incorrectly or drop parts of the icon.
Flatten Your Shape
After combining, flatten all shapes. This converts strokes to outlines and removes any transformations. In Sketch, use Layer → Paths → Flatten. In Figma, use Flatten Selection (Ctrl+E). This step ensures the SVG output is clean and predictable.
Install SVGO Compressor Plugin
Before exporting, install the SVGO Compressor plugin for Sketch (or use SVGO as a standalone tool). This optimizes your SVG output by removing unnecessary metadata, comments, and hidden elements. Cleaner SVGs mean fewer issues during font generation.
Export Icons as SVG
Export each icon as an individual SVG file. Make sure to export just the icon shape, not the entire artboard. Check each exported SVG — open them in a text editor and verify they contain a single clean path without embedded styles or transforms.
Make the Icons Responsive
Open your exported SVGs in a text editor (Sublime Text, VS Code) and remove any fixed width and height attributes from the root SVG element. Keep only the viewBox attribute. This makes the icons responsive and scalable via CSS.
💡 In Sublime Text, you can use Find & Replace with regex to batch-remove width/height attributes across all SVG files at once.
IcoMoon
IcoMoon (icomoon.io) is a free web-based tool for generating icon fonts from SVG files. It's reliable, well-maintained, and gives you full control over the output. Upload your SVGs, assign Unicode values, and configure the font settings.
Generating the Icon Font
In IcoMoon, select all your imported icons and click 'Generate Font.' Configure the font name, class prefix, and encoding settings. Download the generated package — it includes the font files (WOFF, WOFF2, TTF, EOT), a CSS file with all the icon classes, and a demo HTML page.
Using the Icon Font
Add the font files to your project and include the CSS file. Then use icons in your HTML with simple class names: <i class="icon-arrow-left"></i>. You can style them with CSS just like text — change color, size, add transitions, and apply hover effects.
Updating Your Icon Set
When you need to add new icons to an existing font, don't start from scratch. IcoMoon lets you import your existing project and add new icons incrementally. This preserves the Unicode assignments of existing icons, so your existing code won't break.
Reimporting the Whole IcoMoon Project
Always save your IcoMoon project file (selection.json). When you need to update the font, import this file back into IcoMoon to restore your full icon set. Then add or modify icons as needed and regenerate. This workflow ensures consistency and prevents accidental changes to existing icons.
💡 Keep the IcoMoon selection.json file in your project's version control. It's the single source of truth for your icon font configuration.
