Component
SVG Component for Framer
This is an SVG component in Framer that makes using icons much easier. Just paste in the SVG code of the icon, and it appears on the page. Customize the color and other properties in the right panel easily. Feel free to copy the component to your website and start using it.
Created by
About the resource
So, first of all, why do I use this SVG component to display icons on my websites?
Even though you could just paste the SVG code directly onto the Framer canvas and the icon would appear as a graphic layer, I still prefer using the SVG component because it offers more flexibility.
I can use it in a button component, turn its "SVG Code" property into a component variable, and then change the icon displayed in the button right from the canvas.
I can easily resize it in animations without it looking weird (unlike graphic layers).
I can also animate the color change of the icon since it has a color property (which also isn't possible with a graphic layer).
Okay, so it's great, but how can you use it?
Step 01
First, you need to get the SVG code of your icon. It's important to choose from a well-designed icon pack because if the icon isn't properly built, it won't display correctly in the SVG component.
I highly recommend the Central Icon System. I use it in every one of my projects. I've also made the free version of the icon pack available in Framer in a compact component.
You can simply right-click the icon in Figma and copy it as SVG.
About the resource
So, first of all, why do I use this SVG component to display icons on my websites?
Even though you could just paste the SVG code directly onto the Framer canvas and the icon would appear as a graphic layer, I still prefer using the SVG component because it offers more flexibility.
I can use it in a button component, turn its "SVG Code" property into a component variable, and then change the icon displayed in the button right from the canvas.
I can easily resize it in animations without it looking weird (unlike graphic layers).
I can also animate the color change of the icon since it has a color property (which also isn't possible with a graphic layer).
Okay, so it's great, but how can you use it?
Step 01
First, you need to get the SVG code of your icon. It's important to choose from a well-designed icon pack because if the icon isn't properly built, it won't display correctly in the SVG component.
I highly recommend the Central Icon System. I use it in every one of my projects. I've also made the free version of the icon pack available in Framer in a compact component.
You can simply right-click the icon in Figma and copy it as SVG.
About the resource
So, first of all, why do I use this SVG component to display icons on my websites?
Even though you could just paste the SVG code directly onto the Framer canvas and the icon would appear as a graphic layer, I still prefer using the SVG component because it offers more flexibility.
I can use it in a button component, turn its "SVG Code" property into a component variable, and then change the icon displayed in the button right from the canvas.
I can easily resize it in animations without it looking weird (unlike graphic layers).
I can also animate the color change of the icon since it has a color property (which also isn't possible with a graphic layer).
Okay, so it's great, but how can you use it?
Step 01
First, you need to get the SVG code of your icon. It's important to choose from a well-designed icon pack because if the icon isn't properly built, it won't display correctly in the SVG component.
I highly recommend the Central Icon System. I use it in every one of my projects. I've also made the free version of the icon pack available in Framer in a compact component.
You can simply right-click the icon in Figma and copy it as SVG.
Copying the SVG code of the icon in Figma.
Copying the SVG code of the icon in Figma.
Copying the SVG code of the icon in Figma.
The SVG code you're copying will look something like this:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_967_124)">
<path d="M18 6.09674C18 6.0348 18.0246 5.97539 18.0684 5.93159L23.6013 0.398708C23.7484 0.251575 24 0.35578 24 0.563858V11.9033C24 11.9652 23.9754 12.0246 23.9316 12.0684L18 18V6.09674Z" fill="white"/>
<path d="M6 18V6.56386C6 6.35578 5.74843 6.25158 5.60129 6.39871L0.0684074 11.9316C0.0246069 11.9754 0 12.0348 0 12.0967V23.7664C0 23.8954 0.104567 24 0.233557 24H11.9033C11.9652 24 12.0246 23.9754 12.0684 23.9316L18 18H6Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_967_124">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>Step 02
Once you have the SVG code, head over to the SVG component in Framer. After selecting it, you'll see the "SVG Code" property in the right panel. Just paste the SVG code into that property, and the component will display your icon.
The SVG code you're copying will look something like this:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_967_124)">
<path d="M18 6.09674C18 6.0348 18.0246 5.97539 18.0684 5.93159L23.6013 0.398708C23.7484 0.251575 24 0.35578 24 0.563858V11.9033C24 11.9652 23.9754 12.0246 23.9316 12.0684L18 18V6.09674Z" fill="white"/>
<path d="M6 18V6.56386C6 6.35578 5.74843 6.25158 5.60129 6.39871L0.0684074 11.9316C0.0246069 11.9754 0 12.0348 0 12.0967V23.7664C0 23.8954 0.104567 24 0.233557 24H11.9033C11.9652 24 12.0246 23.9754 12.0684 23.9316L18 18H6Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_967_124">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>Step 02
Once you have the SVG code, head over to the SVG component in Framer. After selecting it, you'll see the "SVG Code" property in the right panel. Just paste the SVG code into that property, and the component will display your icon.
The SVG code you're copying will look something like this:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_967_124)">
<path d="M18 6.09674C18 6.0348 18.0246 5.97539 18.0684 5.93159L23.6013 0.398708C23.7484 0.251575 24 0.35578 24 0.563858V11.9033C24 11.9652 23.9754 12.0246 23.9316 12.0684L18 18V6.09674Z" fill="white"/>
<path d="M6 18V6.56386C6 6.35578 5.74843 6.25158 5.60129 6.39871L0.0684074 11.9316C0.0246069 11.9754 0 12.0348 0 12.0967V23.7664C0 23.8954 0.104567 24 0.233557 24H11.9033C11.9652 24 12.0246 23.9754 12.0684 23.9316L18 18H6Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_967_124">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>Step 02
Once you have the SVG code, head over to the SVG component in Framer. After selecting it, you'll see the "SVG Code" property in the right panel. Just paste the SVG code into that property, and the component will display your icon.
The SVG component's properties.
The SVG component's properties.
The SVG component's properties.
The image above shows the properties you'll find on the SVG component. The ones highlighted with blue are only going to appear if your icon is stroke based. If they appear, you can easily change the stroke width and other properties of your icon.
The image above shows the properties you'll find on the SVG component. The ones highlighted with blue are only going to appear if your icon is stroke based. If they appear, you can easily change the stroke width and other properties of your icon.
The image above shows the properties you'll find on the SVG component. The ones highlighted with blue are only going to appear if your icon is stroke based. If they appear, you can easily change the stroke width and other properties of your icon.
