SVG Component

These components are sourced from Framer University.

This SVG component in Framer simplifies the use of icons. Just paste the SVG code of your icon, and it will appear on the page. You can easily customize the color and other properties in the right panel. Feel free to copy this component to your website and start using it.

So, why do I use this SVG component to display icons on my websites?

You could simply paste the SVG code directly onto the Framer canvas, and the icon would appear as a graphic layer. However, I prefer using the SVG component because it offers greater flexibility.

I can use it within 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 strange (unlike graphic layers).

I can also animate the color change of the icon since it has a color property (which isn’t possible with a graphic layer).

So, it’s great, but how can you use it?

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.

<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>

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.