Icon design for dummies: how to add new icons to an already perfect icon library
By: Marlén Holden
Tags: Inhouse Design, Visual Design, Icons, UI, Design Systems

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.

Some examples of Fortum’s marketing icons

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.

Some examples of Fortum’s system icons

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.

Where to start?

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.

A selection of sketches I was quite happy with.

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!