Icon fonts are a great solution for displaying icons in your web app or website — they’re vector, easy to implement and they support old browsers.
In this tutorial, we’ll use Sketch to design and create SVG files, which will then be converted into an icon font using IcoMoon.
Icon size and padding
The first step is creating the icons you want to use. All the icons you create in Sketch should be square and consistent with each other, using the same size and color.
- Artboard width: 64px
- Artboard height: 64px
- Artboard Padding: 2px
- Maximum height & width of the actual icon: 60px (but of course can be smaller)
- Default icon color: Gray Medium
Naming Convention
To keep things organized and make sure you use meaningful names, use Sketch’s group slash separator.
Icons / icon_name
Tip: “icon_name” should reflect the icon’s visual — (for ex. envelope) and not its functionality (for ex. send_email)
One Combined Shape
Icon layers should be combined (“Union”) into one single shape.
No effects. No shadows. No masks. No borders.
Flatten your shape
To reduce the chances of an unpredictable outcome, I recommend flattening your shapes to reset elements like rotation and flip. Eventually, it’ll make the SVG icon code less redundant.
Install SVGO Compressor Plugin
Before exporting your icons to SVG (and then converting them to font icons), it’s highly recommended that you install the SVGO compressor plugin, to ensure your SVG code will contain only what’s necessary.
(You don’t have to do anything, just install it and it will work its magic ????)
Export Icons as SVG
Select all your icon symbols and click “Make Exportable” as an SVG, then “Export Selected…”
Important note: only the artboards/symbols should be exportable! This does NOT include your inner layers.
Make the icons responsive
Since we exported the icons from Sketch, it automatically adds the artboard width and height rules to the icons’ SVG code. We want to remove these limitations and make the icons responsive.
To do this, we’ll need to edit the code using any text editor. Sublime is highly recommended — it’s lightweight and easy to use.
Select all your icons and open them using Sublime.
Sublime will open with each icon in a separate tab. Now you can remove the width and height attributes to make the icon responsive.
width="64" height="64"
Use “Find in Files…” to find these rules in all the icons and replace them with blanks — thereby removing them.
Leave the “Replace:” field blank and hit the “Replace” button.
Save all files and TA DA! ???? Your icons are now responsive.
This will affect the way your Mac displays the icons inside the Finder as well:
IcoMoon — an online font icon generator
We’ll use IcoMoon to easily convert the exported SVG icons to font icons.
Navigate to icomoon.io/app and go to “Manage Projects”.
Create a new project and name it using the name of the product/project you’re working on. This will help you easily identify it later on. Now “Load” your new IcoMoon project.
Importing icons into IcoMoon and filling in the right properties
Import your SVG files into IcoMoon using the “Import Icons” button and adjust the preview size to 64:
Next, go to Properties in the right hamburger menu, edit the metadata and “Reset Grid Size” to 64:
Generating the icon font
This is the moment we’ve all been waiting for!
Go to the right hamburger menu and “Select All” icons, then click the “Generate Font” button at the bottom right corner:
It’ll produce the font from our SVG icons but WAIT! there are some important adjustments to do before downloading.
Go to “Preferences” on the upper left side and give your font a name.
This will be the font-family CSS name so it’s better not to use spaces and special characters.
It’s also a good idea to mark the “Sass” option since it’ll create a .scss file in addition to the regular .css file.
You can now download your icon font and use it. Congratulations!
Using the icon font in your code
IcoMoon has already created everything you need to start working with your icons in your web app/website.
All you have to do is load IcoMoon’s generated style.scss and variables.scss files, and of course the “fonts” folder that contains your generated icon font.
Updating our icons set
As you probably know, icons need constant updating as your product or project grows.
Updating IcoMoon’s icons set is easy, it just needs to be done right.
Repeat the previous steps to export all your icons from Sketch again, then select your IcoMoon project and click “Import Icons” to import all your icons again.
Choose “Replace” to update the icons and generate your new icon font.
All done!. You created a new icon font with the same names and values, so your .scss files and “fonts” folder can now be overwritten.
Reimporting the whole “Icomoon” project
Icomoon uses your local browser memory (IndexedDB Storage) to save your icons and settings. This means that if you’ll clear your browser history and cache, or view Icomoon from a different browser, you won’t see your saved icon font.
But no worries, there’s a solution for that too.
Simply click “Import Project” from the “Projects” screen to select your generated selected.json file and it will import all your icons and settings back to IcoMoon.
I hope you found this useful.
Thanks,
Adam.
