Design from Scratch Ep. 21: Setting Up Icons |
🔗 Website:
Visit Design with Mitch – Stay up to date with courses, resources, and more.
https://www.designwithmitch.com
Video Chapters:
0:00 Intro
0:13 Overview of the icon library we’ll use
1:16 Creating a new page for icons
1:25 Planning file structure for future-proofing
2:30 Custom icons? Check out keyline templates
2:45 Setting up the icons page
3:41 Tip: Using the Feather Icons Figma plugin
4:15 Setting up icons as components – naming, scaling, and sizing
5:10 Configuring the IconSlot component sizes
7:12 Testing the component in action
7:48 Live example – Benefits of using an IconSlot
9:17 Adding another icon as an example
10:19 Final page overview and additional tips
11:37 Tidying up the file and publishing components
12:19 Next steps – What’s coming in future videos
12:37 Outro
📸 Image Credit:
Pexels.com - Kévin Dorg