Some useful tips to make good icons
And a gift at the end!
Icons have become a crucial part of every interface because they help us to reduce the visual elements on the screen and need for unnecessary explanation about certain action or behavior. From a designer’s point of view it’s also fascinating because, through good icons, you can see the result of a great work of simplification. This small article tries to address some tips to create your own icon set for your product, with the best practices, using an example to demonstrate some advice, an example that you can find at the end as a small icon set to download, 100% free. Let’s get started!
Define your needs
At this point, I’ll assume that you have the requirements for the product you’re making already described. So with that, you need to map which parts of the interactions in your interface will need an icon.
Remember, not every action can be an icon because the level of abstraction that icons could have, it’s limited. It’s fine for requirements like “display menu,” but to design icons for actions like “show a table of information filtered by connected users” probably is a bigger challenge that I’ll not recommend to address.
Why?
For that many of these icons work successfully because they feed on common knowledge. The “burger” icon to display the menu options was controversial the first time it was applied because graphically it’s not describing the action with accuracy, but its continued use turned into an element of the ‘common knowledge.’
That’s great because this evolution of the common knowledge about technology is what encourages us to continue innovating.
I love lists and tables because it’s a good way to organize almost everything. So I suggest creating a table like this one. If you’re working inside a team, a Google spreadsheet should work good enough because you can even have discussions through the comments.
This is the list I made for this small icon set. In my case it is not for a product design, but to outline the most common needs. It’s the same process but with a different objective.
Define your style
Let’s also assume that at this point, you’ve passed a moodboarding process and you have a clearer picture about the style and personality of your product. Before designing icons, it’s very important to have that clear. As these icons will be a significant group of elements inside your interface, they should fit into your product’s personality.
A mental exercise, imagine you are defining your look, and for some odd reason you want a hipster style, so probably going outside dressing a non-squared shirt and without big glasses, will not help achieve your objective.
How to define the style of the icons? Just translate the product’s visual needs. For example, the personality of Medium is something very clean and sharp, that’s probably why they’ve chosen a linear icon style. For this exercise I want a pixel art style, I’ll explain the reasons later.
Now let’s start with the actual work
1. The Grid
One of the reason I told you at the beginning to define the list of icons through the table with all those variables, it’s because you need to know in what size your icons will be displayed. That’s highly important for their legibility because even when retina display screens seem to be the future, a big number of user’s screens (mostly among laptops and desktop computers) are still 1x.
So imagine that you’ve designed a beautiful icon based on a 32 x 32 grid, and then later you have the need to use it in a 16 x 16 space. That sharp icon you’ve designed will not longer be “sharp” at that size on a 1x screen. In other words, my recommendation is to always think in a grid that can be scalable and used in many situations as possible.
For this exercise I’ll use a 15 x 15 grid for two reasons:
- It’s a good minimum size, so the set can be versatile and will have a larger amount of scenarios to be used.
- 16 x 16 even when it’s almost a standard, for design work it’s a nightmare. For example, if you want to design a simple “+” icon. How will this icon be displayed well in an even grid? I need an odd grid for situations like this one. It’s a little bit hard to explain with words, but this is a comparison of both situations where in a 16 x 16 scenario I have to go out of the grid having, as a result, a non-sharp icon:
2. Synthesis
This is the part why I love icon design because you need to put in practice minimalism. Or the art to translate complex actions into very simple understandable shapes. It’s not easy, but is not impossible. Here some tips that could help you to do it well:
- Icons need to be consistent with their space. So putting a background with the size of the grid (I recommend a squared shape) helps a lot. Also try always to fill that space, keeping a good balance between the filled and the empty areas.
- For icons with a defined solution, like for example this “delete” icon, try to illustrate the figure you have in mind using the less amount of elements. See how it looks the designed trash can over the grid
- Icons without a defined form are trickier. Like, for example, the always controversial “share” icon. We can’t use too much of the common knowledge here because, thanks to Apple and Google, this icon has become a mess (seriously, Apple should have made a better job there). We have 2 options here: Go back and delete this icon from the list and put that action as a link (definitely the less risky option) or we can take this as an opportunity to create an original Share icon. One of the problems with the Apple’s solution is its ambiguity; it can be easily confused with an “upload” action:
What is wrong? They are using the arrow up, that unique bad design decision creates confusion, so what if we use the arrow pointing to another direction? Not up or down, but to a corner, that should create the idea of putting “something” outside the product. Here is the solution in details:
Two final tips: 1) Keep your files organized when you’re dealing with a large number of objects like icons. Organization is the key to keep consistency, as well as choosing a good naming system. 2) Test your icons with people outside the design process. You need to avoid ambiguity, so probably they can be able to see your icons differently than you. That’s a valuable feedback.
Tools and Formats
To understand formats, we have to know a little bit about the current state of the technology. And just to save you the research efforts, the future (and the present) are SVG images. This format allows you to avoid producing 2x images. They can even be modified inside the code! Changing colors and some other basic properties. Pretty awesome, eh?
Knowing that need for producing SVG images, Photoshop is out of the table. My best suggestion is Illustrator or/and Sketch. Actually, I made these icons 80% in Sketch because I like how this software allows me to keep the files organized. Sadly, Sketch is not very powerful dealing with complex shapes; Illustrator is better in those cases. The “settings” icon, for example, I made almost completely in Illustrator and then I put it into Sketch.
Results
And finally, going to the point, here are the results:
How can you download the set used as example?
Go to this Dribbble Shot and there you can find the link and instructions to download it. In the folder you’ll find the Sketch file with all the icons, and also in PDF and SVG format.
Enjoy it!
