What Good Icon Has?
Idea — even skipping the names of the icon the user shall unambiguously understand what the particular icon means. Yes, it can be difficult sometimes, especially when we are talking about the icons of narrowly specialized sites. Sections like “two-sided tenoners” or “abstract self-consciousness” make you thinking a bit about the idea of the icon itself. Nobody, however, promised that all the things would go easily.
Contrast/corporate style — there is no need to reinvent the wheel; the icons shall be either sharply contrast or in corporate style colors. Utilization of the whole color set is far from being the best solution.
Detailization — in spite of being, as a rule, small in size, the icons shall be treated as a full-fledged project. Ignoring of fine details will worsen the impression.
The formula of creation is quite simple:
1. Decide on concept and style
Hollow/ solid — linearly outlined form empty inside or the form with color filling.
Colored/ monochrome — the color shall comply with the style and topic; it better emphasizes the accents and attracts attention; monochrome icons make the design more “light” and do not overload the project containing a lot of information.
Topical — drawn, grunge, retro, futuristic, «cartoonish», etc.
Large/small — detailization level directly depends on the icon size.
2. Drawing sketches
When we decide on a style we are starting to create icon sketches and search for images. We deem it is more efficient to draw a sketch on paper as it allows making changes quicker and easier (there will be a lot, believe me) and thinking over details to be elaborated in future. You are free to show the sketches to the customer, to approve the concept and to make changes at initial stage.
3. Colors limitation
Try to use three colors maximum. The perfect way is to apply two (with shadows). Even in case the corporate style contains wide color range you’d better deliberately reduce the number of colors in icons.
4. Single style matters
You should adhere to a single color scheme, the same line thickness, angle smoothing, etc. This step is quite complicated. Two images that seem stylistically identical may differ significantly when it comes to details. If some people do not notice this difference it does not mean the work is well done. The devil is in the detail.
5. Scaling
It happens quite often that the size of mobile and desktop icons is different. In these cases you have to draw several icon versions of various complexity and with different detailization level. It is really important to think over how the icons will be scaled keeping a common style.
A rule is not a rule if there are no exceptions and for the icons either. E.g. bright and garish color scheme will be suitable in this particular project. Sometimes the customer would like it to be done in this particular form and not other way… but skillful interaction with a customer is a topic of another post.
For those who consider this approach to be unnecessary and can easily go with standard icons there are some services offering free icons for downloading:
https://www.flaticon.com
One of the largest collections where you can find almost everything that may cross your mind.
https://icons8.ru
More than 86 K of free icons in any format.
https://iconmonstr.com
Quite good collection of classic black-and-white icons.
https://pixeden.com
Set of icons of various sizes in .png. It is not comfortable for scaling. We would recommend to use svg.
http://graphicsfuel.com
Various sets of colored icons for any topic.
If you decide to create something interesting and of really good quality please follow our recommendations. Should you encounter any difficulties please feel free to contact us.
