Line Icon Design. What I’ve Learnt so far.

Matt Cooper
Nov 19, 2014 · 6 min read

A little story about my experience designing various line icons in Illustrator.

September 2017 Update — NEW Icon Set release

Get them here

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:

Everlasting Boilers (EVLB) Brand Icons used for brochure material.

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…

One Continuous Line. Stroke weight: 6px.
Line Icons applied on the Website design.

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.

The 30px Icon Test
The Musical Icon Set

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…

Roy & Co full Brand Icons
Roy & Co Brand Icon Detail and Appliance

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….

Free Continuous Line Icon Pack. Featured on Design Razzi.

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/

My first big Icon Set: Minimalistic Everyday 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…

Further examples of my line icon work

Thanks for reading my story, you can always follow me on Twitter

Or check out my work on Dribbble

Freelance Design, UI/UX & Identity Design

I’m Matt Cooper, an experienced website and Ui designer who…

Matt Cooper

Written by

Father, Freelance Website, Ui/UX & Identity Designer and Writer

Freelance Design, UI/UX & Identity Design

I’m Matt Cooper, an experienced website and Ui designer who also specialises in Branding/Identity creation. I write about my experiences as a Freelance Creative.

Matt Cooper

Written by

Father, Freelance Website, Ui/UX & Identity Designer and Writer

Freelance Design, UI/UX & Identity Design

I’m Matt Cooper, an experienced website and Ui designer who also specialises in Branding/Identity creation. I write about my experiences as a Freelance Creative.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store