Create a consistent set of icons in Sketch

[Rss Bot 1]

Nowadays, your typical web or desktop app looks sleek and tidy. And that's what the average user expects it to be, too. Think about Things by Cultured Code, Dropbox or Fantastical by Flexibits. What do they all have in common? A nice UI and a consistent and appealing icon set. A good icon set may often be taken for granted, but a bad one is immediately noticeable.

Creating an icon set may seem like an easy task, but it poses quite a few challenges. Many designers find it easier to design a unique icon rather than creating an icon set. That's because a set of items presents a different type of rules. All icons need to work together as a team: you need to consider the weight, the strokes and the shapes in order to achieve a consistent result. This process may take a few iterations to get to your desired result, but it's rewarding and interesting.

• 31 stunning iOS app icon designs

Although you can choose whichever vector programme you like, Sketch is a great option. It is primarily designed to be a graphic application for web and mobile designers, UX designers and icon designers, and is becoming a solid alternative to the most common screen design software. The application looks and feels great, is well designed, and easy to learn if you are used to other design tools like Illustrator, Fireworks or Flash.

01. Set up artboard and drawing area

 

Launch Sketch and create an artboard (A). Draw an area with your mouse or Wacom pen on the canvas – you can tweak the dimensions afterwards in the inspector panel on the right-hand side. You can also change the position and the background colour and select the features you prefer.

In Sketch, you can work with multiple artboards. This is extremely handy for projects that have different views (for example a UI view and an icon view).

02. Insert a rectangle

 

This icon set is designed to fit a webmail UI, and we will be designing a set of six consistent icons. There will be the plus icon (indicating 'more'), a bin icon (delete), a bell icon (notification), a mail icon (refresh and get emails), a pen icon (write a message) and a back arrow icon (previous email).

Let's start with the plus icon. Insert a rectangle (R) and draw a rectangle of 100 x 20px, then modify the radius to 40 so you have rounded corners.

03. Use the Inspector panel

 

Now you can copy and paste the same rectangle with rounded corners, and change its rotation to a 90 degree angle. You can do that through the Inspector panel, under Transform. The icons we are creating are all vector-based, so we can adjust the size later by increasing or decreasing their dimensions.

If you are used to working with rulers, adding them in Sketch is simple (View > Canvas > Show Rulers). You can click anywhere on the ruler to add manual guides, and they'll stay visible as long as the rulers are visible.

04. Group the icon in a folder

 

Let's group the first plus icon in a folder – this is how Sketch will display items when you hit Cmd+G. In the Layer panel, you will see a folder with two separate items (rectangles) that are still individually editable. This is handy if you want to tweak the shapes afterwards – for instance, to remove round corners or modify the radius.

05. Start bin icon

 

Let's move on to a more complex icon: the bin. The primary shapes are similar to the plus icon, which is the reason why we started with the plus. Draw a Rectangle (R), roughly 15 x 84px. Copy and paste the same shape and start building the body of the bin. We will have to set the radius to 40 here as well, to keep the set of icons consistent.

06. Build up bin

 

Keep going and use the same shape again for the body of the bin icon, simply by rotating it by 90 degrees. For the handle at the top, keep the same radius, and the angles will come out smooth and tidy. The rectangle at the top of the bin is 65 x 15px – basically 40px shorter in width than the base of the bin, which is 105px.

07. Add final details

 

The bin icon is slightly more detailed than the others. If you want a more simplistic approach, you can leave the surface blank, but instead let's give it a final touch here by drawing 'dents' in the middle, to mimic the surface of a real bin. Part of this icon, as well as the plus icon, can be reused later on in the tutorial.

08. Begin bell icon

 

The second icon of our set is ready; let's move on to the bell icon, which is more complex again. We want the icon to fit into the same surface area on the screen. To ensure this will work, we can draw circles on top of each icon that will function as guides. We can position the circles a distance of 70px from each other. This way when we finish the set, we'll have a nice row of horizontally aligned icons, each of which occupies the same space on the screen.

Next page: Create more icons to add to your webmail icon set

09. How to see Union

 

If you are used to Illustrator, this step is going to be fun: draw a simple circle (O) 89 x 89px. Then, go to Borders in the Inspector Panel and select 'Inside Position' with 15 thickness. This value is important – when we were drawing the rectangles for the bin, the shapes were 15px wide. This value needs to be the same in the bell, so the outlines will look consistent. Zoom in and draw a rectangle on top of the circle, then choose Union from the top menu.

10. Make icon bell-shaped

 

You will now have a horseshoe shape that needs to be tweaked and transformed into a bell. In Sketch, select a shape and then press Edit in the toolbar at the top so the anchor points of the shape become visible. You will see a round point in each of the corners. By clicking any of these points and dragging them around, you can change their position. You can drag the anchor points and change the height of the bell too. Pretty handy!

11. Add a notification sign

 

Use the same shape that formed the bottom of the bin lid (about 105px in width) to design the bottom of the bell.

The next step is to draw a full circle, cut it in half and centre it. This will represent the clapper inside the bell – it's just a tiny detail, but useful in making the icon recognisable. You can also add a notification sign at the top by using a full circle filled with red. The notification icon will alert the user to a new message or any other related activity.

12. Draw mail icon

 

The mail icon is an interesting one. Although it may seem more complex than the others, it is actually one of the easiest. Draw a rectangle (R) sized 110 x 110px. The corner radius will be only 20px in this case – we don't want the rectangle to look too rounded. Copy and paste the shape, and rotate the new one 45 degrees anti-clockwise. Copy and paste the first rectangle again and then intersect the rotated one to give the envelope flap.

13. Combine shapes

 

So far, we have been keeping the shapes separate in the layer list for each of our icons. In Sketch, when you combine two shapes, you can still tweak each shape separately until you press the Flatten button in the Toolbar.

When you flatten a shape, Sketch will combine the multiple paths inside the shape into one path. Some people prefer to use flattened shapes, but there is no real need for that here.

14. Make pen icon

 

Let's focus on the last two icons. The pen will look like a rounded pen on a sheet of paper. For this, let's use a rectangle of 30px width and rotate it 45 degrees. To make the top slightly rounded, let's draw another rectangle on top of it, 24 x 24px. We'll put the radius at 5, to make the shape nice and smooth. We can use the same shape we used for the bottom of the bin lid to create a sheet supporting the pen.

15. Create 'previous' icon

 

The last arrow icon can be easily made using the plus icon as a starting point. Use the same thickness as the plus icon to create an arrow pointing towards the left to signify 'previous'. To do that, take exactly the plus icon and rotate it by 45 degrees. Then adjust the width of the sides of the arrow, tweaking each rectangle individually.

16. Flip arrow to make 'next' icon

 

The 'previous' icon could easily be flipped horizontally to also create a potential 'next' icon. The roundness of the arrow is exactly the same as the plus icon. Now you just need to make sure these new icons fit in the guideline circles, like the rest of the set.

You now have a full set of six consistent icons to be used in a user interface for a webmail service, but you also have a solid foundation for building other icons that can fit in the same set.

You can now extend this icon set or create the same one in different sizes for different purposes. In Sketch, you are dealing with vector shapes so it's easy to adjust the size of each icon. 

This article was originally published in net magazine. Subscribe here.

Related articles:

• 15 top Sketch plugins
• Free graphic design software 
• Download the best free fonts

View the full article