# How to retrieve the HTML SVG code from an SVG file?
Tutorial3 minPublished on Mar 20, 2023Updated on Table of contents
[
Copied](#)[
](#)[
](#)[
](#)
- [H2 Example](#)
Use AI to summarize this article[
ChatGPT](#)[
Claude](#)[
Grok](#)[
Perplexity](#)[
Google AI](#)Key pointsThe HTML code of an SVG file can be quite handy in many situations. For instance, in Webflow, it can be advantageous to insert the **HTML code of an SVG file** in an embed rather than using an SVG image, especially to influence the color of the icon.
In today’s tutorial, we will show you **how to retrieve the HTML code from any SVG file in just a few steps**.
## Option 1: Using Figma and a Code Editor
### Step 1: Download Your SVG File
The first step is simply to **download your icon**, which is an **SVG** image. For example, in Figma, you can export your file as a vector SVG. You can also download your SVG file directly from an SVG icon library.
### Step 2: Go to the Online IDE Website
Once you have downloaded your SVG icon onto your device, you can visit the [Online IDE](https://www.online-ide.com/) website. Online IDE is a **web-based code editor**, functioning as an integrated development environment. In other words, it is software that allows you to code or edit code. Online IDE is just one of many tools available, so feel free to use any IDE you prefer. The advantage of Online IDE is that you can access it for free and directly online (without needing to download any software).
### Step 3: Open Your SVG File on the Site
When you are on Online IDE, you have a feature that allows you to **open a file in the software** from your file manager. To do this, simply click on the first icon (representing a folder/file) in the top left corner (“open file from disk”).
You will now locate your SVG file and double-click on it.
### Step 4: Copy the HTML Code from the SVG File
Once you have inserted your SVG file into the software, a new page is created (named after your file). You will notice that the HTML code from your SVG file is now visible in the code editor. You can **retrieve this code** by selecting everything in the editor (Ctrl + A or Cmd + A) and copying it (Ctrl + C or Cmd + C).
### Step 5: Paste the HTML Code from the SVG File
You have now retrieved the HTML code from your SVG file, and you can use it as you wish. To take it a step further, we will show you how to implement it into Webflow.
To do this, open your Webflow project, insert the “embed” element where you wish, and paste the previously copied SVG code into the Webflow code editor. You can then click on “Save & close.” You will then see your icon in your project. For more info 👉 [Insert an SVG Icon with Code](/blog/insert-svg-icon-code-website)
The issue is that our icon may not be the correct size or might not have the desired color. To modify this, we will work within the code.
### Step 6: Modify the Code as Needed
When implementing an icon via its HTML SVG code, you can **modify the code** so that it meets your requirements.
To match the color to that of your text, you should remove all instances of “fill” that correspond to a color, except for the first one. For the first “fill,” you need to set it to “fill=currentcolor.”
You can also adjust the size of your icon by modifying the width and height attributes.
In short, it’s important to know that you can **customize the code** so that your icon integrates seamlessly into your design, offering more flexibility than a static image.
## Option 2: In 2 Clicks from Figma
### Step 1: Insert Your SVG File into Figma
Just like the first step of Option 1, you need to **insert an SVG file into your Figma project.**
### Step 2: Copy as SVG in Figma
Figma gives us the option to copy elements in several ways. In our case, what interests us is to **copy as SVG**. To do this, you need to **right-click** on your SVG element, then in the “**Copy/Paste as**” submenu, click on “**Copy as SVG**.”
### Step 3: Paste Where You Prefer
Next, you simply need to **paste** what you just copied into a code editor (for example, directly into a Webflow embed element). From this point, you can replicate Steps 5 and 6 from Option 1 to use it in Webflow.
Tutorial 👉 Learn how to [Design an Embed Code for Rich Text](/blog/designer-display-embed-code-rich-text-webflow-tutorial)!
For more tips and tutorials, check out our [no-code & low-code blog](/blog).
[
](#).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[
](/team/thibaut-legrand)[
](https://www.linkedin.com/in/thibaut-legrand-digidop/)[
](https://twitter.com/lgd_thibaut)+1200 readers
## Stay ahead of the curve!
Subscribe now for expert insights.
[Subscribe
](https://digidop.substack.com/subscribe)[Preview Newsletter
](https://digidop.substack.com/)
## Suggested articles
DocumentationAll blog post
### Top 20 Web & Digital Agencies for B2B SaaS in 2026
[Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026.webp)NewsDevelopmentAll blog post
### Webflow launches Source. Our take on this shift.
[Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.DocumentationAIAll blog post
### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers
[Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles
](/blog)Every great website
starts with a conversation[Talk to an expert
](/contact)[Book a call
](/calendly)