We often stumble upon the confusion between icon and logo design. Even if logos and icons may use the same visual vocabulary they are two completely separate design disciplines requiring different tools and mindsets in terms of approach.
The 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 are practically countless variations and ways to think about logos and logo design. Again, the important thing here is to look at the technical differences from icon design.
Logo design is a more free space than icon design. A logo could be any shape, color or dimension; it can be used on a 100 meters banner or even tattooed on a butt cheek(it happens more often than you think, seriously google it). It’s only constraint is that of the physical media that will display it.
An effective logo should be simple, memorable, timeless, versatile and appropriate, so let’s take a look at some examples.
Coca-Cola
The Coca-Cola logo is timeless and memorable.
How good is this logo? People would associate the typeface, the strokes and the color with the company, even if the name is changed. It carries with it brand heritage as it has been the company’s logo since 1885.
IBM
The IBM logo, even if it has suffered some changes and variation during its lengthy run is a memorable and easily recognizable brand visual.
The Icon
An icon (no no, not the religious kind) is a visual representation of a concept or action. 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 with just a graphic representation, instead of a long written work that might otherwise be pretty hard to grasp.
Icon design is very influenced by technical dimensions and the restrictions of the systems that display them.
Let’s take a quick look at what famous icons can tell us about the typical characteristics of an icon, which makes it different to a logo.
Facebook Like
This icon is probably the most easily recognizable at this moment in time(2016).
The icon is made of closed fist holding a thumb up, or literally a ‘thumbs up’. The gesture is usually used as a sign of approval.
On the social platform, this icon is clicked when a user wishes to relay a message of agreement to a post or a comment, or simply ‘liking’ it without having to say anything.
To make it more recognizable, it utilizes only two colours: blue and white which are also found on Facebook’s logo.
iTunes
A music note icon, conveys an idea that the use of the application it represents is music related. Take for example the icon used to launch iTunes:
Although the icon above does not have ‘iTunes’ written on it, first time users will have an idea that the icon represents a program that has something to do with music and is very recognizable to everybody that has ever used an Apple product.
Dropbox
The icon is basically an open box, in light blue which basically entices the user to just drop their files in the box and they can carry and access it from anywhere.
If you have DropBox installed on your mobile device, this is the icon you need to look for and click to access your files. The icon is also integrated in the DropBox logo.
Key take away
Icons are visual descriptors of function. The best icons find a visual metaphor to convey the primary function of the application or the object.
Let’s get a little bit technical
To give us a clearer picture of the difference between a logo and an icon, we need to take a deep dive into the technical characteristics.
Shape: Icons are made to fit in squares (‘quadratic’) and consider the technical requirements of the application it is made for, while logos do not have shape restrictions. Because of this, logo designs allow more creativity in contrast to icon designs.
Size: Icons are usually in 16x16 (favicon)or 512x512. Resizing may cause an icon to lose its quality and would need to be remade if a different size is required.
Logos on the other hand are vector based, and can be scaled into any size without losing quality since they also need to be used in different materials related to the organization it represents such as brochures, business cards, website, banner, signage etc.
Conclusion
Although some logos use an icon to make it more distinguishable, icons and logos are completely different based on the technical aspects alone.
If you find yourself confusing an icon for a logo and vice versa, always ask yourself what you need the design for, and never forget to consider the technical requirements.
Did this article and examples help you? Do you have more questions?
Let us know in the comments below or feel free to contact us any time at office@subsign.co.
To make sure you don’t miss any news or interviews subscribe to the Subsign newsletter here: http://eepurl.com/bZIFJr
