It’s astonishing to me how much I’ve grown from traditional design into UI/UX and product design. Although there were many challenges and compromises along the way, I appreciate what design has evolved to in this vastly changing market. I originally came from a creative background specializing primarily in illustrations and commercial design. With 12+ years experience in the design industry and now 5+ years in tech, it was inevitable that my path would lead me to the wonderful world of iconography.

 

My enthusiasm for icons has grown immensely over the years, and given my love for branding, I find symbolism to be one of my strongest suites. Why? I have always found it powerful to have the ability to persuade an action through the simplest form of a pictogram. Delving into it a bit further one could say that pictograms are one of the oldest forms of language in human history.

History of Icons

We can trace pictograms all the way back to ancient Mesopotamian civilization and yet its influence is so common today that we take it for granted. For example, a few of the most recognizable icons we can identify today are Apple, Target and even the infamous Nike swoosh which still hold huge influences in modern day society. I believe that over the years our collective consciousness has developed a broader understanding of communication through symbols. Furthermore, I would even say that iconography is the modern day universal language.

 

Why Use Icons?

We use icons today because we understand that “A picture is worth a thousand words.”  Icons are universal, simple, quick and to the point. They have been used since the first civilization in history and they are still widely used today in real-time communication across the world via desktop, tablet or mobile devices. What better way is there to communicate to a vast and diverse user base than to use icons?

 

Adapting Icons For The Web

Having the ability to illustrate my own custom graphics, I started to wonder how I could optimize my vector icons without tarnishing the quality and performance when displaying them on the web?

 

For the life of me I could not settle on the cumbersome process of creating icons, then rasterizing them,  lowering the quality of my work. On the other hand, if I wanted to retain the quality I would have to scale my files and export them to a bigger size. This decreased the performance of the web page they would be displayed on. Something had to be done so I went into research mode and came across this amazing resource called Font Awesome.

 

 

This was the light at the end of the tunnel, there was hope. In essence this was the proof that what I wanted to do was possible. What one can do simply, so can another with hard work. All I had to do was turn my custom icons into fonts, which was easier said than done.

 

Complexities of Converting Icons into Fonts Properly

Why isn’t everyone creating font icons and using them everywhere? As a designer/illustrator first, I should be doing everything this way right?!  Well it turns out, it’s not as simple as one would think. Let’s break down the complexities of actually doing this step by step.

1. A designer creates a set of icons.
2. These icons are created in a vector type format.
3. The icons set is then converted into fonts.
4. Those fonts are then converted into the formats compatible for the web.
5. Customized HTML and CSS is then needed to have a system to display the icon fonts.
6. Optimization is then needed to make these things more efficient.
7. Lastly, front end developers are needed to actually display these newly created icon fonts to the Interwebs.

As you can imagine there is huge room for error during this process, not to mention that it involves the effort of both designers and developers. So once again why should we go through the trouble of converting icons into fonts? Something I like to do is list out some benefits and restraints to evaluate if using web fonts to display icons are really worth my while.

 

Benefits:

1. Fonts are vectors, so there is no pixelation or blurring on high-resolution screens. If the graphic was rasterized you could have distortion issues on retina screens.
2. Font icons are very light weight thus not compromising the performance of your site/app.
3. The browser support is as good as it needs to be for font icons.
4. Once the font icon system is in place, using them is very convenient.
   • Arguably easier than using sprite sheets.
   • They are even flexible enough to be modified using CSS, whether it be the size, color, shadow, etc.

Restraints:

1. The icons are single-color. There are some fancy (hacked up) techniques for multi-color; however modern trends and HIG’s (human interface guidelines) recommend single colors for small icons above multi color icons for legibility reasons.

In Conclusion

After listing out my benefits and restraints I was determined to figure out a way to accomplish my original goal. The answer was in the format type of my files. All I had to do was export my vector icons as .svg files from Adobe Illustrator. Which made it feasible for me to convert my .svg icons into fonts. The results were a thing of beauty, low and behold!

 

The icons shown above are the custom icons I converted into fonts. To view these live click here.

 

After a few days of research and experimenting I am quite proud of my accomplishment. Thank you for reading my article! If you would like to know “How to convert your icons into fonts” stay tuned for my next post.