Learn how to create pixel perfect icons in Figma!

[@AMDesignAndDev]

Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.

[@OyindamolaAdeniyi1997]

in case you're not great with combining like me- 1. combine shapes with "union selection" 2. remove stroke from the shapes IN the union (not the union itself) 3. change union stroke to 1.5 4. remove union fill

[@VigneshGautam]

Thanks a ton. I was struggling with this part. I spent 30 mins understanding why my combination failed. @AMDesignAndDev - Great stuff. Please slow down on such areas.

[@estherazeta6431]

Thank you. This was very helpful

[@FF-db3mo]

Thanks! exact what i need

[@k16e]

Amazing tutorial. Learned so much in such a short one. Thanks!

[@MalcanniPlus]

Thank you so much! You just gave me what I have been looking for!

[@navyas3019]

Amazing! Totally love your videos. So insightful and way better than other videos. Learning a lot from here! 💯 Thank you so much for these.

[@AMDesignAndDev]

Thank you Navya!

[@spectrvm24]

Outstanding tutorial Asaad! 👏

[@ianslanni]

Man I learned so much out of your Figma videos, thank you so much!

[@AMDesignAndDev]

I’m glad! Do you subscribe and share it with your friends! And if you’d like to see specific videos please let me know.

[@tahatariq7804]

Very helpful Indeed. Keep up the good work.

[@AMDesignAndDev]

Okay sir :)

[@khurramarain31]

Amazing vedio...👍👍👍

[@AMDesignAndDev]

One important thing I'd like to add is, once you're done with the final icon, make sure its combined into a single shape/single stroke. Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel. kzbin.info/door/DDbr6k_AbXfGVMIjJLCZ1g

[@TuneAddikt]

Nice guidelines and content mate. Well done

[@AMDesignAndDev]

Thanks man!

[@iamgavcarter]

Awesome video, thanks for the great content!

[@AMDesignAndDev]

Thanks a lot Gavin :)

[@AdventureMuse]

I'm missing something around 9:22. You remove the fill from the union. You call it combine, but I'm assuming you are doing Union Selection from the top? We can't really see that on screen. You remove the fill from the union then add a stroke And now you just have the cog outline which is what I want, However, I don't get that. I still have all the lines. I know how to do this in Illustrator, but trying to learn figma. Any pointers what I'm missing?

[@DanielWiehoff]

+1 Same issue here.

[@ashgottacatchem]

I found out how to do it because I was having the same issue. Before you combine them using the Union button from the top, remove the stroke on the rectangles/circle and just fill them in with a color. Then hit the union button, and it should give you the desired shape. After that you can remove the fill and do the stroke steps like in the video. Hope that helps!

[@rithikakumar7781]

@@ashgottacatchem thanks a bunch was having the same issue

[@Goldifarms]

@@ashgottacatchem Wow! You are amazing Ash!! Thank you so much 🙏

[@wm1pyro604]

@@ashgottacatchem nice thx

[@shamshiyasenthil9225]

Perfect perfect 💯💯💯💯💯💯

[@alleycat2297]

thanks! this really takes some practice but how people create gear icons is no longer a mystery to me!!

[@AMDesignAndDev]

@@alleycat2297 glad!

[@bilalmehmood7974]

excellent video!

[@priteshkumar1987]

amazing tutorial

[@halukipek5943]

Thank you so much, it helped me a lot.

[@vinvas]

Amazing!

[@joyce9664]

Wonderful, thank you! It would be great if you'll make a pen tool video for vector beginners : )

[@AMDesignAndDev]

Sounds cool, will consider that :)

[@productdesign5521]

Thank you

[@raenton6837]

What did he do at 12:12 to add a new point to the shape? When I do that it just draws a new line...

[@AMDesignAndDev]

He pressed enter while selecting the shape to go into edit mode

[@xanderq]

Question: What do you do after you've create them? You make a frame around them? Or straight up make them into a component? Do you use the "Flatten Selection" option?

[@AMDesignAndDev]

You can create your own icon library with this. And yes, you can use flatten selection, otherwise just combining the shapes is fine too.

[@ZumbaArBsAs]

Hey I wonder how I can do one Icon that has an open path, that way the INSIDE Stroke is not working. Any Clue, please?

[@MadManX668]

awesome video thx

[@newtonheath92]

thanks brother

[@azhang8955]

Thank you for the informative video! I do have a question; when I make the check mark and try to round the edges, it doesn't round the ends of the checkmarks, only the center where the two lines converge. Is there a way I can troubleshoot this?

[@udesai2011]

Can the size of icons be changed after exporting into SVG? Thanks for the video.

[@AMDesignAndDev]

Yes, svg is scalable. So they can be changed to anything.

[@mortezamuhammadshafie9267]

hi thanks for tuts, Can i have your icon pack?

[@danparker7218]

great tutorial. Does the grid that was created for 24px work for larger icon sizes? or do larger sizes require more margin?

[@AMDesignAndDev]

You can just normally resize these icons to 2x, 3x, 4x, 5x, and all would be okay.

[@leeshudhawan4315]

Can u pls name the plugin where we can download all the icons ??

[@mtc1516]

well you can't always be pixel-perfect because the round circle is visually smaller than square so you need to do a bit of oversize to make them visually equal size

[@diogojmseixas]

cool but how can i use it on css/html?

[@AMDesignAndDev]

You can just export them as an svg, and import them as an image.

[@1YAKUZI]

Idk but 1.5px outline is not pixel perfect in my browser.

[@ТеплицькийЄвстафій]

Son unos GIRLS18.Uno de los mejoresc conciertos Mañas no 3 se l 💯💞😍