Build it in Figma: Design a cohesive icon set 

23:15 - Visual Balance between Circle and a Square icon • Make it blurred and squint at it to get an idea 24:55 - Examples of what shapes can translate to • A rectangle doesn't necessarily mean that it will be Rectangle only. It can be mostly rectangular. 26:04 - Scale. Add as many details as you can and then size them down and see what needs to go. • Muddy icons - icons that are not legible 27:40 - Element size: Can be helpful to start in starting with the smallest element of an icon and then building onto it. 💭 *thought process:* Goal of the icon - What it is for, concept, what would be the most detailed piece, where you want the end points to end on the grid, figuring out the spacing, how the forms would interact with each other. - Notice the inner corner, outer corner (rounded, sharp, etc.) 29:13 - Dimension and perspective: Entire set should have similar icons, if some icons are jazzy some other sets need to be jazzy as well to be consistent. 30:19 - Overlapping objects - Colour fill, line break, gradient when objects are in the background and the foreground? 30:57 - Stroke weight needs to be consistent so that images look like they belong together (example image attached) 33:28 - Pairing icons with the type used 34:15 - Accessibility stand point, active state and in active state - using colours to make things stand out, light mode vs dark mode, outlined icons take longer to read in dark mode 👀 Apple's Human Interface Guidelines - can be an interesting read 📚 47:40 - Making Icons - Inspo, basing it off of the UI - instead of just doing it • Shift X - to look at the strokes (designing in stroke ver instead of a filled ver from the start) • Boolean operation easy in figma 1:14:43 - Scaling advice

What a luxury you have to be able to design the same icons at different sizes; you must have a huge team! I thought I was going crazy wondering why some icons felt too large/small next to each other while trying to force them to be all the same size. SOOO many golden nuggets in this video, thank you so much Noah (and Figma for hosting)!

it will be great if Figma Separate this is session according to topics and put minute comment in Description area. ------------------------------------------ 12:00 - Jump into 20:00 Material Design icon 32:00 icon Strok 42:00 icon Design In figma

Very good (fun) conversation and material. Very useful. I am a huge fan of Metalab work. The team there is a monster when dealing with product design! It was my first time watching Figma cast. I will be watching the next ones too. Congratulations!

Thank you for sharing this. I struggled with keeping my icon designs consistent and now I know why. Cheers!

Noah created some really nice icons in the session, got plenty of tips from this thankyou!

Really nice work, one of the best videos I have seen on the subject. Thanks!

This was very insightful. We need more of these 😅

I've never used Figma, but this was a really great run-through of how to build an icon system. Very useful info, thanks for posting.

So useful, thanks Noah

Very helpful! Thanks for sharing ⭐

Just love all your videos Rogie :)

Thanks so much, I learned some great new tips. This was awesome!

Thanks a lot for taking your time to pass all these to us. God bless.

Thanksssss!!! great video I learned a lot from it and I was taking notes the whole time.

Noah gives a lot of Ryan George vibe. Loved this!

Greaaat video. Worth the watch for sure! Helped me get started with some icon design ;-)

Thank you so much! Learned a lot from your wonderful video :)😁

Having a time limit when you have someone as knowledgeable and experienced is crazy

very helpful! thank you very much!

Nice, very useful, thanks

Nice video. Great tool for developers like me who want low learning curve design tool. I was able to design my own icons, logo, mobile and web application with no design training.

Really nice push lately with these live sessions 😍

I’m not one too comment, but I was quite scared when I saw it would last an hour. Super happy I took the time, my icon design game is about to take a new level

thank you

Muchas gracias!!!!

Can you please suggest the stream regarding learning spot illustration?

Where do these live video discussions take from?

Hey! Which typeface is used for the cover of the video?

Hell yeah

Great work here! Love metalab... I'm really curious as to how they designed the icon they're talking about at 1:01:08. Tried using booleans but didn't quite make it.

Question - at approximately 50:40 you push the edge of the "chat bubbles' one pixel outside of the horizontal rectangle keyline, and say you are more-or-less using those bounds - Just wondering, since I've never used keylines before, how strict / loose can you be with those keyline guides? Is there a general rule on that? Thanks so much for this great video!

fucking crazy i love figma

Key lines :D

You should've let him at least finish this icon set we don't care about the video's lenght or it should've been a multi-videos "Build it in Figma", it takes 10 minutes only to really start the video. But great content as always Figma and especially Rogie.

Is "icons and you" trademarked or can I use it?😅

Hi, very nice video!

Keep all the strokes setting to "center" and don´t use masks or boolean. Just edit the vector network. Otherwise you can have problems when exporting to SVG. Looks nice on Figma, but will have bugs on SVG.

I've had problems exporting icons from Figma so the vector width scales properly when the image is resized. Any ideas how to fix this?

@figma Would it be possible to get access to the worksheet?

do you usually design icons in a 24px container or a 16px container? Isn't it best to scale down-> up?

Can we have a weblink for the second icon designer Noah mentioned? 'Meg', i guess. Are we talking about Meg Robichaud or someone else?

What's the name of the second Icon designer? Megg or what..? Thanks in advance

Figma my imagination

Did anyone catch the name of the icon creator @1:15:20 ? thx

Is 1.5px a valid size? There is no half Pixel i thought :-)

12:15 is where you can start listening to actual conversation about icons

Actual icon related content start around 12:16 ;)

Real Meat 16:35

These videos are WAY too long.

The ums and ahs are annoying had to turn it off.

You're good, but you reaaaaally should work on eliminating 90% of your "umm", it gets very distracting. Also, you need to finish your sentences more often.

Please if you have a whatsapp group where people can ask questions and get answers... Please add me up.