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-grid-practice-files 👉 Get a 7-Day Free Trial of Adobe Illustrator → https://adobe.prf.hn/click/camref:1101lKN6K 🎨 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:1101lKN6K 🎁 FREE DESIGN RESOURCES ► Logo Design Workbook — https://cryestudio.systeme.io/logo_design_workbook ► Logo Export Cheat Sheet + Template — https://cryestudio.systeme.io/logoexporttemplate ► Favorite Logo Design Books + Tools — https://cryestudio.systeme.io/logo-design-resources ► Free Guide: 100 Digital Download Ideas — https://cryestudio.systeme.io/free-resources ► Download a free print prep checklist for Adobe InDesign: https://cryestudio.systeme.io/free-resources ► Download the free project brief template: https://cryestudio.systeme.io/free-resources ➡️ FOLLOW ME ► Subscribe to my YouTube channel: https://www.youtube.com/@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 - https://youtu.be/apmfczSOHjM?si=H9rFrqfun6Yk2Znv/ ► Photoshop for beginners - FULL COURSE: https://youtu.be/M888EFXvhsQ ► Adobe InDesign course for beginners: https://youtu.be/89LLXnncncA?si=WZWnjcSttJKQL9qN ► Full Logo Design Process: https://youtu.be/NdTTyk3KJBM?si=Va2y4m2uKfWvU157 ► Create an ad design in Adobe InDesign: https://youtu.be/r0-NjNg-T0U?si=ZNJZEuYwzCxrMXH- 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 → info@cryestudio.com #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