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.
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.
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 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 I’ve included a PSD template that supplies you with the canvas in the correct dimensions for making your own icons. If you wanna talk icon or logo design throw me an email or just have a look at my services page.
If you liked this article, why not comment and/or tweet about it. You can also hit me up on that thing called twitter
Copyright 2009 Michael Flarup All Rights Reserved
I must say, I love that Manilla icon you did. It’s awesomely detailed and very cute at the smaller sizes. <3
Yes, finally somebody say that Logos and Icons aren’t the same. Thank you
Great post, so true.
Very well written - you even managed to get some truth in there:) This ought to be a “client must read”
Are there really people who thinks icons and logos are the same?
Pretty awesome post. Really well written.
Really nice read, absolutly i am agree with u!
interesting read. i like the choice of logos you used to buttress your point. thanks
Not that there are many people who thinks that icons are the same as logos , but many tends to use them either ways, irrespective of their usual usage. Which leads to confusion ;).
Actually I would consider many of today’s icons mini-illustrations and not icons. They are often too busy and not simplistic enough to be understood instantly. Good post!
Don’t know if it’s a Swedish (and/or educational) thing, but I was taught that a Logo is a purely textual (although often styled to be unique and recognisable) element. A Logo can be complemented with a Symbol, and together they form a Mark. In other words, Mark being the correct term for what we commonly refer to as a Logo.
And I’m not quite sure why bring this up - guess I’m curious to hear other people’s opinion?
+1 @Mladen.
LOLing at the “quadratic nature” of icons
@Mladen: You’d be suprised. I get alot of well educated clients that simply cannot tell the difference and confuse the two terms quite alot.
@Martin Rosell: A Logotype is purely textual, but the term ‘logo’ is very broad and basicly covers any graphical element and/or arranged typeface that that is used to identify organizations and other commercial or non-commercial entities. (not the most reliable source) http://en.wikipedia.org/wiki/Logo Symbols and marks can be a part of a logo.
Could you point me to any litterature that would oppose that? In the industry i’ve never heard of anyone describe it otherwise.
To answer your question, as to why i bring this topic up, is that i actually get asked this alot. As a freelance designer you hear all sorts of things, but one thing i’ve heard time and time again is the confusion when talking about logos and/or icons. I realize that a large part of my blogs audience are designers, and most of them obviously knows these differences. But, if for no other reason, this article can serve as “putting the record straight” on this subject. I’ll be referring my own clients to it, if they have trouble distinguishing the two from eachother and i hope it can help out some other designers in the same pinch.
Right on. I recently completed a job consisting of six vector illustrations which were referred to as icons by my client. As long as the illustration remains “iconic” I think it’s acceptable. After all icons are small illustrations, usually depicting an object.
Not every icon has to be an OS icon. A website mascot, like Panic has, is still iconic event though it’s not packaged in an .ico or .icns file.
Do you create all your icons in PS? What about vectors?
@Andrea
I think that is more like illustration to me, I agree about the illustration is very iconic and convey one message on each one.
This article is a client must know before land us any icon project.
You’ve just won one new RSS subscriber.
Great post, beautiful blog and I like your sense of perfection.
@admin: All right. Seems to be a difference in terms between English and Swedish. In Swedish Logo is purely short for Logotype whereas in English it seems to actually have another meaning. Can’t point to any specific litterature straight up (but I’ll check it up), only to an excentric teacher : )
Regarding bringing it up, I accidently missed a vital “I” - “not quite sure why I bring this up”. Your subject was most relevant and an interesting read! : )
I think the confusion is easily explained. For Gen-X-ers and before, the “icon” was (and is) the term used to describe the graphic element of a logo. The “mark” as it were. The term “icon” is accurate and good to describe illustrations and wayfinders; however, that term was lifted by the post-bandwidth generation. Perhaps that’s where the confusion sets in.
By the way, kudos to you. Your work is excellent. Highly creative and I’m very appreciative of the smartly designed blog and way-cool commenting you’ve got on here. Cheers!
Excellent article. It was a very nice read, and your explanations were awesome. Love your site to. Absolutely beautiful!
Wow useful article and great in-depth explanations. It is almost confusing today when a client want their logo converted to an icon, especially to smaller size icons which will lose some details.
Fantastic explanation, I’ll have to link to this one in future
Very good article. Icon is for giving infomation and logo is for branding,
Great article. So well said. Impressive how you found the words to explain this issue in such a concise and clear way.
Chapeau.
Senuf
Buenos Aires - Far down south
amazing, thanks for sharing this with us