How I do Icon Design With Sketch

I was thinking about the Honor 6 Design Competition I mentioned recently and thought it might be interesting if I made a quick video that shows how I would design the icons if I was entering the competition. So I made the video you can see below.

This video was recorded in about 45 minutes using the software Sketch – by Bohemian Coding.

Icon Design Process#

Normally the way I would design icons is to decide what I want to draw – often using The Noun Project for inspiration – and then draw something quite quickly. I will then move on to the next icon and do the same. Then – once I have a few icons made I will go back and tweak them all.

I find it a lot easier to be objective and critical once I have had some time to view them and think about them. I also find it easier to make them cohesive once I have made all of them.

I tend not to make pencil and paper sketches – but I will sometimes make 2 or three versions and then decide which one is best.

Icon Design Tips#

I don’t claim to be an expert at designing icons – far from it in fact – but I quite enjoy doing it and so here are a few things I like to do to create a cohesive icon set.

1. You’ll see in the video that I created a colour palette – this gives me something to work with and saves me from having to remember loads of colours. I do stray from the palette but this gives me a base to work from.
2. Try to keep line weights, border radiuses, and margins consistent. If lines are different thicknesses then it can look wrong.
3. For icons with a background – such as this set – I think it’s a good idea to have some guides so that the gap around the icon is always similar.
4. Collect inspiration. In the video I grabbed a screenshot of some of the Google Icons since I thought they might be helpful. I ended up not using them as much as I thought I might – but it’s still nice to know what you’re aiming for.

Useful Links from the Video#

In the video I visited a few websites – I’ve listed them below:

• Coolors: A nice website for creating colour schemes. Colours are definitely not one of my strengths so using Coolors I can quickly create a palette of consistent colours.
• The Noun Project: a great site for icon inspiration. When creating icons try thinking of words related to the theme and this site will give you loads of ideas.
• Unsplash: A great, free, stock photography site. I got the mountain background used in the final image from here. I’ve put together a collection of stock photography website on my WordPress Themes Site.
• Sketch: An awesome vector editing app, perfect for web and interface design. I can’t understand why people do web design in Photoshop.
• Acorn: This is the image editing app I use instead of Photoshop.

Honor 6 Design Competition#

Don’t forget if you want to enter the Honor 6 Design Competition – then there’s still a couple of months to go! 🙂