Adding Custom SVG Icons to your Site

Elementor comes with some great icons, but they’re pretty general and don’t have much style to them. Unfortunately, this can be a real drag on your site’s overall brand impression.

Creating SVG icons in Adobe Illustrator

For consistency, make sure your icons are created within an artboard so that the tops and bottoms of the icons reach the edge of the board. This will ensure all of your icons are the same size when you upload them to your site.

The most important thing to remember is that your icons cannot have any lines. When you select all parts of your icon, if you see there are fills and lines, you’re going to need to outline and expand. Head up to the Layout dropdown, and click on Create Outlines, or Expand. This will turn your lines into objects. This is the same with fonts. If you’re using text, you’ll need to outline.

Also, make sure your icons are all one color. They should not be a dual color if you plan on customizing the colors when you upload into the site. If you decide to initially make it a color that matches with your theme before you upload, you risk your client not liking the color, which means you have to go back to Illustrator and edit the colors there. It’s much easier to do this within Elementor. Work smarter, not harder.


Super simple. Head to File > Save As > SVG.

You can also use the new export tool – CTRL + ALT + E, and select SVG.

Share on facebook
Share on twitter
Share on linkedin