Easily import SVGs from Figma to Webflow

Importing and exporting design assets can be a tedious task, especially for designers who prefer to go back and forth from Webflow to Figma and vice versa.

Likely, there's an easy way to move SVGs like vectors and icons without having to export them.

Unfortunately, this solution does not work with the free plan of Webflow because the free plan doesn't support custom code.

Figma

For this example, I have a design in Figma of these CTAs. I want to move the icon to Webflow.

Instead of selecting the icon and exporting it, Select the icon, Right click and choose copy to SVG.

Moving to Webflow

Add a code embed inside the wrapper that will contain the icon.

Finally, paste the SVG code you copied from Figma.  

That's it, now you don't have to manage SVG files in the asset window, all you need to do is to copy and paste your code.

Bonus tip:

What if you need to control the color of your icon in Webflow?

All you need to do is to make a small adjustment to your code snippet.

Change Fill from the hard-coded color to "currentColor". See the image below.

Now your icon will inherit the color properties of its parent from Webflow. Now you can add hover effect and change colors directly in Webflow.