#What is This Course?

"Vector Icons" is a free video tutorial on the Framer Marketplace, presented by Matt Jumper, an experienced Framer Masterclass instructor. This framer resource comprehensive video covers everything you need to know about working with vector icons in Framer—from importing and library usage to drawing originals and animating them. Delivered through narrated screen recordings with live demos, zooms on vector tools, icon library search, drawing canvas, variants panel, and animation setup, it walks through four main sections: importing custom vectors, inserting from Framer’s library, designing icons from scratch, and adding animations. Video length is likely 15–30 minutes (typical for in-depth Masterclass-style content), with clear pacing and pause-friendly segments. No duplicatable project is explicitly noted in listings, but the tutorial is designed for direct practice in your own Framer canvas. It’s especially valuable for designer-developers who want professional-grade icon workflows—creating scalable, animated, and brand-consistent icons that elevate UI polish across any project.

#What You’ll Learn ⚡

• Importing and optimizing custom SVG vector designs into Framer (clean-up, stroke/fill editing)

• Searching, inserting, and customizing icons from Framer’s built-in icon library

• Drawing vector icons from scratch using pen tool, shape builder, boolean operations, and path editing

• Animating icons with stroke reveals, path morphing, scale/rotate effects, and variant-based states

• Applying best practices for icon consistency (size variants, color variables, dark mode support)

#Who Is This For?

This video tutorial is ideal for Framer users who want complete control over icons—perfect if you’re tired of generic library icons or want custom animated elements that feel premium.

• Skill Level: Beginner to advanced—starts with basics but goes deep into drawing and animation

• Prior Knowledge Needed: Basic Framer canvas familiarity; vector drawing or animation experience helpful but not required

• Use Case 1: Building custom icon sets for dashboards, apps, or design systems

• Use Case 2: Adding animated icons to landing pages, portfolios, or interactive prototypes

• Pain Point Solved: Relying on mismatched imported SVGs—learn native import and clean-up

• Pain Point Solved: Static icons feel flat—add smooth animations for engagement

• Bonus Fit: Designers following Framer Masterclass content or wanting expert-level vector workflows

#Course Structure Breakdown

This video tutorial flows as a structured, expert-led session—narrated screen recording with live demos, tool zooms, and progressive building for easy pausing and replication.

• Intro / Recap / Problem Statement: Matt Jumper introduces vector icons’ importance in UI, outlines four core skills (import, library, draw, animate), and sets expectations for the session

• Main Demo Sections: Importing custom SVGs (upload, clean-up, stroke/fill edits); using Framer’s icon library (search, insert, recolor, size)

• Key Live Examples or Walkthroughs: Drawing icons from scratch (pen tool, shapes, booleans, path editing); animating icons (stroke reveal, morph, scale/rotate with variants)

• Tips / Best Practices: Optimize vectors for performance, use variables for theming, create size variants, test animations in preview, ensure accessibility (stroke contrast)

• Wrap-up / Encouragement: Shows final imported, drawn, and animated icons in context, celebrates versatility, and encourages building your own icon library