How to create reusable vector sets on Framer

intermediate 8 min read Updated 2026-03-18

Quick Answer

Create reusable vector sets in Framer by importing or drawing vectors, organizing them into a component, and setting up variants for different states. This allows you to maintain consistent iconography across your project while enabling easy updates and modifications.

Try Framer Full Framer Review

Prerequisites

Basic knowledge of Framer interface
Understanding of vector graphics
Familiarity with Framer components
Knowledge of design systems

Step-by-Step Instructions

Import or create your vector graphics

Start by importing your SVG files into Framer by dragging them directly onto the canvas, or use the Insert menu and select Image. Alternatively, create vectors using Framer's built-in vector tools by selecting Insert > Vector and drawing your shapes using the pen tool or basic shape tools.

Ensure your SVG files are optimized and have consistent naming conventions for better organization.

Group and organize your vectors

Select all related vectors by holding Shift and clicking each one, then press Cmd+G (Mac) or Ctrl+G (PC) to group them. Rename the group in the Layers Panel with a descriptive name like "Icon Set" or "Vector Collection". Ensure all vectors are properly aligned and sized consistently within the group.

Use consistent sizing (like 24x24px) for all icons to maintain visual harmony.

Convert the group to a component

With your vector group selected, right-click and choose Create Component from the context menu, or use the keyboard shortcut Cmd+K (Mac) or Ctrl+K (PC). Give your component a clear name in the Component Panel that appears on the right side of the screen.

Set up component variants for different vectors

In the Component Panel, click the + Add Variant button to create different states for each vector in your set. For each variant, hide the vectors you don't want to show by selecting them and toggling the visibility icon in the layers panel. Name each variant clearly (e.g., "Home", "Search", "Profile").

Use descriptive variant names that match your design system terminology.

Configure component properties

In the Component Panel, create a new property by clicking + Add Property. Choose Variant as the property type and name it something like "Icon Type". This will automatically connect to your variants, allowing users to switch between different vectors easily.

Add additional properties like color overrides or size options for maximum flexibility.

Test and publish your component

Create an instance of your component by dragging it from the Components Panel onto your canvas. Test switching between variants using the Properties Panel on the right. Once satisfied, publish your component to make it available across your project by clicking Publish in the component panel.

Test your component on different backgrounds to ensure visibility and contrast.

Organize in the Asset Panel

Navigate to the Assets Panel and organize your vector component into appropriate folders. You can create new folders by clicking the + button and dragging your component into the desired category. Add tags and descriptions to make the component easily discoverable by team members.

Use consistent folder structures and naming conventions to build a scalable design system.

Common Issues & Troubleshooting

Vectors appear pixelated or blurry when resized

Ensure you're using SVG format instead of raster images. If using imported vectors, check that the original SVG has proper viewBox attributes and vector paths rather than embedded raster graphics.

Component variants not switching properly

Check that each variant has the correct layers visible/hidden. Go to each variant in the Component Panel and verify the visibility settings in the Layers Panel. Ensure no layers are accidentally locked.

Vector colors not overriding correctly

Make sure your vectors use fills rather than strokes where possible, and avoid using complex gradients. Create a Color property in the component panel and connect it to the vector fills for proper override functionality.

Component not appearing in Assets Panel

Ensure you clicked Publish after creating the component. If still missing, try refreshing the Assets Panel or check if you're in the correct project scope. Published components should appear automatically in the Assets Panel.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing