J'adore, 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
Consistency is beautiful.
Always. Be. Consistent.
2. Define an objective icon style
When icons reflect the style of your UI it all seems to work together.
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
We use Figma for, well, everything. Iconography is no exception. We used to use illustrator for icons, then bring them into Sketch, but Figma clocked the pain and upped its pen tool and guides. But whatever kit you use to create icons, use only that. Jumping between different tools is an easy way for inconsistencies to arise.
4. Use a grid
Grids make me happy.
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 because 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 that 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
Rules mean order, which means harmony
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
Simple. Consistent. Harmonious.
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
Consistency is beautiful.
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<
