How do I make an App icon in Figma?

How do I make an App icon in Figma?

If you're a beginner app designer and you're finishing your first project then you're probably wondering what's the best or easiest way to make an app icon in figma. 

There's really no set way to do it, I can just show you how me - as a freelanced UI/UX designer do it for my clients. I'll show you a placeholder example but you can use the same process to adapt to your own niche and app.

How do I make an App icon in Figma?

Follow the short video tutorial I've made or the steps below:

So you start with a blank wireframe and after that I usually like to add a gradient background just because that's the style most app icons use nowadays. Especially if we're going to be using it for iOS, but of course it's really subjective so you can use flat colors or even background images. 

Ideally you should still try to be minimalistic when designing icons. Nobody likes overcrowded designs. 

For the actual icon you can use the project's logo - for the sake of example I'm going to use a simple icon which i'm going to color to white. 

If you don't know where icons are in Figma you can read this recent post I made about icon packs and plugins:

Where is the icon library in Figma?

Anyway, once you're done with the design you can export the App icon. I exported it both as PNG and as SVG. The size is usually 128 x 128 px but it can vary on different operating systems. You can export at 2x or 3x the initial size - there's options for that in the Figma exporter panel.

In short, there's no good or bad way to design an app icon in Figma. In this tutorial I showed you an example of how I usually do it for my clients. It's fast and the results are usually great.