Get the HTML code of your SVG files in a few steps to customize your website icons!
The HTML code of an SVG file can be very useful in many situations. For example, on Webflow, it can be interesting to insert the HTML code of an SVG file in an embed rather than an SVG image to play on the colour of the icon.
In today's tutorial, we will show you how to get the HTML code from any SVG file in a few steps.
Option 1: With Figma and a code editor
Step 1: Upload your SVG file to your files
The first step is simply to upload your icon, image in SVG. For example in Figma, you can export your file in SVG vector. You can also download your SVG file directly from an SVG icon library.
Step 2: Go to the Online IDE site
Once you have downloaded your SVG icon to your device, you can go to the Online IDE site. Online IDE is an online code editor, an integrated development environment. In other words, it's a program for coding or editing code. Online IDE is one tool among many, so you can use the IDE you prefer. The advantage of Online IDE is that you can access it for free and directly online (without downloading any software).
Step 3: Open your SVG file on the website
When you are in the Online IDE, you have a feature that allows you toopen a file in the software from your file manager. To do so, you just have to click on the first icon (representing a folder/file) at the top left ("open file from disk").
You will now search for your SVG file and double-click on it.
Step 4: Copy the HTML code from the SVG file
When you inserted your SVG file into the software, a new page was created (with the name of your file). You will notice that there is now the HTML code of your SVG file in the code editor. You can retrieve this code by selecting the entire editor (Ctrl + A or Cmd + A) and copying it (Ctrl + V or Cmd + V).
Step 5: Paste the HTML code from the SVG file
You have now retrieved the HTML code of your SVG file and you can do whatever you want with it. To go further, we will show you how to implement it in Webflow.
To do this, open your Webflow project, insert the "embed" element in the place you want and paste the copied SVG code into the Webflow code editor. You can click on "Save & close". You will then see your icon in your project. For more info 👉 Inserting an SVG icon with code
The problem is that our icon is not necessarily the right size or the right colour. To change this, we will act on the code.
Step 6: Modify the code to your liking
When you implement an icon via its HTML SVG code, you can modify the code to suit your needs.
To make the colour identical to that of your text, you will delete all the "fills" corresponding to a colour except the first one. For the first "fill", you must put "fill=currentcolor".
You can also adjust the size of your icon using the width and height fields.
In short, you should know that you can customise the code so that your icon fits perfectly into your design thanks to more flexibility than an image.
Option 2: In 2 clicks from Figma
Step 1: Insert your SVG file into Figma
Just like the first step in option #1, you will need to insert an SVG file into your Figma project.
Step 2: Copy to SVG in Figma
Figma, offers us the possibility to copy elements in several ways. In our case, what we are interested in is to copy as SVG. To do this, it is necessary to right click on your SVG element, then in the submenu of"Copy/Paste as" click on"Copy as SVG".
Step 3: Paste where you want
Then, you just have to paste what you have just copied in a code editor (for example directly in a Webflow embed element). From this moment on, you can replicate steps 5 and 6 of option n°1 to use it in Webflow.
Tuto 👉 Learn how to Design an embed code in for rich text!
For more tips and tutorials, check out our .
