Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Affinity Designer
Design

How to Create a Set of Browser Icons in Affinity Designer

by
Difficulty:BeginnerLength:MediumLanguages:
Final product image
What You'll Be Creating

Welcome back to another Affinity Designer tutorial, in which we’re going to learn how to quickly create a set of glyph icons using some basic geometric shapes which we will adjust here and there.

That being said, grab a fresh cup of that magic bean juice and let’s get started!

Oh, and don't forget you can always expand your library by heading over to GraphicRiver where you'll find a great collection of hand-picked icons.

1. How to Set Up a New Project File

Assuming you already have Affinity Designer running in the background, bring it up and let’s create a New Document by going to File > New (or by using the Control-N keyboard shortcut) and adjusting it as follows:

  • Type: Web
  • Document Units: Pixels
  • Create artboard: checked
  • Page Width: 64 px
  • Page Height: 64 px
  • DPI: 72
setting up a new document

2. How to Set Up the Artboards

Once we’ve created the document, we need to take a couple of moments and structure our project using a couple of Artboards, one for each icon, in order to maintain a steady workflow.

Step 1

To do this, select the default Artboard from within the Layers panel, and create three copies by either right clicking > Duplicate (or by using the Control-J keyboard shortcut three times), which we will then rename as follows:

  • first artboard: back button
  • second artboard: front button
  • third artboard: home button
  • fourth artboard: settings button
setting up the artboards

Step 2

Position the Artboards next to one another, by first selecting all four of them from within the Layers panel (making sure to start with the bottom one) and then opening up the Arrange panel and using the Align Horizontally > Space Horizontally option, making sure to uncheck Auto Distribute and enter a custom value of 28 px.

distancing the artboards

Step 3

With the Artboards in place, quickly lock each and every one of them so that you won’t move them around by accident, moving on to the next step once you’re done.

locking up the artboards

3. How to Create the Reference Grids

The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 64 x 64 px, which is on the smaller side of the scale. 

Step 1

Position yourself onto the first Artboard, and using the Rectangle Tool (M) create a 64 x 64 px square, which we will color using #FF6100 and then center align as seen in the reference image.

creating the main shape for the reference grid

Step 2

Add a smaller 56 x 56 px square, which we will color using #FFFFFF and then position in the center of the larger one since it will act as our active drawing area, giving us an all-around 4 px padding to work with.

creating the main shape for the active drawing area

Step 3

Select and group the two squares together using the Control-G keyboard shortcut, making sure to name them using the “reference grid” label, and then use to populate the remaining Artboards using three copies (Control-C > Control-V). Take your time, and once you’re done, move on to the next step.

adding the reference grids to the remaining artboards

4. How to Create the Back Button

As soon as we’ve finished setting up the reference grids, we can position ourselves on the first Artboard, where we will start working on the back navigation button.

Step 1

Create the main shape for the background using a 56 x 56 px ellipse which we will color using #FFD44D and then center align to the underlying Artboard.

creating the background for the back button

Step 2

