Enhance your Elementor search widget with custom SVG images

Introduction

Learn how to quickly and easily replace the default Font Awesome icon of the Elementor Search widget with your own custom SVG icon. With just a few simple steps, you can give your website a unique and professional look that will make it stand out from the crowd. So, what are you waiting for? Get started today and give your website a unique and professional look!

Elementor is my go-to page builder due to its user-friendly interface, but some settings are not immediately visible to users. When I set out to replace all Font Awesome icons on my website with custom SVGs, I discovered that as of Elementor 3.9.1, the Search Form Widget only offers two button options, both of which are Font Awesome icons.

Fortunately, there are two (2) simple solutions to this issue.

Method 1: Using the Elementor Inline Font Icons Experiment

Elementor’s “Inline Font Icons” feature renders all its icons as Inline SVGs instead of loading the Font Awesome or e-Icon libraries. As of Elementor 3.9.1, this feature is in the Beta phase, making it “stable enough” for production use. This option is ideal for those who simply want to render the default search icon as an SVG, along with all other Font Awesome icons on their page, without having to load the Font Awesome library.

You can activate this feature by navigating on your WP Dashboard to Elementor > Settings > Experiments > Inline Font Icons.

Method 2: Add your own SVG HTML Element for Classic Skin

If you want to add your own custom SVG icon to an Elementor widget, you can use a workaround. The content area in most Elementor widgets allows you to use HTML elements such as <span>, <li>, <img>, and <svg>. This means that you can simply paste the SVG code for your icon into the content area, and it will be displayed as an icon.

Use your favourite tool or website to copy the SVG code

There are lots of free and paid websites where you can download SVGs, including the Font Awesome website. Once you’ve downloaded the SVG, open it using any text editor, such as Notepad++ and copy the entire content.

Here’s an example of the search icon SVG below:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M21 38c9.389 0 17-7.611 17-17S30.389 4 21 4S4 11.611 4 21s7.611 17 17 17Z"/><path stroke-linecap="round" d="M26.657 14.343A7.975 7.975 0 0 0 21 12a7.975 7.975 0 0 0-5.657 2.343m17.879 18.879l8.485 8.485"/></g></svg>

Paste SVG code to the widget’s text area

Edit your search form widget, then under the Content tab, change the button type from “Icon” to “Text.” Finally, paste the SVG code into the text area.

Adjust icon styling and size

Under the Style tab, you can change the colour and background colour of the Button. The only drawback to this method is that you would require custom CSS to change the search icon size.

This is quite simple to do. Navigate to the Advanced tab, then add this custom CSS:

selector .elementor-search-form__submit svg{
    --_size: 2em;
    width: var(--_size);
    height: var(--_size);
}

Replace the 2em value for the CSS variable "--_size" with your own value.

Method 3: Using JavaScript for other search skins

If you want to change the icon for the minimal or full screen skin, Elementor currently doesn’t provide the option to change the icon to text. So we’ll be using JavaScript to replace the icon. Use your favourite code snippets plugin or drop an HTML widget into the bottom of the page. You can also use the Elementor Custom Code.

Custom Code Snippet

<style>
    .dd-search--svg-icon .dd-search__icon svg {
        width: 1rem;
        height: auto;
        color: red;
    }
</style>

<script>
    var customSearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M21 38c9.389 0 17-7.611 17-17S30.389 4 21 4S4 11.611 4 21s7.611 17 17 17Z"/><path stroke-linecap="round" d="M26.657 14.343A7.975 7.975 0 0 0 21 12a7.975 7.975 0 0 0-5.657 2.343m17.879 18.879l8.485 8.485"/></g></svg>
  `;
    var customLabel = `<span class="elementor-screen-only">Search</span>`;
    document.querySelectorAll('.dd-search--svg-icon .elementor-search-form__icon, .dd-search--svg-icon .elementor-search-form__toggle, .dd-search--svg-icon .elementor-search-form__submit').forEach((el) => {
        el.classList.add("dd-search__icon");
        el.innerHTML = customSearchIcon + customLabel;
    });
</script>

Final step

Add a class name of dd-search--svg-icon to your Elementor Search Form Widget, then replace the customSearchIcon in the HTML code snippet with your own SVG code and style the icon as needed.

That’s It! Let me know what you think.