New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to add or embed SVG to Webflow

Are you looking to embed SVG to Webflow website but don’t know where to start?

In this tutorial, I will guide you step-by-step on how to embed an SVG icon to your Webflow website. By the end of this tutorial, you will be able to customize the size and color of your SVG icon to match your Webflow website’s style.

Embed SVG to Webflow

There are many ways to embed SVG icons to our website. When I develop a website, I usually create an SVG sprite. However, for Webflow websites, I found that there is one best method that works perfectly. In this tutorial, I will show you how to embed SVG icons using HTML Embed.

Use HTML Embed to Put the SVG Icon

Let’s say you want to embed a custom search SVG icon to your Webflow website. In this example, I will get the icon from Hero Icons.

1. Drag and drop the Embed HTML element from the “Add element” panel to your Webflow editor.

Drag and drop the Embed HTML element from the "Add element" panel to your Webflow editor
Drag and drop the Embed HTML element from the “Add element” panel to your Webflow editor

After you finish dragging the Embed HTML element to the Webflow editor, a popup HTML Embed Code Editor will appear.

2. Paste the SVG Icon that we copied from Heroicons.

Paste the SVG Icon that we copied from Heroicons
Paste the SVG Icon that we copied from Heroicons

3. Edit the SVG Icon Code

Before

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>

After

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>

As you can see, in the code of the SVG icon at the top, I only removed the class. For more advanced techniques:

  • You can change the fill color-hex to currentColor to change the color.
  • If you want to change the line of the SVG icon, you can change the hex color from stroke to currentColor.
  • You can also remove the original width and height from the SVG icon. These three advanced techniques will make it easier for you to style the icon with Webflow style.

4. Styling the Icon

Styling the Icon after embed SVG to Webflow
Styling the Icon after embed SVG to Webflow

As you can see in the image above, related to the advanced techniques that I provided in the previous step, we can easily create custom size and change the color of the SVG icon.

In this tutorial, we learned how to embed an SVG icon to a Webflow website using HTML Embed. We also learned some advanced techniques, such as changing the fill and stroke color and removing the original width and height from the SVG icon. By using these techniques, we can easily customize the size and color of the SVG icon to match our Webflow website’s style.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment