Optimizing icons in today’s feature-rich applications is imperative. Icons in multiple formats and sizes often take users to boring screen loaders. Such an experience may discourage and frustrate the user even before they see the main app leading to poor user experience.
Here we offer tips on solutions for optimizing icons for mobile and web applications.
Problems to solve
- Icons file size – Heavy icons size may take more time to appear on the screen.
- Icon scaling – Same icon in different dimensions treated as a new icon.
- Icon formats – Managing different icon formats in one application.
- Fail to load – For any reason icon fails to load.
Possible solutions
- SVG (Scalable Vector Graphics)
- Icons font – works with Web, Android, and iOS platforms
Creating icons
Here are a few basic guidelines to create an icon that allows their effortless use:
- Single color icons
- Ignore strokes
- Ignore text elements. Convert to outlines.
- Have a single path/layer for each icon (use boolean operations)
- Have a 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.
Importing icons using Icomoon
Icons need to be converted to Fonts once they have been created using the guidelines listed above. We’ll create these fonts using Icomoon.io’s app.
Import a new icons set
To import the icons you can either use the Import Icons button on the top left and select the icons or use the drag and drop functionality.
Add icons in existing icons set
You could use Import to Set from the hamburger menu of particular icons set
Quick modifications
The IcoMoon app provides 4 options: Select, Move, Edit, and Remove. These options help modify icons online. More editing options are provided in the hamburger menu.
Select
You can simply click on an icon cell to select or deselect it. You may also drag to select a group of icons. If you click on an icon cell to select it and then hold down the Shift key when selecting another icon, all the icons in between these two icons will be selected.
Move
Use the Move button to select the icon and move using drag and drop.
Edit
To edit an icon, use the Edit/Pencil button and then click on an icon cell. This will bring up the edit panel which allows you to perform simple modifications such as editing tags, changing the grid size, etc.
Remove
To remove click on the Remove button and select the icons you want to remove.
Creating the font
Step 1: Select icons
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.
Step 2: The following glyph properties can be changed (if required)
- Class name
- System-generated character code
- Assign a unique character to each glyph
- Recommend the use of symbols if the icon fails to load
- Use remove icon to remove an icon from the set
Clicking on an icon will bring the edit panel
Step 3: Preference panel
- Use the preference panel to 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
Saving and Loading
Every generated font pack contains a selection.json file that you can import into the Icomoon app using Import Icon or the drag and drop functionality. This file can be used for adding icons in the future.
Here are the steps to follow,
- Click on the Import Icons button
- Select the selection.json file from the font file folder
- Add new icons in the icon set by using the Import to set an 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)
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.
Conclusion
Optimizing icons by creating an icon font file gave outstanding results as it comprises icons set up to 80%. It helps to improve the user experience of the application by reducing load time and providing quick responses to the users. This solution keeps you ahead of creating and maintaining icons for your project.
If you liked reading this post, here are a few more that may interest you,
“Synerzip team is very responsive & quick to adopt new technologies. Team naturally follows best practices, does peer reviews and delivers quality output, thus exceeding client expectations.”
“Synerzip’s agile processes & daily scrums were very valuable, made communication & time zone issues work out successfully.”
“Synerzip’s flexible and responsible team grew to be an extension to the StepOne team. Typical concerns of time zone issues did not exist with Synerzip team.”
“Synerzip worked in perfect textbook Agile fashion – releasing working demos every two weeks. Though aggressive schedules, Synerzip was able to deliver a working product in 90 days, which helped Zimbra stand by their commitment to their customers.”
“Outstanding product delivery and exceptional project management, comes from DNA of Synerzip.”
“Studer product has practically taken a 180% turn from what it was, before Synerzip came in. Synerzip cost is very reasonable as compared to the work they do.”
“Synerzip makes the timezone differences work FOR the customer, enabling a positive experience for us. ‘Seeing is believing’, so we decided to give it a shot and the project was very successful.”
“The Synerzip team seamlessly integrates with our team. We started seeing results within the first sprint. And due to the team’s responsiveness, we were able to get our product to the sales cycle within 7 months.”
“Product management team from Synerzip is exceptional and has a clear understanding of Studer’s needs. Synerzip team gives consistent performance and never misses a deadline.”
“Synerzip is different because of the quality of their leadership, efficient team and clearly set methodologies. Studer gets high level of confidence from Synerzip along with significant cost advantage of almost 50%”
“Synerzip’s hiring approach and practices are worth applauding. Working with Synerzip is like
“What you see is what you get”.”
“Synerzip has dedicated experts for every area. Synerzip helped Tangoe save a lot of cost, still giving a very high quality product.”
“Synerzip gives tremendous cost advantage in terms of hiring and growing the team to be productive verses a readymade team. Synerzip is one company that delivers “co –development” to the core!”
“Synerzip is a great company to work with. Good leadership and a warm, welcoming attitude of the team are additional plus points.”
“Our relationship with Synerzip is very collaborative, and they are our true partners as our values match with theirs.”
“Synerzip has proven to be a great software product co-development partner. It is a leader because of its great culture, its history, and its employee retention policies. ExamSoft’s clients are happy with the product, and that’s how ExamSoft measures that all is going well.”
“They possess a great technical acumen with a burning desire to solve problems. The team always takes the initiative and ownership in all the processes they follow. Synerzip has played a vital role in our scaling up and was a perfect partner in cost, efficiency, and schedules.”
“As we are a startup, things change on a weekly basis, but Synerzip team has been flexible in adapting the same”
“Synerzip team has been very proactive in building the best quality software, bringing in best practices, and cutting edge innovation for our company.”
“We’ve been working for more than six years with Synerzip and its one of the better, if not the best, experience I’ve had working with an outsourcing company.”
“My experience with Synerzip is that they have the talent. You throw a problem at them, and someone from that team helps to solve the issue.”
“The breadth and depth of technical abilities that Synerzip brings on the table and the UX work done by them for this project exceeded my expectations!”
“Synerzip UX designers very closely represent their counterparts in the US in terms of their practice, how they tackle problems, and how they evangelize the value of UX.”
“Synerzip team understood the requirements well and documented them to make sure they understood them rightly.”
“Synerzip is definitely not a typical offshore company. Synerzip team is incredibly communicative, agile, and delivers on its commitments.”
“Working with Synerzip helped us accelerate our roadmap in ways we never thought possible!”
“While working with Synerzip, I get a feeling of working with a huge community of resources, who can jump in with the skills as needed.”