Intermediate
How to create reusable vector sets on Framer
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.
Prerequisites
- Basic knowledge of Framer interface
- Understanding of vector graphics
- Familiarity with Framer components
- Knowledge of design systems
1
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.
Tip
Ensure your SVG files are optimized and have consistent naming conventions for better organization.
2
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.Tip
Use consistent sizing (like 24x24px) for all icons to maintain visual harmony.
3
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.4
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").
Tip
Use descriptive variant names that match your design system terminology.
5
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.
Tip
Add additional properties like color overrides or size options for maximum flexibility.
6
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.
Tip
Test your component on different backgrounds to ensure visibility and contrast.
7
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.
Tip
Use consistent folder structures and naming conventions to build a scalable design system.
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.
Ready to get started with Framer?
Put this tutorial into practice. Visit Framer and follow the steps above.
Visit Framer →