8 Tips for Creating a Consistent Bespoke UI Icon Set
Creating a harmonious icon family shouldn’t be difficult. Plus free icons.
I dream of a perfect utopia where everyone has the freedom to create their own unique icons for every project, but unfortunately we find ourselves in a dystopian world where time is indispensable. In this world it is sometimes necessary to use an icon set which has kindly been pre-made by a designer lucky enough to have some spare time. Unfortunately this designer cannot foresee every unique project and so undoubtedly there will come a point where, sadly, we must break from this beautiful icon set, and thus interface designers everywhere are picking and choosing icons from a mishmash of icon sets, ui kits and templates. What we have as a result is a an app store close to bursting of products which resemble a well known character from a Mary Shelley novel, and quite frank(enstein)ly it makes me sick.
I love it when a designer delves into bespoke icon design, even if they aren’t quite perfect, the act of creating their own content is much more meaningful and it won’t take too much work to make those beautiful little representational symbols exactly that. My aim here is to help my fellow designers ensure their tailored icons are the best they can be so we can all live in a beautiful world free of incongruity, or icongruity if you don’t mind. I will provide a handful of tips and insights while demonstrating how I have applied these to an icon set I designed recently for an app UI.
1. Consistency is fundamental
Always. Be. Consistent.
2. Define an objective icon style
Before embarking on your quest for incredible icons you will hopefully have some basic styles in place for your UI, maybe you will have everything in place and you are leaving your icons until the end, maybe you only have a typeface chosen or maybe a single solitary CTA style to begin with, maybe you’re a wee bit crazy and like to begin a project icon first.
Whichever type of designer you are, begin by examining your UI elements and find a reusable pattern for direction e.g. lots of circles and large corner radii or in this case, sharp corners and 45 degree angles. In the case of having no UI elements to start with then use the brand feel to guide you e.g. if it’s an informal brand then start with nice curves, thick strokes and round caps.
3. Stick to one program
I use Sketch for UI and Illustrator for icons and graphics. Sketch is great but it’s not a vector graphics editing super-specialist like Illustrator. I find Illustrator’s pen tool far superior and much more intuitive with which suits my workflow. But if you use Sketch to draw your icons then stick with Sketch and only Sketch; this will help all your icons work harmoniously.
4. Use a grid
I’m fascinated by designers who can design without a grid but it makes me nervous, like how do they know everything is pixel-perfect? I personally use one for everything I create becuase order makes me feel at ease. And it’s no different when it comes to icons, as a guideline try to set up a grid which reflects the layout principle you’re using. For example if you are using an 8-point grid layout for your UI then consider a multiple of 8 for your grid i.e. 16x16 or 32x32. Feel free to break that guideline as long as you use the same grid for the whole set. For this project the UI follows an 8-point grid but I used a 20x20 grid for the icons.
5. Sweat the small stuff
The fine details are the key to a consistent visual weight. If you use rounded corners in your set then use the same radius for every corner in every icon. If you use a filled icon active state then ensure this is consistent throughout your set.
6. Make strict rules
To help with consistency, set yourself some rules to follow and your icons will naturally harmonise. The simplest rule you can begin with is line or solid fill icons. Then break it down further - so if you are using line icons then stick to 1px or 2px stroke weight, or 3px if you are a maniac. You can leave it there if you want or you can go even more granular. For this set I decided to go masochistic with my constraints;
- 20x20 grid
- only strokes no fill
- 2px strokes
- 2px minimum negative space
- only horizontal, vertical or 45 degree diagonal strokes
- NO CURVES
7. Use iconographic principles
This one is a no-brainer, use icons that make sense, are unambiguous and above all representational. Just as you wouldn’t expect to find a toilet behind a banana sign you wouldn’t expect to find a primary navigation menu hiding behind an image of a burger. Think about what you are trying to communicate with an icon. I won’t go into every detail of iconography here but if you want to know more my good pal Luke Medlock wrote a great post about principles of iconography called Your icons are sh*t.
8. Consistency is fundamental
Always. Be. Consistent (I know I’m repeating myself here but I’m making a point!)
I hope you enjoy your adventure into bespoke icons, I know I do! But if you still think you don’t have time to make a custom set then at the very least please do the world a favour by sticking to one consistent set, in fact you can use mine if it fits your UI style. You can download all 108 of them for free >here<
