How to Add SVGs to Elementor Websites Without a Plugin

By default, we don’t have the ability to add SVGs, but you can get around that, and I’ll show you how.

This guide will teach you how to easily take advantage of the benefits (scalability, SEO friendliness, compact file size, etc.), that come with the SVG file format.

Upload SVGs Using Elementor

For the steps below, I’ll be working with Elementor’s Icon widget, but any Elementor widget with an Icon element (Icon, Icon Box, Icon List, etc.) will do.

  1. Edit any post or page with Elementor and drop in the Elementor Icon widget.
  2. Edit the Icon widget.
  3. Hover over the Icon image area and choose ‘Upload SVG’.
  4. Enable Unfiltered File Uploads
mylisting club add svgs to mylisting elementor icon widget upload svg
  1. Browse to the location of your SVG and select it.
  2. Click ‘Insert Media’.

That’s all there is to it! At this point, you can simply close your page without saving your changes and your SVG will be in your WordPress Media Library.

Adjust the Color of Your SVGs

Before SVGs Have Been Uploaded

  1. Edit the SVG file with your preferred text editor application. (Note: I use and recommend Visual Studio Code (Free) for editing a wide arrange of filetypes.).
  2. Find the ‘svg fill=”#xxxx” value.
  3. Adjust the HEX color code as desired.
  4. Save Changes.

After SVGs Have Already Been Uploaded

  1. Using an FTP application like FileZilla or any WordPress ‘File Manager’ plugin, browse to the location where you uploaded your SVGs (ex. /wp-content/uploads/).
  2. Edit the SVG file with your preferred text editor application.
  3. Find the ‘svg fill=”#xxxx” value.
  4. Adjust the HEX color code as desired.
  5. Save Changes.