How to Design an Icon Library Using Grids in Adobe Illustrator - UX/UI - Material Design System
🎁 Download FREE Icon Grid & Practice Files used in this tutorial → https://cryestudio.systeme.io/icon-gr...
👉 Get a 7-Day Free Trial of Adobe Illustrator → https://adobe.prf.hn/click/camref:110...
🎨 Shop my favorite design & creator tools → https://amzn.to/4tAYQwN
🎨 Want to design clean, scalable, and professional-looking icons? This Adobe Illustrator tutorial walks you through how to use a 24px icon grid system (based on Google’s Material Design) to create consistent and cohesive icons — from setup to export.
We’ll cover icon style research, using key shapes, padding, negative space, stroke settings, and best practices for creating both filled and outline icons.
Perfect for UI/UX designers, illustrators, or anyone building a custom icon set.
📚 YOU’LL LEARN:
• How to set up a grid system in Illustrator
• Tips for researching icon styles for cohesion
• Designing balanced icons with stroke & spacing rules
• Creating export-ready vector icons (EPS & SVG)
• Building filled and outline icon sets the right way
💡 CONTENTS
RESEARCH
00:00 - Introduction
00:16 - Icon style research
SETUP GRID IN ILLUSTRATOR FILE
03:28 - Analyze the Material Design System icon grid
04:36 - Setup icon design file in Adobe Illustator with layers
05:00 - Grid layout demonstration
DRAW ICONS
05:26 - Draw camera icon
06:04 - Add rounded corners to icon
08:08 - Draw paint palette icon
09:16 - Measure spaces inside of icons
10:04 - Draw paint brush icon
11:33 - Analyze icon set together
12:16 - Finishing touches
13:08 - Outline strokes in the icons
13:27 - Use pathfinder tool to cut/simplify icon shapes
13:54 - Group icon shapes
14:44 - Turn outlines on to check for extra objects/shapes
15:19 - Create an outline version of the icons
EXPORT ICONS
17:05 - Put icons on individual artboards for export
18:09 - Name dartboards before exporting
19:12 - Check for strokes in designs
19:37 - Bulk export icons as vector EPS files
🎨 TOOLS I RECOMMEND:
👉 Try Canva Pro free for 30 days→ https://partner.canva.com/kOARLL
☕️ Start your 7-day free Adobe Creative Cloud trial → https://adobe.prf.hn/click/camref:110...
🎁 FREE DESIGN RESOURCES
► Logo Design Workbook — https://cryestudio.systeme.io/logo_de...
► Logo Export Cheat Sheet + Template — https://cryestudio.systeme.io/logoexp...
► Favorite Logo Design Books + Tools — https://cryestudio.systeme.io/logo-de...
► Free Guide: 100 Digital Download Ideas — https://cryestudio.systeme.io/free-re...
► Download a free print prep checklist for Adobe InDesign: https://cryestudio.systeme.io/free-re...
► Download the free project brief template: https://cryestudio.systeme.io/free-re...
➡️ FOLLOW ME
► Subscribe to my YouTube channel: / @cryestudio
► Check out my blog and get in touch: http://cryestudio.com
► Check out my graphic design portfolio: https://www.behance.net/cryestudio
🍿WATCH NEXT
► Graphic design fundamentals course - • 11 Basic Graphic Design Principles - Shape...
► Photoshop for beginners - FULL COURSE: • FREE Beginner Photoshop Course - With Prac...
► Adobe InDesign course for beginners: • Free InDesign Course For Beginners: How To...
► Full Logo Design Process: • Design a Logo Start to Finish (Step-by-Ste...
► Create an ad design in Adobe InDesign: • Create an ad design in Adobe InDesign - St...
Have other questions not covered in this video? Let me know in the comments below.
👋 ABOUT ME
Hi, I’m Kellie Crye Ward — a graphic and web designer with 20+ years of experience helping brands stand out through smart, intentional design.
On this channel, I make complex design tools like Adobe Illustrator, Photoshop, and Canva feel simple and approachable — so you can design with confidence, not overwhelm.
Through CryeStudio, I teach creative business owners and aspiring designers how to create logos, marketing materials, and digital products that look professional and feel like you.
🎨 Subscribe for step-by-step tutorials, Canva and Adobe tips, branding guides, and free design resources to level up your creative skills.
For questions or collaborations → [email protected]
#GraphicDesign #DesignEducation #LearnGraphicDesign #GraphicDesignTips #BrandingDesign #LogoDesign #DesignTutorial #GraphicDesignTutorial #Canva #CanvaTutorial #AdobeIllustrator #AdobeInDesign #AdobePhotoshop #AdobeAcrobat #AdobePremierePro #Figma #FigmaDesign #IllustratorTips #PhotoshopTips #DesignForBeginners #CreativeBusiness #SmallBusinessBranding #CreativeEntrepreneur #DesignInspiration #DesignProcess #CreativeProcess #IconDesign #AdobeIllustrator #GraphicDesignTips #DesignTutorials #AdobeIllustrator #UXUIDesign #MaterialDesign #DesignSystem #GraphicDesign #IllustratorTutorial #VectorIcons #CryeStudio #DesignTips #IconGrid #UIIcons #IllustratorTips #CreativeWorkflow #googlematerialdesign