Icon Set in Affinity Designer

Affinity Designer is a graphic design app for Mac created by Serif. It stands between Adobe Illustrator and Adobe Photoshop, with support of vector based tools and raster graphics. While it is a pretty new app and sometimes I miss some functions, it's still quite powerful and can handle day to day design work. Ability to export your work to PSD or SVG makes it easy to work in conjunction with Photoshop or other graphic design tools which is pretty neat.

So, today I want to show you how to create small icon set in Affinity Designer. Let's get started!

Sketches

Usually, I start with sketching the ideas for icons. It shouldn't be a perfect and precise representation of the final icon. The main goal is to communicate the idea to a client or your team. In most cases you don't need serious skills in hand-drawing to make simple sketches. If you can draw a line, circle, and rectangle — you're ready to go.

Here are sketches of icons we are about to draw

Let's begin with preparing a document in Affinity Designer.

Setting up a document

One of the nice features that Affinity Designer have is its advanced  Grid and Axis Manager. You can create all sorts of grids using it, but for now, we'll only need  64x64  grid of squares to align our icons.

Open Grid Manager by going to  View → Grid and Axis Manager...

By default it'll be in Basic mode

Hit on Advanced button, uncheck  Use automatic grid  and turn on  Uniform  grid. Now you can set Grid Spacing to  64px, Divisions to  4  and Gutter to  64px

Our new grid will look like this

Pretty neat! Now we can draw our icons inside of each of these squares.

But before we dig into this, let's turn snapping to pixel grid, this will ensure that all icons will look crisp without any blurry pixels. Find Snapping Options on your toolbar and turn on  Force pixel alignment  and  Move by whole pixels

It is also important to keep an eye on pixel preview of your icons. Affinity has a nifty feature called Split View, which can be accessed through  View → View Mode → Split view  or just  ","  hotkey

Now you can drag a split to see how your shapes will look in pixels

Always check back to pixel preview to make sure that all your pixels are aligned properly.

Okay, it's time to draw some shapes.

Drawing icons

To focus solely on shapes, I draw monochromatic versions of the icons first. I tend to add colors when all icons are ready. As main color I will use  #FCC6A0  and background  #1F2129 , but you can use any colors you find comfortable to work with.

Chat Icon

While Affinity Designer has a special tool to draw chat bubbles called Callout Rounded Rectangle Tool, we'll draw it by hand using  Rectangle Tool [M]  and  Triangle Tool

If you want to make your shapes editable, you have to convert them to curves first. I use hotkey cmd+Enter  for this, but there's also a special button on the toolbar

Here's how you can draw a chat bubble

Next, we'll apply some rounded corners using  Corner Tool [C]  and our first bubble is ready

To "cut-out" one bubble from another I use outer stroke with the same color as the background

If I need to change width of gutter or appearance of some shapes, it'll be easier to do with a stroke, than with real cutted-out shapes

After we finish with the icons, I will expand this stroke and cut it out from the main shapes.

Let's save stroke settings as a style in  View → Studio → Styles  for further use

Now let's move on to the next icon!

Folder Icon

Start with two rectangles

Using  Node Tool [A]  we can easily create top part of the folder

Now, we can round outer corners using  Corner Tool [C]

And to finish the icon let's add a circle in the middle of the folder

Study Icon

Top part of the hat can be made of tilted rectangle with some corner radius applied

Bottom part of the hat is created using simple rectangle and ellipse

Finally, add brush-tail and our hat is ready. I also scaled entire icon a bit to match it with other icons

Food Icon

Let's start with a cup. It can be simplified to just three rectangles

Taper bottom rectangle and round some corners

To finish our cup, we'll add drinking straw, which is just tilted rounded rectangle

Now let's get to the hamburger part. It can be built from a circle and two rectangles

Round some corners and shrink circle a bit and here's our hamburger

Now let's put them all together to finish the icon

Travel Icon

Let's start with a plane. There are lots of ways of drawing it, but for the sake of presentation, I'll show you how to do it using Stroke Profile feature.

Stroke Profile gives you ability to dynamically setup width of your stroke. You can make pretty fun results with it

We'll use it to create main body shape of the plane. Start with drawing a straight line using  Pen Tool [P]

And edit its stroke profile to form a plane body

Wings and tail can be made out of basic rectangles

Rotate whole thing by 45° and our plane is ready

Let's make a globe! Start with a circle

Then duplicate it and shrink virtically

Finally, combine globe with a plane to finish the icon

Lamp Icon

Lamp is a bit complex to draw, but bear with me. We will start with a basics — rectangles

Combine all shapes using Layer → Geometry → Add or just hit Union button on toolbar

Time to get creative! Form a shape that look like thick glass of wine

Final shape should look something like this

Now let's round some corners

Add some details subtracting rectangles from the main shape

And miror whole shape to form a body of the lamp

Top part of the lamp is just trapeze drawn using  Trapezoid Tool  with rounded corners

Add brush-tail from our hat icon to create a lamp switch and our icon is ready

Adding Colors

Usually, I start with a palette. I try to select as many various colors as I can. I might not use all of them at the end, and some of them could be changed in the process but having something to start with is always a good idea. Here's palette I've made for the icons

To make our life easier we'll use Affinity's Global Colors feature; it will help us manage our colors if we decide to alter them.

First let's create Document Palette in Swatches panel, which can be found under View → Studio → Swatches

Now let's add our colors as Global Color swatches, you can do this by clicking on palette icon, like this

Notice that our colors now have a little triangle at the bottom left corner. It means that this color is a global one. If we apply it to different shapes and then we decide to alter it, this will affect all layers with this color. Pretty useful feature.

Now just select each shape of our icons and apply corresponding global color

If you ever want to change colors in the whole set, you can just alter its Global Color swatch

Preparing Assets

I think, it's a good time to get rid of all stroke-placeholders that we've made. You can expand stroke to fill using Layer → Expand Stroke menu.

Now you can use boolean operations (Subtract) to cut everything out. It's pretty mechanical work, but it takes some patience. Usually, I make background color to something bright to see what I need to cut out better

I also like to keep my layers clean and organized, so I grouped each icon to its own folder

Let's move to slicing part.

Affinity Designer has special mode for dealing with assets, called  Export Persona,  you can switch to it, by clicking on the third button on the top left corner

Your toolbar should switch to a new look

Now create slice for each group in Layers panel

Now we need to resize each slice to 64x64, grid and Transform panel (View → Studio → Transform) will help you make it more precise

The more slices you resize, the easier it will be to align the rest of them

Now we can select our slices in Slices Panel and configure export options

I used pretty much default settings for SVG output with unchecked  Set view Box  property.

Okay, let's export some icons! First of all, you'll have to turn off your background layer, since we need transparent background for all of our icons.

Now you can click on  Export Selected  button to save our icons as SVG.

Turn  Continuous  checkbox on and Affinity will auto update all assets each time you modify your icons.

And icons are ready to use on the web

Conclusion

Affinity itself isn't hard to grasp, but in case you want to learn some basics, Serif's website has a comprehensive section with video tutorials.

There's also active community over the forum, where you can ask questions and request new features directly from the developers. They also have features roadmap, so you can see what's coming next to Affinity Designer.

There you have it! Hope you enjoyed this overview of icon design workflow in Affinity Designer.