fbpx

How Simple Your Icons Should Be?

How Simple Your Icons Should Be?

Recently, I came across a very fascinating urban legend about Ernest Hemingway. While spending time in a bar, he bet his friends 10 bucks that he could write a six-word poem that would make readers cry. Hemingway came up with this: “For sale: baby shoes, never worn.” No need to say he won the bet.

There is another great story written by Frederic Brown in 1948: “The last man on Earth sat alone in a room. There was a knock on the door…”

This genre is called Flash Fiction. It really strikes me how much meaning can be put into just a couple of words. It is breathtaking that the whole story with climax and epilogue fits into a sentence or two. Everything is cut to essentials and thought through — there is no room for anything excessive.

This looks a lot like creating icons. Little pictograms that hold an enormous message. This is one of the main differences between an illustration and an icon. Illustrations are like 500 word poems, while icons remind the aforenamed 6 word flash fiction.

Emphasising what truly matters and removing everything unnecessary to pass along the message may be a difficult task. Some icons should look super simple, and simple isn’t easy. So, how do you know what’s the right amount of details you can use for one icon?

It was the writer Antoine de Saint-Exupery who once said, “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away”.

The smaller the icon is, the fewer details it needs. Icons that are made on the 64px or smaller grid should have way fewer details compared to the bigger ones. But you have to be very careful with cutting components from the icon, as if you let yourself get carried away, you will oversimplify the icon.
Look at this example:

interview icon

Can you guess the meaning of this icon? It was supposed to be a job interview. However, it was simplified to the point when you can hardly even identify it.

 

Google material design icons are a great example of the right minimal icons. Each icon is reduced to its minimal form, with every idea edited to the essence. Such design ensures readability and clarity even in small sizes.

The key point is to find that sweet spot between making the icon simple yet chic and clear, and totally ruining it by cutting down the important bits. You should always know the context the icon will be used in. If you take everything away, it might get boring and dry. Have in mind that icons should also attract attention and have some kind of charm in them. If a more detailed icon tells a story better than its simpler version without sacrificing the recognisability in the medium it’s going to be used in, then don’t be afraid to add more components. If little details doesn’t effect the icon’s clarity, and quite the opposite — make it look more charming, go for it!

I started my career practicing on the 32px grid. All the icons in my Icon Store are created on a small grid. You have to really think a lot when you’re designing icons in such small artboards. It was a really valuable experience for me, and I suggest everyone practice working on smaller grids. Nevertheless, now I switched to bigger scales because they are giving me more freedom and opportunity to make my icons more unique.

To quickly sum up everything, reducing your icon to its bare essence is crucial, but sometimes it only makes it more complicated and useless. Always remember that you’re working in some specific context that is the purpose of the icon. Every icon is different, and all icons will be used differently. You should choose right direction for every set.

Stay awesome!

icon-design-guide

Pin It on Pinterest

Share This