Michael Flarup is an icon designer based out of cozy Copenhagen, Denmark. He is what Somebody would call an “icon” himself, in the graphic design world. Mr. Robocat recently wrote one GENIUS blog regarding Icons vs. Logos, and I could not have wrote it better myself. It is about as perfect of an explanation you can get to WHY Icons are NOT Logos and Logos are NOT Icons. Here is the recent post from his incredible website, pixelresort:

Often one stumbles upon the confusion between icon and logo design. While logos may use the same visual vocabulary as icons, let there be no doubt; Icons and Logos are two completely separate design disciplines requiring different tools and different mindsets.

The gap between the designers vocabulary and the clients knowhow can cause some problematic confusions. To alleviate this lets look at what an icon is, what a logo is and how these two things could come to be confused.

What’s an Icon?

Apart from any religious denotations an icon is a graphical representation of a concept or operation. We use icons to bridge the understanding of abstract analogies and practical use. Icons can be used to illustrate an entire application or individual operations within that application. In short, icons help us understand and recognize concepts that might otherwise be pretty hard to grasp.

I could write a very long article about the whimsical nature of icon conventions and the semiotics that guide these, but in this case it’s more relevant to look at the technical differences that is so fundamental for icon design and how these differ from logo design.

Icons are Not Scalable

More than often, icons are not scalable. The very idea of icons are to best convey a given message within a predetermined confined visual space. In today’s iconcentric interfaces we allow for multiple variations of the same icon. The icons that are sitting in your dock most likely have atleast 5 different states embedded, making them appear crisp in all aspects of your interaction with them. List view in OSX gives you the 16×16 pixel version while the dock uses the 256×256 pixel adaptation. These are not scalable vector versions, they are handcrafted raster masterpieces. The creator must carefully select how to best take advantage of the canvas in any given size and more than often completely recreate the icon in those sizes.

manila icon
My manilla mail icon in it’s various states. Note the different layout of the elements in the smaller sizes.

Icons are Quadratic

Icons operate within a complete square canvas. How you choose to employ that canvas is up to you, but it’s restricted to that straight edged space.

Icons are created on a neatly defined and restricted canvas

So that’s it. Icons are not scalable, they’re handcrafted raster imagery born from the desire to objectify an operation or a concept within a confined visual space. How does this differ from a logo?

What’s a Logo?

A logo is a graphical element like an ideogram and/or a carefully arranged typeface that together forms a trademark or a brand. There’s an infinite amount of ways to think about logos and logo design. Again, the important thing here is to look at the technical differences from icon design.

Logos are Scalable

A logo should be completely scalable. A logo is the spearhead of a company’s commercial brand or any economic or non profit entity for that matter. Therefore a logo should be replicatable across many forms of media. This has great impact on the sort of mindset you need to bring when designing logos. We’re talking strictly vectorbased output and more than often, graceful degeneration of colours all the way down to uni colours.

Logos are supposed to be scalable.

Logos have No Boundaries

Well in theory a logo could be anything. Other than the obvious benefits of working in a format that is easily scalable and replicatable there really is very little rules compared to icon design. Icon design is very influenced by technical dimensions and the restrictions of the systems that display them. Logo design is a completely different venue. A logo could be any shape, colour or dimension – it can be waved from a 100 feet banner or tattooed on a butt cheek. It’s only constraint is that of the physical media that will display it.

Why are We Confused?

Icons have taken a very prominent role in modern interfaces. This has obviously spilled over to the realm of branding where many icons serve both as application icon and branding for that entity.

branding icons
Panic creates excellent software and uses their application icons as product branding

This wave of iconism™ (yes, I just invented that for this purpose) has influenced many graphic designers and a lot of the appealing aspects of the cartoony and crafty iconized style has made it’s way to modern logo design trends. Infact this style has become the posterchild for the web 2.0 movement, and such many internetbased firms have logos that uses the same visual vocabulary as icons.

Logos inspired by icons
Logos inspired by an Iconistic style

And while logos can certainly employ an icon-like style, and even mimic the quadratic nature of icons. Let there be no doubt, Icons and Logos are two completely separate design disciplines. It’s important to know the difference between these two things, as they inheretly seek out to fulfil two very different goals, both technically and mentally.

Below Michael has included a PSD template that supplies you with the canvas in the correct dimensions for making your own icons. You can follow Michael @Flarup on Twitter.

Download Icon Size Template

Related Articles