Start working on the arrow, by adding the main shape for its head using a 24 x 16 px triangle which we will color using white (#FFFFFF) and then center align to the larger underlying circle.

creating the arrow head for the back button

Step 3

Adjust the shape that we’ve just created by rotating it to the left by right clicking > Transform > Rotate Left, and then positioning it 14 px from the active drawing area’s left edge.

adjusting the shape of the arrow head for the back button

Step 4

Give the resulting shape an outline using the Stroke method by creating a copy of it (Control-C) which we will paste in front (Control-V) and then adjust by setting its Width to 4 pt and its Join to Round. Once you’re done, select and group the two shapes together using the Control-G keyboard shortcut.

adding the outline to the arrow head of the back button

Step 5

Add the main shape for the arrow’s tail using a 12 x 4 px rectangle (#FFFFFF), which we will center align to the head’s right edge as seen in the reference image.

adding the rear end to the arrow of the back button

Step 6

Adjust the Radius of the rectangle’s right corners, by first unchecking the Single Radius option, and then setting both its top right (TR) and bottom right (BR) corners to round, giving them an absolute value of 2 px.

adjusting the rear end of the arrow for the back button

Step 7

Finish off the icon, by giving the resulting shape an outline, making sure to select and group the two together using the Control-G keyboard shortcut.

finishing off the back button icon

Step 8

As soon as you’ve finished working on the icon, take a couple of moments and group (Control-G) its different sections, naming them so that you’ll have a clear idea of their contents. Take your time, and once you’re done, move on to the next one.

grouping the shapes of the back button icon

5. How to Create the Forward Button

Our next item is the forward button, which we will quickly create using an adjusted version of the icon that we’ve just finished working on.

Step 1

Start by creating a copy (Control-C) of the icon that we’ve just grouped, which we will paste in place (Control-V) on the second Artboard.

creating and positioning the main shapes for the forward button

Step 2

Quickly adjust the icon by horizontally reflecting it (right click and Transform > Flip Horizontal). Once you’re done, move on to the next step, where we will focus on the next icon.

finishing off the front button icon

6. How to Create the Home Button

Assuming you’ve already positioned yourself on the third Artboard, let’s start building the little home button.

Step 1

As we did with the first icon, start by creating the background using a 56 x 56 px ellipse, which we will color using #FFD44D and then center align to the underlying Artboard.

creating the background for the home button

Step 2

Add the main shape for the house’s lower body using a 20 x 12 px rectangle which we will color using white (#FFFFFF) and then center align to the underlying Artboard, positioning it at a distance of 16 px from the active drawing area’s bottom edge.

creating and positioning the main shape for the lower section of the house

Step 3

Create the little door cutout using a 12 x 8 px rectangle (highlighted with red), which we will center align to the previous shape’s bottom edge and then remove using the Subtract function.

adding the door cutout to the lower section of the house

Step 4

Give the resulting shape a 4 px thick outline (#FFFFFF), making sure to select and group the two together using the Control-G keyboard shortcut.

adding the outline to the lower section of the house

Step 5

Create the roof using a 28 x 12 px triangle (#FFFFFF) with a 4 px thick outline (#FFFFFF), which we will group (Control-G) and then position on top of the house’s lower body.

adding the roof to the house

Step 6

Finish off the icon by adding the chimney using a 2 x 8 px rectangle (#FFFFFF) with a 4 px thick outline (#FFFFFF), which we will group (Control-G) and then position onto the lower section's top-right corner as seen in the reference image. Once you’re done, make sure you select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.

finishing off the home button icon

7. How to Create the Settings Button

We are now down to our fourth and last icon, so make sure you position yourself on the remaining Artboard, and let’s jump straight into it.

Step 1

Create the background using a 56 x 56 px circle, which we will color using #FFD44D and then center align to the underlying Artboard as seen in the reference image.

creating the background for the settings button

Step 2

Add the button’s main body using a 28 x 24 px rounded rectangle (#FFFFFF) with an 8 px corner radius, which we will center align to the larger circle.

creating the main body for the settings button

Step 3

Give the resulting shape a 4 px thick outline (#FFFFFF) using the Stroke method, but don’t group them just yet.

adding the outline to the main body of the settings button

Step 4

Finish off the icon by creating two 16 x 4 px rounded rectangles with a 2 px corner radius, which we will vertically stack 4 px from one another, and cut them out from the center of the button’s main body using the Subtract function. Once you’re done, select and group (Control-G) all of the main body’s composing shapes together, doing the same for the entire icon afterwards.

finishing off the settings button icon

8. How to Adjust the Color Palette Using Global Colors

At this point we’ve finished working on the icons, but let’s say we aren’t all that happy with the color used for the background.

Unfortunately, Affinity Designer doesn’t have a dedicated tool that enables you to select multiple objects based on the same fill/stroke color, but it does come with Global Colors.

By definition, a global color is a value that can be applied to any shape and then used later to easily change the colors for all of them at a global level, without having to individually select them.

Normally, you would start a project by defining the global colors, and then apply them to your shapes as you go on, but that doesn’t mean you can’t do it after the project is finished, as we’ll see in the following moments.

Step 1

Start by selecting the first icon’s background shape, and then simply right click > Add to Swatches > From Fill as Global Color.

creating the global color icon

Step 2

Our newly created global color should now be visible within the Swatches panel, which means we can select all of our icons’ background shapes and apply the color to them by simply selecting it from within the panel.

applying the global color to the backgrounds

Step 3

Once our global color has been applied to the desired shapes, we can easily use it to change their color by simply double clicking on it within the Swatches panel and then choosing a new value.

adjusting the backgrounds using global colors

Great Job!

As always, I hope you had fun working on the project and most importantly learned something new and useful along the way.

If you have any questions, feel free to post them within the comments section and I’ll do my best to get back to you as soon as I can!

finished project preview

New to Affinity Designer?

If this is your first time using Affinity, you should definitely check out the following tutorials, which should get you up to speed in no time!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.