Icon design for dummies: how to add new icons to an already perfect icon library
Finding a good process for icon design
My background is from graphic design, and I felt pretty rookie at pixel perfection and UI design when I joined the Fortum Design Team a couple of years ago.
It’s weird to look back on how I looked at Fortum’s Design System at the time. Particularly the icon set was this holy, consistent, well designed and pixel perfect piece of art.
To my surprise it turned out that our perfect icon library didn’t cover all possible needs. And to my horror it turned out that we were to design some new icons in-house, in the Design Team, by a visual designer. Can you guess whom this impossible task fell to?
I was relieved to discover that we had some magic tools and guidelines for designing icons. Phew! A place to start. OK, roller-coaster of feelings aside, and try to focus on the task and learn as I go. Where to start?
Maybe there’s hope after all
Even I could see we had two types of icons at Fortum. Those we call marketing icons are quite detailed and illustrative and may be used to bring clarity and increase usability in a service. Combined with text they enhance each other.
Then we have the system icons. These are simpler and bolder than the marketing icons, and therefore more suitable for symbolizing commands and actions in a user interface.
The system icon style is designed by Mika, Fortum’s talented Lead Visual Designer (and my mentor), who also was the one who gave me the task to design these new icons for the system icon set. The pressure was on!
The guidelines were pretty specific and explained stuff like how thick the strokes should be, what the radius for corners should be etc. I even got a customized icon grid template for both types of icons. Oh, how I appreciate some good design guidelines!
So, I had the guidelines, I had grid template files to follow, and I had a bunch of other icons I could look at for inspiration. This was starting to feel like something I could master after all.
Until I learned what kind of icon I was starting with. If only it had been a hamburger menu, or a chevron, or even a check mark! But no.
My first task was “Show password” and “Hide password”. Normally an eye. Barely no straight lines at all! At least it was a system icon, so less amount of pixels to screw up on.
Finding a good process for icon design
Step 1: Research
I started with some research on what others did to symbolize “Show password” and “Hide password”. www.thenounproject.com and www.dribbble.com turned out to be good sites for inspiration.
Step 2: Warm up
Then I did some sketches by hand; this often helps me “warm up” the right side of my brain, and if I’m lucky some concrete ideas will come out of it too.
Step 3: Consistency
It was very important to me that my icons worked well with other icons in our sacred library. I downloaded a selection for inspiration; some similar in style and shape to what I was making, some in the same category, and some I just really liked.
Step 4: Sketching technique
I sketched the hell out of Adobe Illustrator and tried copying parts of existing icons to see if I could reuse them. No need to reinvent the wheel if you can avoid it, right? I made sure to regularly check that I was on the right path as I went:
- Checked that my sketches were in line with the other icons
- Made sure the sketches followed the grid
- Checked that the icons worked in actual size
- Normally I would also make sure that the icons are pixel perfect, but seeing as these particular icons had no straight lines, it was enough to follow the icon grid in this case
Step 5: Selecting sketches
After 58 versions (!) I finally had some sketches I was pretty happy with. I gathered the ones I considered the best ones in one file, placed my absolute favorites in a screenshot of the service we were using the icons for, and sent it to my mentor for feedback.
Step 6: Feedback and adjustments
My mentor liked them! Mika had some suggestions for minor adjustments, and the end result was a nice addition to the icon library. Hurray!
Don’t change a winning recipe
This probably sounds like a lot of work. And I did spend a ridiculous amount of time creating these two icons with what some might say have the simplest expression in the world.
But I had managed to create something that would look like it might belong to the other icons in the same service, and I had found a way to do it that worked for me.
I followed my killer recipe the next time I was asked to do an icon, and it turned out it worked on the more detailed Marketing icons as well. Before I knew it, I had designed a complete weather set that I’m still pretty happy with.
Now that I’m more confident and familiar with the process and our icon style, I create icons in a fraction of the time I spent doing my first two.
Although I still feel that our icon set is kind of holy, now I can easily spot that we do have a few black sheep in the library too, and I even have the guts to edit them.
Low-key user testing
A good additional tip if in doubt is to check whether the icon actually looks like what you’re going for. Do a low-key user test; just send it to a few people and ask; “what’s this supposed to look like?”.
I find this very useful. Often, you’ll get some valuable feedback, and every once in a while, you can even avoid blunders such as publishing a temperature icon that looks like a penis with hair.
Besides, the people you ask are really happy to help, and you make them feel kinda special. And all your friends will think you have the coolest job in the world; they are left with the impression that what you do all day is draw icons (I wish!).
I guess the moral of my story is that if you’re so passionate about design that you feel you board a roller-coaster when you’re asked to do something that is a little bit out of your comfort zone; pull yourself together.
Try to break up the task into sub tasks, like research, collecting inspiration, sketching, getting some feedback and doing finishing touches.
You’re a designer. You’ll find a way!
Visual Designer at Fortum. Passionate about graphic design, UI, branding and visual communication.