Author

Paul Novak
Creative Lead

Article

Using an SVG for your logo, icons, or anything that's a vector graphic inside your website is without a doubt the best way to go. It keeps all your stuff super crisp and nothing get pixelated regardless of scale. Since SVGs are really just code at the end of the day they can be really lightweight and manipulated easily.

When you use an SVG like an image you still get that great scalability but in every other way it acts just as a png or jpg would. Here we will use the excellent Copy as SVG feature in Figma and bring in the SVG code to easily be able to manipulate the color inside of the Webflow designer.

When using this technique we'll only be able to change a single color aspect of the SVG so using vector artwork that is a single color or has some piece of it that you are ok with staying the same color. Here I'm using a question mark icon in a circle that has the ? cut out from the background.

When your icon is ready to go, simply Right-Click > Copy/Paste > Copy as SVG to get the code on your clipboard.

Then using the Embed feature in Webflow paste the code into your project. You'll see the icon should look exactly as you had it within Figma. Now to power it up and have the ability to change the color using the Webflow Typography settings. Towards the end of your main <path> your will find the <fill> with your color attached to it, in this case it looks like this: fill="#A682FF". If we simply change that hex value to "currentColor" that fill color will now be tied to the color selector within the Typography settings.

This opens up all sorts of possibilities and makes many things way easier. You now easily apply color changes via hover or include it within interactions all while using extremely crispy and nice graphics.

Contact Us

Interested in working with us? Get an estimate or send us a message.

🖥

🔎

🤖

👾