Why read this? : We show how to create icons to improve visual clarity, appeal and usability. Learn from our case study of how we created the icons for this site with Adobe Illustrator. Read this to learn how to create impactful icons to boost your brand identity.
You see icons being used all over the place, particularly on websites. But unless you work in graphic design, it’s not an area many people think about.
As we recently ran a project to add icons to our site (you can see them at the top of the page), we thought it a good time to look at how to create icons and what to do with them.
Let’s start with what icons are, and why you use them. Icons are simple graphic designs which visually represent ideas, concepts or objects. Their main design benefits are that they :-
- are easier and faster to understand than words.
- improve visual appeal and usability.
- can be used as assets with your brand identity.
1. Easier and faster to understand than words
First, visual representations are usually easier and faster to understand than text descriptions. Visuals make things easier for your customers.
This is particularly true for intangible items like ideas and concepts.
It takes less effort for our brains to interpret visuals, than to interpret the meaning of words on a page.
Our brains are naturally drawn to visual cues. For example, think about the apps on your phone. Do you look for the word “weather”? Or, the visual with the sun, and the cloud? What about taking photos? You look for the visual which looks like a camera, right? Not the word camera.
Apps are easier to find and use because they have icons – visual representations – of what they are. That doesn’t mean the text is omitted, but we usually only need to see the visual to know what it is.
Easier to remember
These visuals are also easier to remember. They create stronger associations in the brain which are easier to access. (see our design psychology article for more on this).
If we described this design, “a landscape shaped rectangle, with a circle in the middle, one very small rectangle at the top right, and a smaller parallelogram attached at the top of the main rectangle”, it takes a few seconds to recognise what we’re talking about.
But if we showed you a camera icon, like this one, you know straight away what it is, right?
From a design point of view, these are examples of affordances. This is a design principle, based on using precedents. Your design gives people what they expect to see, which means they recognise and understand it more easily.
If you make something look like a button, then expect people to press it. If you show an arrow pointing to the left, most people expect it to mean “go back”. And so on. Icons use these affordances to make designs easier to understand.
2. Icons improve visual appeal and usability
Next, using icons on your website improves the visual appeal and usability of your pages and content.
For example, they help provide contrast (one of the most important design principles) to long passages of text. They can stop pages appearing overly text-driven. And with the use of colour, they can create more appealing and memorable page designs.
From a usability point of view, they help reinforce that the user’s in the right place. They show a relevant visual representation of what’s on the page, and what things on the page do.
We know a magnifying glass is something to do with search or research, for example. And if we see a shopping basket on a product page, we know that means ‘buy now’.
You can also use icons to break up long text passages by giving the reader’s eyes something else to look at.
This gives the eyes a “rest” from reading text, and makes pages more legible. This helps with the overall layout of your website pages.
3. Use as assets with your brand identity
Finally, from a brand strategy point of view, you can use icons to reinforce your brand identity.
You can adjust colour, style and the “tone” of the icons, so they reflect elements of your brand identity.
When you use these elements consistently, it helps build mental associations and reinforces those particular design elements.
Look at all the icons in the image at the top of the page, for example. You can see we’ve reinforced our colours and style using repetition, which is another key design principle.
Case study background - How to create icons
With those benefits in mind, let’s move on to our case study. The goal was to create a set of branded icons to replace the default icons we’d used on the first version of the Three-Brains.com website.
When we first set up the site, we used a design template called Neve, and site building tools from Elementor. These tools included the option to add an icon box, and that gave access to a library of 1,500+ free icons from Font Awesome. This was a helpful short-cut to quickly get icons onto our website.
We could use the website page settings to adjust the size, colour and placement of the icon, to make it a little more distinctive. But, importantly, we didn’t have an option to edit the design of the icon itself.
And while that wasn’t a problem short term, it was something we wanted to improve longer term. Because it meant the icons weren’t unique to our site. Any other website could replicate them by using the same templates and tools.
That was the start of the challenge for us.
The project brief - challenge
As with any brief, we start with the brand and the objectives. This covered our brand essence, personality and values. These support how we deliver our services, so we won’t cover them here.
However, we will share we believe distinctiveness is a big part of great brands.So much so, that it’s part of our brand personality. (See more on this in our brand identity guide and in previous articles).
But it’s one thing to say you’re distinctive. It’s much harder to show you are.
So, the overall goal was to show more distinctiveness. We wanted to move away from generic icons anyone could use. Instead, we wanted specific and distinctive Three-Brains branded icons. That’s the thought process which led us to planning how to create icons for the website.
A second design challenge - icons for specific deep topics
There was also another challenge. Though there are 1,500 icons in the Font Awesome library, they cover topics broadly, but not deeply. Where we had multiple pages under a broad topic, the choice of icons often wasn’t specific or varied enough to cover what we needed.
So, you might use a magnifying glass to signify an article on research, for example. But, what if you have 6 articles on market research as we do? There weren’t 6 different magnifying glasses to choose from.
And what if the articles were on specific areas of a topic? So, if we wanted to differentiate between qualitative and quantitative research, for example. There wasn’t the choice of icons to do this.
A final example. There was a good pen icon to symbolise writing. But our writing skills guides needed icons to represent different writing skills like advertising copy, sales copy, and writing for blogs. Would the same pen makes sense for those different sub-topics?
No.
So, we needed icons which had a consistent theme (writing), but were differentiated enough from each other to cover specific sub-topics.
Plus, with more obscure or very specific topics, sometimes there’s no usable icon in the defaults. You have to design icons from scratch for topics like market research agencies or online store strategy, for example.
That’s why knowing how to create icons helped us find graphic design answers to these challenges.
How to create icons - four step process
So, we had 54 different topic pages which needed their own icon. We went through 4 steps for each icon :-
- Research what’s already been done.
- Draft the design in Adobe Illustrator.
- Tailor them to the brand identity.
- Publish to the website.
Step 1 - Research what’s already been done
As we said, there are often precedents and expectations in visual designs which customers are familiar with. Affordances, remember?
They know a magnifying glass means search or research, for example. They know a pen signals writing. And even for less tangible items, they recognise icons like a light bulb signifies a new idea or innovation.
So, for each item, our first check was Google to see what existing visual icons were out there. So, searching “Market research icons” and looking at the images tab. Searching “qualitative market research icons” and so on. We were looking for any commonly used “signals” in the designs.
This research isn’t about copying what’s already out there. You use existing ideas to inspire, not to imitate. You use the essence of common patterns, but you bring your own style to the design.
This “not copying” is important. First, that wouldn’t meet the brief of making us distinctive. And it would also involve potential copyright and licensing issues. That was a can of worms we didn’t want to open. The best way to make sure you’re not breaking any copyright is to create your own designs.
Step 2 - Draft the design in Adobe Illustrator
So, with the research inspiration, we then set about creating the icons in Adobe Illustrator itself.
A little bit of background on the technical set-up. We opened a basic blank 300px x 300px artboard for each design, at 72dpi.
Common usage visual items
For any “common usage” visual items our research had shown us we needed to include – a magnifying glass, a laptop, a light bulb, for example – we used the basic Shapes tools (Rectangle, Rounded Rectangle and Elllipse mainly) to draw out each shape.
We then manually adjusted these basic shapes using the Selection and Direct Selection points on the anchor points and paths.
And then when we had the main shape, we used the Shapebuilder tool to form the actual shape of the icon.
Creative thinking visual items
For more non-standard visual items, it was the same “production” process in Adobe Illustrator. But we needed to do some creative thinking, before we started those designs. We needed to generate some ideas.
This meant understanding the topic, so we could symbolise it visually.
In this example, the generic symbol for search and research is the magnifying glass. So, we had to include this on the icons for research topics.
But to drill down to qualitative research, for example, we had to consider what is it that makes that research different from other types of research? The answer we came to was it involves direct conversations with customers.
And “conversation” does have an identifiable symbol in the form of speech bubbles, which you can see in the design.
Same process when it came to quantitative research. What is it about quantitative research which makes it different? Well, that research is about numbers and trends. And you could symbolise these with a graph. Which is what you then see in the quantitative research icon.
Convey meaning with the least amount of design
For each icon design, we then reviewed it to check every design element was needed to make the design work. We had each design element on different layers in Adobe Illustrator. As part of the review, we turned these layers on and off for visibility.
If the design was still understandable without a layer, then we left it out. This is an important discipline to try and convey the most meaning, with the least amount of design. (based on the work of legendary designer Dieter Rams). So, for each design where we could take out elements, that’s what we did.
That’s why none of the people images have full faces, for example. It’s why there’s no actual text on any of the icons. (unless you count the number on the sales promotion one, but numbers aren’t technically words). And it’s why none of the graphs have axes, titles or sources.
We didn’t need any of those to still convey the meaning of the icon. The icon designs worked without them.
Step 3 - Tailor them to the brand identity
Once we had a basic design which visually showed the topic, next we looked at how to make it also represent our brand identity.
At the simplest level, for this project, the next thing we did was to add our brand colours. It’s worth adding colours later in the design process, than earlier.
It’s possible these icons might appear in formats where there’s no colour. So, they need to also work without colour. We checked each of these in grayscale before we added any colour.
That being said, we knew these icons would only appear on our website, and so would always be seen in colour. Red, blue and purple are the dominant colours in our brand palette.
And as you can see from the collated summary of all the icons, the red is our lead brand colour and appears on every icon. And you’ll find the secondary blue and purple colours in most of the icons.
Repetition and consistency reinforce brand identity
This created repetition and consistency in our brand assets. And this, helps reinforce our brand identity. We have specific Hex colours which we stored as “swatches” in Adobe Illustrator so we used the right colours every time.
In fact, there’s only one icon where we used any colours outside the brand palette. That’s the one on the use of colour in marketing where we felt the colour wheel was the best way to bring that topic to life. And that kind of needed colour.
But one challenge with that icon, and some of the others was if the icon was too generic.
So the colour wheel itself is quite generic, for example. A process outline like we have on the market research process icon is quite generic.
So, where we thought the design was just too generic, that’s where we added some of our own branding. You can see the distinctive Three-Brains logo on icons to make these icons stand out more.
The logo doesn’t appear on every icon, though. Partly, because it just didn’t work visually on some of them. And if we used it on every icon, it could be too much and put people off. But it’s there on enough icons, that our brand identity is clear.
Step 4 - Publish to the website
The final step on each icon was to export it as an .svg file on a transparent background. This was the graphic file format required to publish icons via the Elementor site builder.
These were exported at the same 72dpi so the file size was kept low. But as they were vector graphics, they retained the integrity of the shape, if we needed to resize them at any future point.
We named each icon after the topic it represented, and tried to use the keyword from the article. Not only does this make them easier to organise and find, it also helps your SEO tool recognise this as a relevant image for the page.
Set a checklist for publishing the page
We then set a checklist for publishing the page in Elementor, so each icon appeared in the same place and in the same way across each page. This is another way to drive consistency and repetition.
In this case for example, it meant setting the spacing and padding (the white space around the image) and the actual size of the icon itself. It meant defining the font size, style and colour of the title text which accompanied each icon.
We’d to do some slight manual adjustments with the sizing to make sure they looked “right” on each page. But, this was usually just a matter of a few percentage changes in the size. And it was mainly due to some of the icons being portrait, and some being landscape.
One way we could have overcome the need for these manual adjustments would be if we’d set say a standard background shape for all the icons. So they could all have gone on a a rounded rectangle or square, for example. You’ll see this on some other sets of icon designs.
However, hands up, we didn’t actually think of this until afterwards. And to be honest, we think this would have made our designs too uniform. We think there’s enough consistency across the designs. But there’s also enough variation in the types of icons, that it’s a good fit for our brand.
And so, once we’d published the icon to the page, it was a case of then repeating the same process on the next icon. And for all the remaining icons until we were done.
Conclusion - How to create icons
Icons are a great way for designers, both beginners and experts, to practise their graphic design skills.
For beginners, the shapes and Shapebuilder tool are easy to use, and the creation of the icons themselves isn’t technically challenging. You don’t need to use more complex features in Adobe Illustrator like Effects and Textures to create the basic shapes. They’re just a good design challenge to get your head around the basics of Adobe Illustrator.
And for expert graphic designers, icon design can still be a fun and challenging project. Because, there’s a real design skill in working the icon design down to its core and most simple elements.
When you practice how to create icons, it forces you to stretch your creative thinking muscles. It forces you to be focussed and disciplined in what goes into your final design.
Check out our graphic design tools guide for more on Adobe Illustrator. Our brand identity guide also has more on the need for distinctive brand assets. Or, get in touch if you’ve a specific question or challenge on how to create icons.
Photo credit
Woman at Station with Phone : Photo by Daria Nepriakhina on Unsplash
