# Creating and Organizing Vector Sets in Framer (Vectors Lesson 3) Source: https://www.youtube.com/watch?v=uVtelh5LS5U Recap page: https://rapidrecap.app/video/uVtelh5LS5U Generated: 2026-02-11T18:04:25.622+00:00 --- ## Quick Overview The video demonstrates three primary methods for creating and managing vector sets within Framer: creating a new set from scratch, importing existing SVG files to form a set, and grouping existing icon paths to convert them into a new vector set, ensuring all icons maintain a consistent, manageable structure within the project's assets panel. **Key Points:** - The instructor outlines three methods for creating organized vector sets in Framer: drawing new icons, importing external SVG files, or grouping existing icon paths. - When creating a new vector set from scratch in the Assets panel, users click the plus icon next to 'Vectors' and choose 'New Set', naming it (e.g., 'Icon Set') (1:09). - Existing SVG files can be imported by dragging multiple files from the computer's file explorer directly onto the Framer canvas, which prompts the creation of a new vector set (4:56). - To convert existing icons on the canvas into a set, users select all path layers within the icon group, right-click, and choose 'Add to Vector Set' or 'Create Vector Set' (2:32, 4:10). - A key practice emphasized is ensuring all icons within a set share a consistent style (stroke width, corner radius, etc.) and are grouped correctly to maintain a cohesive scale (1:50, 3:07). - Vector sets do not support 'Frames' directly; if an icon element is inside a Frame, users must group the paths first before adding the group to a vector set (2:44, 4:04). - Framer's icon search functionality, accessible via the properties panel or icon picker, helps quickly find icons using consistent naming conventions (e.g., searching 'arrow') (5:39). ![Screenshot at 0:00: A display of various white outline icons arranged in two rows against a black background, illustrating the diverse range of icons available or being organized within the Framer Vector Sets feature.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-00-00.jpg) **Context:** This tutorial is part of a series (Lesson 3) focusing on advanced management of vector assets within the Framer design tool. The instructor explains systematic ways to build and maintain cohesive collections of icons, referred to as 'Vector Sets,' which are crucial for ensuring visual consistency and easy scalability across large design projects. ## Detailed Analysis The video comprehensively covers how to create and manage vector sets in Framer, offering three distinct workflows to achieve organized icon libraries. First, users can create a new set by navigating to the Assets panel, right-clicking the Vectors section, and selecting 'New Set,' which pre-populates the set with default shapes like a triangle, diamond, and oval (1:11). Second, users can import external assets by dragging multiple SVG files from their computer directly onto the Framer canvas; Framer automatically groups these and prompts the creation of a new vector set (4:56). Third, existing elements on the canvas, like a complex icon composed of multiple paths (e.g., the atom-like icon shown), can be selected, grouped (Command/Control + G), and then added to an existing or new vector set (2:26, 4:07). The instructor stresses the importance of maintaining visual consistency across all icons—specifically stroke width, fill, and corner radius—by editing the elements while they are still grouped within the set (1:50). Crucially, vector sets do not support Framer 'Frames'; therefore, if an icon is inside a Frame, the underlying paths must be grouped first to allow conversion into a vector set (2:44, 4:24). Finally, consistent naming conventions (like 'arrow left' or 'arrow right') are recommended for quick searching and retrieval of icons within the asset picker (5:39). ### Vector Set Creation Methods - Creating from scratch via Assets panel + icon (1:09) - Importing external SVGs by drag-and-drop (4:56) - Grouping existing paths and adding them to a set (2:26) ### Consistency and Editing - Edit stroke width, fill, and corner radius on grouped paths to maintain set consistency (1:50, 2:42) - Groups must be used instead of Frames for icon conversion (4:24) ### Icon Organization and Retrieval - Consistent naming (e.g., 'search', 'user') aids quick searching within the icon picker (5:39) - Newly created sets appear in the Assets panel for easy access (4:04) ![Screenshot at 0:04: A demonstration of the initial set of icons displayed against a black background, showing the visual style being used.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-00-04.jpg) ![Screenshot at 0:10: A visual demonstration of manipulating an imported icon \(a lightning bolt\) in the canvas, showing its dimensions \(35x35\) during placement.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-00-10.jpg) ![Screenshot at 0:35: The Assets panel in Framer showing the organization of vector sets \('Vex', 'Colorful', 'Brand'\) under the 'Vectors' section.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-00-35.jpg) ![Screenshot at 1:14: The newly created vector set, labeled 'Icon Set', containing default geometric shapes \(Triangle, Diamond, Oval\) within their respective containers.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-01-14.jpg) ![Screenshot at 4:56: A demonstration of importing multiple SVG files from the operating system's file explorer directly into the Framer canvas, triggering the vector set creation process.](https://ss.rapidrecap.app/screens/uVtelh5LS5U/00-04-56.jpg)