Tips on How to Pick the Right Icons for Your Website
There are many free and premium icon libraries out there. So many in fact that it can feel like you are drowning in a sea of options. Here’s an article to help you pick the right icons for your website or app. We cover how to choose icons that will work together to ensure you always look professional along with a few other tips. And to help you even further, I partnered with Icons8 to offer 3 licenses at the end of the article. Icons8 is a great resource for amazing icons that fit a wide range of styles and needs.
What should you consider when selecting an icon?
Ask yourself: what is the purpose of my icon?
My first tip is that you should choose icons that are meaningful to your subject. Just like illustrations, icons should help deliver a message. This means that you first need to think about what type of message you want to convey, and how to convey it best.
Most of the time, I start with words. What word(s) could describe this concept the best? 2 things help me when I need to find how to illustrate a concept with icons:
- a dictionary of synonyms and antonyms that will help expand the search to a more rich lexical field
- a search on tools like thenounproject that will help me grasp what people imagine for such an icon.
Another solution is to go full abstract. But abstract with a common theme. My friend Myriam needed some icons to illustrate the 3 different countries where she offers her services on the future version of Pragm. She could have gone with flags. But, well, boring. Instead, she decided she will use the main food of that country. So, now, she needs a sausage icon for Luxembourg, a maple syrup (or maple leaf) icon for Canada and some cheese for Switzerland. We will use her website as an example for the rest of the article.
Let’s see how this can be improved.
Icons are not universally understandable. When in doubt, label them!
You need to be careful with icons meaning: not everyone will understand all icons the same way. After all, many icons are often abstractions of concepts, or objects. Some of those concepts might be different from one country to another. And some might not even exist anymore across time. My favorite example is some Japanese user of Microsoft Excel asks “Why is the SAVE ICON a ‘Vending Machine w/ a Beverage dispensed?’ “. If you think about it: when was the last time you saw an actual floppy disk? Will kids understand what it is, or will they think you “3D printed the save icon” ?
So icons, just like photography, need to be culturally relevant. The more complex the concept, the less people are likely to understand it.
My advice: test your icons meaning like you would test any part of an interface. And when in doubt, avoid using icons alone. Always have a label next to them. And if you use icons alone, don’t forget about accessibility Alternative text. This helps screen-reader users get the information as well.
What makes a good consistent icon selection?
Choose icons with the same style for things that belong together
When you are choosing multiple icons for a project, you want to make sure they look like they “belong” together. Unfortunately, many non-designers mix different icon styles in the same project. This brings a lot of visual noise and inconsistencies. It also makes the websites or presentations look less professional.
Here are a few things your want to check
Solid vs outline icons
Solid and outline icons are both monochrome icons. They are often used for UI design because they scale down well. Solid icons are built with filled shapes with some cuts and holes. Outline icons are the opposite and consist of lines that will display the border of the object. When choosing those, you need to make sure the strokes are consistent. Matching together 1px and 3px stroke icons will not work for instance.
I would say, avoid mixing solid and outline icons for the same area or component. But of course those are basic advice to help non designers. It always depends, and sometimes, designers might need to break that rule. Especially in complex UIs where you rely on a lot of icons for actions.
For example: LinkedIn follows the “icons with the same style for things that belong together” in the header. The designers only chose plain icons. Under the posts, they decided to go with outline ones. But there’s an exception: the send icon. I don’t know why they switched that one for plain, but I could imagine 2 reasons:
- The icon was harder to recognize for users in an outline version. That send icon becomes more and more standard, you see this little plain in many messenger tools. The outline version might be harder to recognise.
- They actually want to draw more attention to the sent icon, for, whatever internal KPI/metrics reason
Monochrome vs multi color
You will find icons that use one color (monochrome), but also duotones or multicolor icons, maybe even with gradients. For consistency, avoid mixing different color styles for icons that you will use together. And different background styles as well.
Style consistency
Some icons use some shadows. Some icons have a 2D look while some others have a 3D look. Some icons come into a square shape, others in a triangle, etc. There’s a lot of different visual styles you can go with. Some icons are heavily detailed. Some are super minimalistic. Don’t be afraid to explore! But again, if you start using one style of icon, make sure you use the same visual style when you need icons that work together.
Size and ratio consistency
When choosing icons, make sure they have the same size. Mixing icons of different sizes will again unbalance the presentation / website.
Be also careful with ratios. If all your icons are perfect squares, a rectangle in the middle will look inconsistent. Last but not least: do not stretch the icons to make them fit. Ever.
Choose the style according to where and how the icon will be displayed.
The icon style you chose can depend on the background where you will use it. If you want to use icons with a lot of colors, it might be difficult to use them on a dark or already heavy background. If you know you will use them on such backgrounds, I advise you to go for monotone white icons.
The size matters as well. If you need to use your icon at very small sizes (like 16px for example), you will need some simple shapes. Detailed icons scale down poorly. They will look mushy when too small and people might have a hard time recognizing them.
The bigger you go, the more details in the icons you can have.
How do you make sure your icons have the same style?
The first solution to have all icons in the same style is to get all your icons from the same icon set (fontawesome, material icons, tabler, etc.) This is also a criteria when choosing a set: if the icons in the set have different styles and lack consistency, run away. The main issue is that this set might not have a particular icon you need. So, before choosing and investing in a set or library, make sure it will cover a wide range of your future needs.
Note that some sets will let you request for icons, which is always a nice thing. Finally, if one icon is missing, you can also hire a designer for that specific one.
Another solution is to choose an icon library that lets you search for icons with the same style. Icons8 is my favorite. When you are looking for a specific icon, you can filter by style.
So, back to Myriam’s icons. I am now in the market for some sausage icons. There’s plenty of those. I want to go for an outline monochrome icon, because this is what will look great with her template. In Icons8, you can use the style filter to narrow this down.
Now that I have my sausage icon, I am looking for the 2 others ones (cheese and maple something) in the same style. here we go:
We already have consistency, let’s see if this can go better with some color as well.
How do you bring consistency via a color palette?
My last tip for consistent icons: if you use multicolor icons, make sure all your icons use the same color palette.
Let’s go back to Myriam’s example. The icons I chose exist also in a colored version. But, by default, those colors don’t really match. If the colors don’t match and you can get a vector version of the icon. Then you can manually recolor it in illustrator just like illustrations.
More and more premium libraries like icons8 offer an option to recolor the icons directly in the tool. If I go for the colored version of the icons for Myriam’s website, I can have them match her identity as well.
🎁 (CLOSED) How to win a free 3 months Icons8 licence
I mentioned it in this article, I like how Icons8 has built in tools to help you bring consistency to your icons. I partnered with them to offer you a chance to win a 3-months Full Set aka 100 icons to download by month (3 winners).
To participate in the contest:
- Share this on twitter: “🎁 Check out those Tips on How to Pick the Right Icons for Your Website and get a chance to win a 3 months @icons_8 license via @WalterStephanie https://stephaniewalter.design/blog/tips-on-how-to-pick-the-right-icons-for-your-website-with-icons8/ “
- You can also share it on LinkedIn, Mastodon or Facebook like this “🎁 Check out those Tips on How to Pick the Right Icons for Your Website and get a chance to win a 3 months Icons8 license via Stéphanie Walter https://stephaniewalter.design/blog/tips-on-how-to-pick-the-right-icons-for-your-website-with-icons8/”
- Comment below with the link to your social post to participate, especially if it was not a tweet so I track contest participants
This contest ends on November 17, 2021 – 23:59. I will then randomly pick 3 people who shared the article. Good luck 🙂
