foreSight Blog

Create Your Own Flat Icons and Make Your Web App Really Pop (Part 1)

In the world of web and mobile application development, the use of minimalist or “flat” design principles has reached a fever pitch. In fact it’s become so popular among developers that if we’re not there yet, we may well be approaching “peak flat” (an oxymoron if ever there was one!).

What exactly is flat design? By favoring two-dimensional graphical elements without any embellishments (shadows, bezels, embossing, color gradients, etc.), flat design principles remove potentially distracting elements from the mix that (some would argue) serve no functional purpose for the end user.

With flat design, the theory goes, graphical clutter is swept away and the user can rightly focus on using the application to be entertained, or to accomplish some important task. Because no matter how aesthetically pleasing your application, what matters ultimately are the benefits it provides to the end user.

Using icon fonts for flat icons

The rise of flat design has also led to the popularity of icon-fonts. Think FontAwesome or Bootstrap Glyphicons. Icon-fonts, as their name suggests, represent icons on the screen using a font rather than using an individual image file, like a PNG or a JPG.

Today most applications are being used on multiple devices, which means developers have to make their applications “responsive”. So the content of an application has to adapt or be responsive to the various screen sizes of laptops, tablets, and smartphones (“design once” approach regardless of screen size).

The need for responsiveness is a big reason why image icons are falling out of favor. They don’t scale up very well (becoming noticeably less crisp as you make them larger), and they also make pages slower to load, especially when multiple image icons are used.

Obviously this can have a negative impact on the user experience, particularly when an application is being viewed on a mobile device.

Font icons are winning the day

So flat icons that are a single color provide some key advantages to the web application developer. For example, since they are vector-based graphics, they scale very easily without losing image quality. They can also be modified by making simple CSS changes, in the same way that you would use CSS to modify the way text looks on the screen.

With CSS you can easily change the color of an icon or rotate the text. And if you haven’t bought in a hundred percent to flat design principles (maybe you believe we have reached “peak flat”), you can add shadows, transparencies, and so on. Best of all from a UX perspective, font icons typically have smaller file sizes, so they load much more quickly than image icons, which is a great advantage for portable devices.

Most of the websites or applications today that integrate flat design principles also use font-icon libraries. Well-known font libraries (like FontAwesome) are widely used and have even contributed to the standardization of symbols used to represent specific functions. Think of the now standard menu icon, which resembles a hamburger (three horizontal lines). These “universal” font icons can easily be integrated into your own applications, making them instantly more intuitive.

Some drawbacks and considerations

On the other hand, there are a few potential drawbacks to using some of the well-known font libraries for your web or mobile applications. Yes, there’s that element of immediate recognition for your users, but there’s also the potential that your stuff will start looking like every other web site or app out there.

There are also limits to the variety of flat icons available in the popular icon libraries. You can see this in many applications where an icon bears no relation to the idea it’s intended to communicate to the user. If you’re using an application and you have to think hard about what a particular icon means, it’s clear the developer has not nailed the user experience.

What about creating your own icon-font library?

If you really want to make your new application stand out, one option worth considering is developing your own custom icon library. You can either create these from scratch or use existing icons and customize them to suit your design purposes.

In my next post I’ll provide some tips on how to build your own flat icons into an icon font library. So stay tuned for Part Deux!

Robert Litalien

Robert is a technical project lead at NetFore and an expert in UX design.