Framer Update, Layout & Design

Vector Update: Icon Sets, CMS Support, Components

Benjamin

5:45

5.3K views

Jun 17, 2025

About this lesson

Today we’re introducing big updates to Vectors in Framer. Built-in icon sets now support more styles—like Stroke Width and Duotone—for more control. Properties like Stroke Width are also available as Variables in custom icon sets. Path editing is more stable, and keyboard support makes browsing icons faster. Plus, Vector Sets now work seamlessly with the Framer CMS, unlocking new use cases. Watch the video to learn more, and find the changelog here: https://framer.com/updates/vector-updates

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

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

0:00Yo, my name is Benjamin and in this 0:02video I'm excited to introduce a series 0:05of vector updates. Starting with 0:08refreshed icon sets in the insert panel.0:11Sets like iconic and phosphor have been 0:14updated with new properties giving you 0:17control over things like stroke with 0:20fill and alpha unlocking new styles like 0:23duo tone. This makes icon sets like 0:26phosphor so much more versatile.0:29supporting all of its variants from thin 0:32to bold to duo tone, all using a single 0:36icon set in Framer. As you can see, the 0:38icon picker is also dynamic and reflects 0:41the styles you've chosen. Plus, you can 0:44now pick icons using only your keyboard 0:47as we added arrow key support. So, our 0:50built-in icon sets are more customizable 0:53and flexible and easier to browse as 0:57well. plus the name of your selected 1:00icon will now automatically be reflected 1:03in the layer panel. Next, let's talk 1:06variables. As you might know, you can 1:09also create custom icon sets in Framer.1:12And within an icon set, you can use 1:14variables to expose property controls.1:18So, you can decide how customizable you 1:20want your icon set to be. For example,1:24here we've only exposed two. one for the 1:26glyph color and the other for the 1:29background opacity. And in this update,1:32we're adding new variables. Let's have a 1:35look at another custom set. Here, we 1:38want to make this cloud icon 1:40customizable. We'll start by applying a 1:42color variable to the stroke color. And 1:45I already have existing variables, so I 1:48don't have to create a new one. With 1:50this update, we can now apply variables 1:53to stroke width as well. So, we now have 1:57two variables, but I would like to 1:59highlight another property. As you can 2:01see, we have two path elements and that 2:04is because many icon sets will use 2:07opacity to achieve a duo tone effect.2:10This means you need a separate shape. In 2:13framer, this is not needed. We can 2:16simplify this setup and use a single 2:20shape using a property we call fill 2:23alpha. Whereas opacity would also affect 2:27the stroke. Using fill alpha, we can 2:30control the transparency of just our 2:32fill on a single shape. So now we have 2:36exposed three property controls using 2:38variables color, width and alpha where 2:42color is applied to both the stroke and 2:45the fills and for each we can control 2:48their range default and how they appear.2:51Now let's go back to our page to have a 2:54look at our properties. Here is the 2:57cloud icon from our set and as you can 3:00see it is now uniquely customizable. We 3:03can make it duo tone. We can make it 3:05stroke based. And we can customize the 3:08width of the stroke custom icon sets 3:11with ultimate control only in framer.3:16Next, we've added complete vector set 3:19support to the framer CMS. Here we have 3:22a blog and we would like to use unique 3:25icons and tints for each blog post. So I 3:29have added the hero icon set to my CMS 3:32collection list. Now in our CMS we can 3:35hit edit fields. Create a new field and 3:40pick the vector set we're using which in 3:42my case is hero. Then for each post we 3:47can pick our own unique icon which I 3:50already went ahead and did. I've also 3:52assigned a unique color for each post.3:56And now when we go back to our page, we 3:59can go ahead and assign the proper 4:01variables to match with our CMS fields.4:04First, I'll update the backdrops,4:07assigning color to fill. Then it's time 4:10for the stroke color, assigning that to 4:13the color field as well. And finally,4:17the new icon variable for CMS. And now 4:21each post has a unique icon. Integrating 4:25vector sets with CMS unlocks tons of new 4:29use cases for things like your blogs,4:31change logs, documentation pages, and 4:34support pages.4:36And finally, vector sets now work much 4:39better within component variants. Now we 4:42can expose the icon variable within a 4:45component while still overriding other 4:48properties per variant. Here's an 4:50example. We have a button. It has two 4:53variants, primary and secondary. Both of 4:56these icons share a stroke width of 1.5.5:00However, optically, the left one feels 5:04thinner because it's a black stroke on a 5:07white background. So, ideally, we would 5:10make the stroke width just for this 5:12variant a little bit thicker for each 5:15icon. And now we can making the icons 5:18within each button variant feel more 5:22balanced visually, especially when 5:24viewed at a 100% zoom, giving you 5:27unparalleled control over your icons on 5:30your websites. Thank you for watching 5:33and stay tuned for more updates coming 5:37soon.

TeachesVector Sets Variables

Also coversCMS Fields Collection Lists Collections Component Variants Components Keyboard Shortcuts

Watch on YouTube ↗

‹ Framer Update: Linking with Rel, Parameters, and more

Localization Glossary ›