How to create an App Icon in Affinity Designer

Create & Add your custom App Icon to your App

5 min readJan 26, 2023

One of the most important parts of every app is the design. Often users decide simply from screenshots if they want to download an app or not. But the first impression when searching for apps doesn’t start with screenshots of the app but with the app icon.

Example screenshot from the App Store showing multiple apps, their icons and names — Example screenshot from the Apple App Store

Creating a simple App Icon can be done in less than 5 minutes with tools like Affinity Designer or Inkscape. Affinity Designer is a tool developed by serif and you do need to pay for it, but you only need to pay once. Alternatively, you can try Affinity first with their 30 days trial version or use the free Inkscape. Inkscape has a slightly differnet user interface but generally the same tools to create an app icon.

Create a New Document

Open Affinity Designer and create a new document (⌘ + N). In the new document dialog set the width and height both to 1024px. Apple Icons need to be 1024px, while icons for Android should be 512px. After creating the icon we can just scale it down by half the size to get the correct size for Android.

Creating a new document Dialog in Affinity Designer — Creating a New Document.

Additionally check the Colour tab and make sure to set the background to transparent.

Changing the background colour of the new document to transparent in the colour tab — Changing the background colour to transparent

Create a background

In Apple the app icon corners are generally rounded, which is also the case in most of the android apps. To make things easy we will ignore that fact as both platforms will automatically round the corners off.

Select the Rectangle Tool (M) from the right toolbar and drag it across the full image. This will fill the image with a light gray color.

Using the rectangle tool to create a background

A lot of app icons make use of a slight linear gradient in their background colour. To do this, click on the color box beside Fill and then choose the Gradient tab.

In the gradient tab you will see a rectangular area with two dots on each side. These dots define the start and end colour of our gradient.

Changing the background colour to a gradient

Select one of the colours, then click on the white box below with the label Colour to change the colour of that part of the gradient. Repeat the same for the second colour dot and choose a similar colour..

Next we can use the Fill Tool (G) to change the orientation of the gradient. In the above example it create an horizontal gradient, which we can adjust to a vertical one.

After selecting the Fill Tool, make sure the Context is set to Fill and make sure you have the correct layer selected. Then move the two points around until the gradient has the direction you want.

Changing the direction of the background gradient

Adding the Icon

With the background ready we just need an icon or logo to add in the middle. This can be anything from just a letter, to an emoji or something completely custom. In order to make sure the icon has the correct size we can use a guideline image like the below.

Template guidelines for creating new app icons — Template Guidelines for App Icons

You can save this image and then lay it on top of your background to see the guidelines. In general you want the logo to be around ~75% of the actual icon size to leave some space to the border.

Next, use the Artistic Text Tool (T) from the menu on the left and draw up a big frame. Then press ⌃⌘ and Space to open up the emoji picker and choose one of the emojis.

Use the dots on the corners to rescale it if necessary and drag it around until it fits into the bigger of the two inner circles.

Before you use the icon make sure to hide the guidelines layer or delete it.

Then go to File > Export… (⌥⌘⇧S) to save the created image. For Apples app icon we can export it as it is as PNG. For Android icons you can change the size to 512px and export it as PNG too.