Why read this? : We show how to create icons with Adobe Illustrator. First, learn how they make designs easier to understand, and improve visual appeal and usability. Then, follow our case study as we show how we created the icons for this site. Read this to learn how to create icons with Adobe Illustrator to boost your brand identity.
This week, we look at how to use a specific area of graphic design – icons – to boost your marketing and creative impact. We’ll do this by sharing the steps we took to create the icons for this website.
You don’t need deep technical knowledge of Adobe Illustrator to follow along. But some familiarity with the basics of Adobe Illustrator and what it can do is helpful.
We’ll show step-by-step how we created the 54 marketing, creative and e-Commerce branded icons you can see at the top of the page. Each of which appear on a different skill guide page on this website.
Why use icons?
Let’s start with what icons are, and why you use them. Icons are simple graphic designs which visually represent ideas, concepts or objects. They have 3 benefits from a design point of view :-
1. Icons are easer and faster to understand than words
First, visual representations are usually easier and faster to understand than using 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 visual representations, than to interpret the meaning of text on a page.
Our brains are naturally drawn to visual cues. For example, think about how you use 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, not read the text.
Icons are 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 a lot of 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.
From a visual appeal point of view, they 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. You can use icons 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.
So, keep these 3 benefits of using icons in mind as we move on to our case study :-
- visual representation of ideas to make them easier to understand and remember.
- improving visual appeal and usability.
- building your brand identity.
Case study background - How to create icons
The goal for this project 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, the page template we used was called Neve, and we used site building tools from Elementor. These tools included the option to add an icon box, and that option gave access to a library of over 1,500 free icons from Font Awesome.
For new sites, that’s a helpful short-cut to quickly get icons on to your website.
You can use the website page settings to adjust the size, colour and placement of the icon, so you can make it a little more distinctive. But, importantly, you don’t have an option to edit the design of the icon itself.
And while that wasn’t a problem in the short term, it was something we wanted to improve longer term. Because, what it meant was 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, you 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, it should be clear, we believe distinctiveness is a big part of what makes 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 tougher to actually show it.
So, the overall goal was to show more distinctiveness. We wanted to move away from generic icons anyone could use. The goal was to create specific and distinctive Three-Brains branded icons. That’s where the thought process started, which led us to planning how to create icons for the website.
A second design challenge - icons for specific deep topics
We also faced another challenge. Though there are 1,500 icons in the default Font Awesome library, they cover topics broadly. But, often they didn’t cover topics deeply. Where we had multiple pages under a broad topic, the choice of icons often wasn’t specific or varied enough to cover the topic 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.
Or, another example. We have 6 different articles under writing skills. So, a pen is usually a good symbol for writing, right?
But, what if our writing articles needed icons to represent writing 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 be differentiated enough from each other to cover each specific sub-topic.
And then of course, with more obscure or very specific topics, sometimes there just isn’t a default icon to use. So, to design icons for topics like market research agencies or online store strategy for example, we had to create icons from scratch.
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 key steps for each icon.
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 signals search or research, for example. They know a pen signals something something about writing. And even for less tangible items, they recognise symbolic designs like a light bulb signifies a new idea or innovation.
So, for each item, our first check was on 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. What we were looking for were 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 designs 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 a bit of 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 qualitative 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 from other types of research? Well, that research is about numbers and trends. And these, you could symbolise with the use of a graph.
Which is what you then see in the icon for quantitative research.
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 your 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 - Publishing to your website with consistency
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.
So 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 about 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.
We cover more on the use of Adobe Illustrator in our graphic design tools guide. Our brand identity guide also has more on the need for distinctive brand assets. Or, if you have a specific question or challenge on how to create icons, feel free to contact us directly.
Photo credit
Woman at Station with Phone : Photo by Daria Nepriakhina on Unsplash
