Line Icon Design. What I’ve Learnt so far.
A little story about my experience designing various line icons in Illustrator.
What I’ve learnt so far
I started designing icons about 18 months ago now. I’m not going to bore you with rules and regulations, just share with you my important snippets of what I have learned and my journey along the way.
Early Stages
When I began designing line icons, I looked at others for inspiration; Justas Galaburda, Matt Yow, Rocky Roark, Adam Whitcroft and Ryan Putnam to name a few. Their work is pretty impressive.
I was working for a gas boiler company at the time as a Graphic Designer/Illustrator/Whatever they needed me to do design wise. I was designing a promotional brochure to go out to potential customers. On one of the pages I came up with the idea of displaying key points with Illustrated Icons. Here is ‘EVLB Icons’; my first proper attempt at some line icons:
Realisation
I started to realise like many other designers will; less is more. I realised that despite, the nice detail, I felt there was almost too much detail, the lines were ‘too busy’. Yes the icons turned out okay in print, but I still thought they could have been a lot better, a lot more consistent and usable across various surfaces rather than just one.
“Less is More”
My 2nd major attempt came whilst working at Roy & Co (my current employer). I was asked to create some unique, bold brand icons for an up and coming ReMortgaging company based in South Yorkshire. I took into account my previous attempt, and kept thinking “less is more, clean and crisp is the way forward”. Here is my initial outcome…
The overall outcome for the line icons was very aesthetically pleasing as well as fun to create and apply. They had their own unique style, a style I believe had rarely been done before; a continuous line icon. This was something I referred back to in future projects.
A Musical Icon Set
I was asked by a large UK Ticket selling company to create a few icons for different sectors of an upcoming website design overhaul in the pipelines. At first it was an initial 8, but what do you know, things got a little crazy and I ended up making a full set of icons for the client’s project.
However, this was a tricky one, these icons needed to work at a smaller scale as well as a bigger scale. They needed to be clean, crisp and modern yet still stand out on a smaller scale as much as they would on a larger scale. I created myself a little, simple test….The 30px test.
The 30px test
The 30px test is quite simple; Do they work inside a border of 30px x 30px. I found this an effective way to make sure they worked on a smaller scale. I would design the icon for each sector (festival, tickets, DJs etc.) then outline the icon and drop it into a 30px x 30px box. This helped me a of a lot, some icons worked and some didn’t, a lesson many designers will learn or already know.
Exploring and Creating Brand Icons
Brand icons are self explanatory, icons created for the brand in topic. I was asked by Roy at Roy & Co to create 4 x Brand Icons for Roy & Co. These icons would be used mainly on the new website at a medium to large scale and on promotional material. I had to hit these on the head.
I’d took what I’d learnt so far and wanted to implement it into the Roy & Co icons project. What I’d learnt so far was: Less is more, be more consistent, stick to 1 or 2 weight strokes and create clean, crisp and modern icons. This was a plan of action...or so I thought…
It’s good to break your own rules
I decided that the icons I was creating were just not powerful enough, they needed more detail, but not too much that they looked overbearing and complicated. They needed to make the identity of Roy & Co stand out even more but at the same time not punch you in the face with awkwardness. I decided I had to break one of my rules…I had to add more detail. So, after much thought, deliberation and design, here was the final outcome…
One thing to remember…
Rasterisation is BAD when placing an icon into a Photoshop document. So make sure you save it as an SVG from Illustrator or at the very least make sure it is a Vector Smart Object in Photoshop, this will help keep the quality of the icon looking nice and crisp online.
My Outcome……so far
I’ve learnt a lot over the past 18 months about icon design. I’ve learnt to keep a line icon clean and crisp and don’t over think things too much. I’ve learnt to go with the flow and see where it takes you and that hard work really does pay off….
There aren’t any such ‘rules’, just go with your own unique twist, learn along the way and most of all always improve your skills as a Graphic Design or Illustrator.
Minimalistic Line Icon set - 2015 Update
In March of this year (2015) I decided to create a icon set purposely for use on a smaller scale. Minimalistic icons that would work on a small scale and would be very user friendly and easy to understand.
http://sliceui.com/minimalistic-icons/
Tech Icons Exploration — June ’15 Update
In June of this year (2015) I was handed the task of designing a website for a Server company based in Australia, this of course came with the challenge of designing some fresh new icons. I explored different weights and gradients…
Thanks for reading my story, you can always follow me on Twitter
Or check out my work on Dribbble
