Layout & Design

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Justin

3:38

1.6K views

Mar 10, 2026

About this lesson

Learn how to make Vector Sets dynamic by connecting them to the CMS in Framer. In this lesson, we’ll cover how to add Vector Sets to a CMS collection, link them to CMS pages using variables, and swap them automatically inside CMS-driven layouts.

00:00 Introduction

00:30 Getting Started with the Framer CMS

00:46 Adding Vector Sets to the CMS

01:28 Linking Vector Sets to a CMS Page using Variables

02:42 Additional CMS Fields

03:14 Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/mastering-vectors-in-framer

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00As we've learned in the last chapter,0:02vector sets make it easy to organize and 0:04reuse icons and illustrations [music]0:06across projects. But when we connect 0:09them to our CMS, they become even more 0:12powerful, allowing them to change 0:14dynamically [music]0:15along with our content. So, in this 0:17lesson, we'll cover how to add our 0:19vector sets to a CMS collection, link 0:21them [music] to CMS pages using 0:23variables, and swap them dynamically 0:25with CMS driven layouts.0:30Now, before we get started, if you're 0:32not already familiar with the Framer 0:34CMS, we recommend checking out our 0:36getting started with the Framer CMS 0:38course over at framer.com/academy 0:42to get up to speed before diving into 0:44this lesson. With that in mind, let's 0:47start by adding a vector set into the 0:49CMS. Here, I've created a CMS collection 0:53for a blog, and I want to add an icon to 0:55each item. So to do that, we'll head to 0:58the edit fields tab, then click the plus 1:01icon in the top right corner of the 1:03popup. Because we already have a vector 1:06set within our project, the option to 1:08add it as a field will appear. So I'll 1:10go ahead and choose the vector set I 1:12want to use. With the set added, we can 1:15change the default icon by clicking the 1:17icon field and choosing which icon we 1:20want to start with. Now we can open each 1:23item in the collection and assign the 1:25appropriate icon for that entry. Once 1:28the icons are set for each CMS item, we 1:31can head over to the main blog page.1:34From here, we'll add a vector set to the 1:36CMS list that displays our blog posts 1:39just like we've done in a previous 1:41lesson by dragging it directly in from 1:44the assets panel onto the canvas. And 1:47we'll see that because the icon has been 1:49placed inside a CMS list, the icon is 1:52rendered for each item in this list,1:54just like the other CMS-driven content 1:57on the page. However, since it's not 2:00linked to our CMS collection yet, it's 2:03only going to show the default icon from 2:05the vector set, not the icons that I 2:08assigned to each CMS item. So with the 2:11icon selected, we'll head over to the 2:13vector set properties. Click icon, then 2:16set a variable, and choose the vector 2:19set field we created earlier to connect 2:22this to our CMS.2:24As soon as we do that, the icons will 2:27switch to the ones set within the CMS.2:31The nice thing is that any variables 2:33we've already set up within the vector 2:35set like color or stroke width still 2:38work even though the icons are coming 2:41from the CMS. And if you want even more 2:45flexibility, you can use additional CMS 2:48fields to drive those variables like 2:50controlling icon color through a color 2:52field as well as other visual 2:54properties. Okay, so now that our vector 2:58set is connected to the CMS, the icons 3:01are driven entirely by the content. If 3:04we ever want to change an icon, we'll 3:06just head back to the CMS collection,3:08change it within the CMS item, and it 3:10will automatically reflect the change on 3:13our page. It's really that simple to 3:15connect our vector sets to [music] our 3:17CMS, allowing us to increase their 3:19scalability across blog pages, dynamic 3:22lists, change logs, and many [music]3:24other use cases. In the next lesson,3:27we'll look at how to take our vector 3:28sets and share them across multiple 3:30projects. [music] See you there.

TeachesVector Sets CMS Fields

Also coversCMS Pages / Dynamic Content Collections Links Variables

Watch on YouTube ↗

‹ Framer Awards 2025: Announcing the Winners

Framer Convert: Understand, Test, and Optimize. ›