How to use SVGs in Webflow

Learn how to use SVGs in Webflow.

‍

1. What is an SVG Icon?

SVG (Scalable Vector Graphics) is a format for vector images that can scale up or down without losing quality. Unlike normal images, SVGs are code-based, so you can style and animate them easily.

2. Where to Find the SVG Code

When you get an SVG icon, it usually looks like a small block of code starting with <svg>...</svg>.
You can:

  • Download it from a design tool (like Figma or Illustrator)
  • Copy it directly from an icon library (like Heroicons, Lucide, etc.)

Example SVG code:

1<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2  <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3</svg>
4

3. How to Add an SVG Icon in Webflow

Here’s how you add an SVG manually:

  1. Drag a "Embed" element from the Webflow Add panel into your layout.
  2. Click "Edit Code" in the Embed settings.
  3. Paste your SVG code inside the Embed editor.
  4. Save & Close.

🎉 Now your SVG icon is live inside your Webflow project!

4. How to Style the SVG Icon

The magic of inline SVGs is that you can style them directly in Webflow:

  • Add a class to the Embed element.
  • Use CSS properties like:
    • fill: #000000; → Changes the internal color of the SVG (if fill is used inside the SVG paths).
    • stroke: #000000; → Changes the outline color (if stroke is used).

Tip:
If your SVG uses currentColor as the stroke or fill (like the example above), you can simply change the text color in Webflow, and the SVG will inherit it automatically. 🔥

5. Pro Tips for SVGs in Webflow

  • Keep it clean: Remove unnecessary metadata inside the SVG for better performance.
  • Reuse classes: You can create a general class like .icon and style all your SVGs consistently.
  • Responsiveness: Set width/height via Webflow styles instead of hardcoding in the SVG, if you want full responsive control.

Example

Here’s a full example workflow:

  1. Drag an Embed.
  2. Paste this SVG:
1<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2  <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3</svg>
4
  1. Create a class called icon in Webflow and add styles like:
    • Width: 32px
    • Height: 32px
    • Color: #111827

Done! ✅

Final Notes

If you’re using the template you purchased, all icons are already prepared as SVG.
You can copy, paste, and customize them easily using this method.