So, what’s the difference between icons and symbols in web design?
Updated: Jul 6, 2020
As part of the rebranding and Hubspot integration of the new oe:gen website I created a number of images for a set of icons to be used throughout the site. The hand rendered images are used to convey a personal touch and hints at the work done behind the scenes – rough sketches at kick-off meetings, sticky note wireframes, whiteboard scribbles – basically working things out. They hopefully bring a personality to the new brand too – oe:gen don’t take themselves too seriously and they’re a very approachable bunch of professionals.
For the homepage I believed the ‘services’ section would be best represented with simple geometric shapes rather than icons to free them from preconceived ideas. Images such as a light bulb for marketing, a handshake for sales, a user icon for customer. I reasoned that a shape could express something that has a deeper meaning with different aspects to it, compared to a simple icon people have seen used over and over again. The approach would be different, however, if we were talking about interface design.
Growth Driven Design
We have adopted a Growth Driven Design approach to projects at oe:gen so we opened up an internal Slack channel to gather initial feedback.
Shouldn’t icons make sure they don’t make you think? There’s no point having a visitor leave the site because they didn’t realise all the answers they were looking for were hiding behind the slightly bizarre icon.
Obviously not everyone saw the images as something symbolic but as iconic (and slightly bizarre). For clarification I quickly googled the differences between an icon and a symbol. This is how Mark Boulton describes an icon sign, an index sign and symbols:
An Icon sign is a sign that resembles something, such as photographs of people. An icon can also be illustrative or diagrammatic, for example a ‘no-smoking’ sign.
An Index sign is a sign where there is a direct link between the sign and the object. The majority of traffic signs are Index signs as they represent information which relates to a location (eg, a ‘slippery road surface’ sign placed on a road which is prone to flooding)
Symbols – A symbol has no logical meaning between it and the object. Unfortunately the web is littered with bad examples of this type of sign, but there are good one’s – a homepage icon which is a house for example. Other off screen symbols which may help explain the difference are flags. Flags are symbols which represent countries or organisations. Again, the crossover to design and branding is very evident in these signs.
So what is the difference between Icons and Symbols?
Both symbols and icons represent other things, but an icon is a pictorial representation of the product it stands for whereas a symbol does not resemble what it stands for.
A symbol represents products or ideas, whereas icons represent only items that are visible.
Icons are restricted to graphical representation of objects and one can easily understand what they stand for. On the other hand you have to learn what a symbol stands for.
The one thing that might be missing from the website is a connection and understating (an education) of what the shapes represent within the oe:gen brand/story. The images may change over the next few sprints of website changes but for the time being we are keeping the simple shapes – mainly because they look really nice and that’s good enough for me.
I found this talk by a real Iconographer. Susan Kare walks us through some key points regarding the design of icons and symbols. Kare is an artist and designer and pioneer of pixel art; she created many of the graphical interface elements for the original Apple Macintosh in the 1980s as a key member of the Mac software design team, and continued to work as Creative Director at NeXT for Steve Jobs.