How to make an icon in Figma under 10 minutes.

Akash Nandy
3 min readDec 3, 2020

In this story you will know how to make cool glow app icon, or customize it your way, but if you’re a experienced designer, you can skip this if not, hang along with this story!

I am always obsessed with app icons and branding and I keep on experimenting with them, So I am gonna share how I made this neumorphic app icon with you all. My aim is to create a minimal, dark, aesthetic, Neumorphic logo that looks sick, so lets start🚀

First of all, you need to install Figma and have an account there because Figma will be our main tool in this mini project.

DRAW A RECTANGLE FRAME.

You need to draw a square frame. If you Press shift and draw a rectangle, it will be a square. Keep the size of the square 1024 x 1024.

Fill the square with black color, and corner radius 230.

DRAW FEW ECLIPSES.

Draw 5–6 small eclipses of size 196 x 196, fill then with different bright colors- here I have used white yellow red purple green blue.

Group(crtl + g) them together and then add a layer blur of 250.

DRAW THE VECTOR.

Draw a vector of any icon of your choice, here I am using NOTION as a reference.

Then add drop shadow to the vector (Y=23/ BLUR=4/ COLOR BLACK/OPA=25%)

DRAW ANOTHER RECTANGLE.

Draw another rectangle of 1024 x 1024 with rounded corners 230.

Remove fill and add stoke, then change the fill to linear gradient of shade of white. Keep the stroke size to something around 16–18.

Add layer blur of 43–45 to that layer

DRAW 2 ECLIPSES.

Draw 2 eclipses, fill it with white and tone down its opacity to 10% then add layer blur of 250 to get etched glass look and then place it in right corner down and up to get a light shadow effect.

EXPORT.

Export the whole frame keeping the suffix 4X and in .png format.

Then use a online “png to .icns/.ico” converter to convert it to suitable format.

BOOM and yes, you’re icon is ready to be used.

Thank you for reading till the end✨

you can check me out by visiting my website.

--

--