Create a Vector Icon & Export as SVG in Figma | Beginner-Friendly Tutorial
👉 Get a 7-Day Free Trial of Adobe Creative Cloud → https://adobe.prf.hn/click/camref:110...
►Download FREE 24px grid and practice files: https://cryestudio.systeme.io/icon-gr...
In this quick Figma tutorial, you'll learn how to design a custom gear icon using Figma’s shape tools and Boolean operations — then export it as an SVG for use in web, UI, or print projects. Perfect for beginners learning vector design or anyone who needs a clean, editable icon in SVG format.
🔥 IN THIS VIDEO:
• Create a gear icon using star + circle shapes
• Align and subtract shapes using Boolean operations
• Export an icon as an SVG from Figma
• Open and edit the SVG in Adobe Illustrator
• Convert SVG to EPS or other formats
Whether you're a UI designer, developer, or just need simple scalable icons, this step-by-step guide will show you how to keep your icons vector-based and editable.
👍 Like, comment, and subscribe to Crye Studio for more Figma tutorials, graphic design tips, and workflow tricks.
💡 CONTENTS
00:00 - Introduction
00:15 - Create a vector gear icon in Figma
01:28 - Export the icon as an SVG from Figma
02:14 - Review the icon in a vector editing program Illustrator
🎨 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: Create...
► Full Logo Design Process: • Design a Logo Start to Finish (Step-by-Ste...
► Create an ad design in Adobe InDesign: • Create a Magazine Ad Design in Adobe InDes...
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 #DesignTips #IconGrid #UIIcons #IllustratorTips #CreativeWorkflow #GoogleMaterialDesign #FigmaTutorial #SVGIcon #VectorDesign #FigmaForBeginners #FigmaIcons #UIUXDesign #IllustratorWorkflow #BooleanShapes #WebDesignTools #FreeDesignTutorials #FigmaToSVG #EditableIcons