# Connecting Vector Sets to the Framer CMS (Vectors Lesson 6) Source: https://www.youtube.com/watch?v=gKbpBOzuVIM Recap page: https://rapidrecap.app/video/gKbpBOzuVIM Generated: 2026-03-10T16:38:42.228+00:00 --- ## Quick Overview Framer allows designers to connect Vector Sets, like Phosphor or Vex, directly to CMS collections, enabling icons and other visual properties to be driven dynamically by content variables, which simplifies content management and scales visual consistency across dynamic pages. **Key Points:** - Vector Sets (Phosphor, Vex) can be added as a field type within a Framer CMS collection structure. - The tutorial demonstrates adding a 'Vector Set' field type, choosing between available sets like 'Project' or 'Framer Academy' (Phosphor), or 'Vex' set. - After defining the field, each CMS item (e.g., blog posts) can be assigned a specific icon from the linked Vector Set. - When the CMS list renders on a page, the assigned icon is displayed, and its properties (like color or width) can be linked to other CMS variables, such as a dedicated 'Color' field. - Selecting an item in the CMS list (like 'Plugin API 3.0') and setting its 'Icon' property to a variable like 'Vex' ensures the icon updates dynamically when the CMS content changes. - This dynamic connection allows visual elements like icons to be controlled entirely by the CMS data, improving scalability and consistency for lists and dynamic content layouts. ![Screenshot at 0:04: The interface shows the Phosphor icon picker open, demonstrating the ability to easily select and insert icons into a design element, which precedes linking these icons to CMS variables.](https://ss.rapidrecap.app/screens/gKbpBOzuVIM/00-00-04.jpg) **Context:** This video tutorial, presented by Justin Jones (Education at Framer), focuses on advanced integration between Framer's Content Management System (CMS) and its Vector assets, specifically showing how to use Vector Sets (like Phosphor and Vex) as dynamic fields within CMS collections. This technique allows designers to control visual elements, such as icons, based on the specific content of each CMS entry, thereby increasing design scalability and reducing manual updates. ## Detailed Analysis The tutorial explains how to leverage Vector Sets within the Framer CMS to make icons dynamic. First, in the CMS 'Edit Fields' tab for a 'Blog' collection, the user adds a new field by clicking the plus icon. They select 'Vector Set' as the field type and choose an available set, such as 'Vex', which is then linked to the CMS collection. Once the field is defined, navigating to a specific CMS item, like 'Plugin API 3.0', allows the user to assign a specific icon from the 'Vex' set (e.g., 'storefront') to that item's 'Icon' property. Crucially, the user then sets this icon property to be driven by a CMS variable by clicking 'Set Variable' and selecting the newly created Vector Set field. This action causes the displayed icon on the design canvas (which is sourcing data from the CMS list) to automatically change based on the data in the CMS entry, such as switching from the default icon to the assigned 'storefront' icon when viewing the 'Plugin API 3.0' entry. Furthermore, other visual properties of the icon, like Color or Width, can also be linked to other CMS fields (like a designated 'Color' field), offering comprehensive control over dynamic visual styling across all CMS-driven elements. ### Adding Vector Set Fields - Navigate to CMS 'Edit Fields' tab - Click plus icon to add new field - Select 'Vector Set' type - Choose the desired Vector Set (e.g., Vex) - This creates a new field in the collection structure. ### Assigning Icons to CMS Items - Open a specific CMS item (e.g., 'Plugin API 3.0') - In the properties panel, locate the 'Vex' section - Click the Icon input and select the desired icon (e.g., 'storefront') from the picker. ### Connecting Icon to CMS Variable - In the properties panel for the selected icon element, click 'Set Variable' next to the Icon property - Select the newly created Vector Set field from the CMS collection to establish the dynamic link. ### Dynamic Visual Updates - Once connected, the icon displayed on the page (when viewing the CMS list) automatically reflects the icon assigned in the CMS item - Properties like Color and Width can also be connected to other CMS fields for total dynamic control. ![Screenshot at 0:06: Demonstrating the Phosphor icon picker in Framer, showing the selection of the Discord icon to replace a placeholder.](https://ss.rapidrecap.app/screens/gKbpBOzuVIM/00-00-06.jpg) ![Screenshot at 0:08: Viewing the CMS 'Edit Fields' panel, where the user is about to add a new field type to the 'Blog' collection.](https://ss.rapidrecap.app/screens/gKbpBOzuVIM/00-00-08.jpg) ![Screenshot at 0:59: The 'Blog Fields' pop-up is open, showing the existing fields, and the user prepares to add a new field by clicking the plus icon in the top right.](https://ss.rapidrecap.app/screens/gKbpBOzuVIM/00-00-59.jpg) ![Screenshot at 2:15: The properties panel for a selected icon element shows the 'Icon' field set to a variable \(Vex\), indicating it is dynamically linked to the CMS data.](https://ss.rapidrecap.app/screens/gKbpBOzuVIM/00-02-15.jpg)