Optimizing icons for application

Image source “Unsplash.com”

Icons are one of the vital aspects of minimalistic design. And every designer and developer tries to make it as perfect as possible so the user would have no problem to act on it. And icons are a great way to express/communicate the idea.

But, sometimes users face a few issues that we should have fixed.

1. Icons don’t load quickly on the interface.
2. Icons look blurred.
3. And, sometimes fail to load even after waiting for a few minutes.

Because of this, you may cost a user drop and this could be a disaster for anyone 😢.

So let’s discuss a solution to it 👇

You may have heard about the icons font, which creates a font file of customized icons created/designed by you. I am pretty confident this solution can address all the issues listed above and more than that.

We will use the Icomoon.io app to convert the icons into the font file.

1. How to create icons for this solution

Here are a few basic guidelines to create an icon that allows their effortless import to the Icomoon.io app:

• Single color icons.
• Ignore strokes.
• Ignore text elements (Convert to outlines).
• Have a single path/layer for each icon (use boolean operations).
• Common icon bound for every icon in the icon set (the recommended size is 24 x 24 px).
• Export icons in SVG format.
• Do not convert bitmap image (PNG, JPEG, etc.) into the SVG format, it does not make it vector. Bitmap images embedded in SVGs get ignored.

Tip to convert Strokes & Text to Fills (Using Sketch): Select the shape that you want to convert and choose Layer → Convert to Outlines.

Now we have the perfect icons to upload it on the Icomoon.io app.

2. Importing icons on Icomoon app

There are 2 scenarios when you will try to upload icons on the Icomoon app.

1. Import a new icons set

To import the new icons set you can either use the Import Icons button on the top left and select the icons or use the drag and drop functionality.

2. Add icons in existing icons set

To do this, you can use Import to Set option from the hamburger menu of particular icons set.

3. Quick modifications (If required)

The Icomoon app gives you a certain ability to do modifications. And those are as follow:

Action: Select, Delete, Move, Edit

Delete

If you want to delete icons from the set, then you can select those icons and use the delete button (To select icons, use the mouse pointer button from the action panel).

Move

You can change the position of the icon in the icons set by selecting and moving it to the desire position.

Edit

Editing capabilities are quite good in this app, as you can do a lot of things like adjusting grid, rotate/mirror, move, scale, canvas/alignment. You can also replace and duplicate the icon.

4. Time to create the font file

Step 1: Select and generate a font

Select all the icons you wish to have in your font and click on the Generate Font button on the right bottom. This will generate the Font and give you a preview of all icons with their respective information.

Use the Hamburger menu for more options.

Generate Font option is on the right bottom.

Step 2: Change glyph properties (if required)

Once you Generate Font, you have few glyph properties visible those can be changed if required.

• Class/Icon name.
• System-generated character code.
• Assign a unique character to each glyph.
• Recommend the use of symbols if the icon fails to load (Recommended).
• Use remove icon to remove an icon from the set.

Glyph properties

Step 3: Set basic things in the preference panel

Things can be modify using preference panels are,

• Change Font Name, CSS Selector, Font Metrics, Metadata, and the Version.
• You can change the class prefix and suffix.
• Font metrics allows you to set/modify the baseline.
• Metadata for the file can be set.
• You can also maintain the file version.

Preference panel

Step 4: Download the font

Yey…It’s time to download the font (Button on the right bottom).

Download font

Accessibility

In case, your font fails to load, the best fallback is to use a suitable emoji or a Unicode character code for your icons. Now, even if the font fails to load, the system font would show an appropriate glyph selected by you.

For example, you can use 📅 for a date picker icon or ⭐️ for a favorite/like button.

Loading icon set into Icomoon app

The scenario when you want to add more icons from the current font file.

Here are the steps to follow,

• Click on the Import Icons button.
• Select the selection.json file from the font file folder (Previously downloaded).
• Add new icons in the icon set by using the Import to set option from the hamburger menu.
• Arrange newly added icons as per preference (it is recommended is to add new icons to the bottom of the set. This ensures that the character codes of earlier icons are not changed).

Conclusion

Creating an icon font file gives outstanding results as it comprises icons set up to 80%. And after all, it helps to improve the user experience of the application by reducing load time and providing quick responses to the users even if icons are failed to load. This solution keeps you ahead of creating and maintaining icons for your project.