Enhance Your Elementor Search Widget with Custom SVG Images

David Denedo

David Denedo

Updated on .

Table of Content

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.

activate inline font icons feature

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.

add svg code to search form widget with classic skin

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.

html widget

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>
Add html code for search form widget

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.

Add class name to search widget

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

8 comments

  • Hi Daveden, thanks for this tutorial.

    Is there a way to change the icon for a custom svg if i chose the full-screen on the skin property of the search widget?
    Probably there is some css code that i can use but I’m having difficulties on finding how to do it.
    Your help would be much appreciated.

    • Hi Pedro

      So, one thing you can do is use js to change the contents of the elementor-search-form__icon. Here’s an example, you’ll need to change the svg to your own. To do that, you’ll need to open up your svg using a text editor and copy its contents. But you might need to use css to change the size of the icon. I’ll do a bit more research to see if there’s an easier and more efficient method and create a video about it. If you haven’t subscribed already, you can subscribe to my youtube channel https://youtube.com/@daveden2

      
      
      
    • Thanks for replying Daveden.
      I’ve just tried the css content property to change the icon to a custom svg and it works but it breaks the search functionality of the elementor search widget.

      .searchicon {
      content: url(./wp-content/uploads/2023/07/icon-procura.svg);
      width: 26px;
      }

      The icon as changed but now it doesn’t even recognize the widget as a button/link….it’s like there’s nothing there.
      Suggestions?
      Thanks.

      • Just use this, and upload your svg
        selector .fas.fa-search:before {
        content: “”;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(‘https://searchsense.ro/wp-content/uploads/2023/10/search-svgrepo-com-2.svg’);
        background-size: cover;
        }

    • Hello Pedro! I appreciate you taking the time to view my tutorial. Yes, you can use Custom CSS to change the icon. I will investigate a suitable method to accomplish this and provide you with further information as soon as I can.

  • This worked like a charm, thank you so much.

  • Hey Daveden, great article, thanks! I stumbled upon it because I am currently working on adding icons to external links in Elementor. I think I am almost there but I am as of now unable to let the SVG have the same color as the link.

    Logically, for example an h2 has a global variable color set, then the a tag inherits the color, and my code comes ::after with fill:currentColor. The functionality is there, the icon comes up but it stays black. I have analysed and cleaned my svg already.

    Any pointers? Your help is much appreciated.

  • A

    Hi Manuel. Thanks for reading my article.

    When you add an SVG within the content property of an ::after pseudo-element, it acts like an element and isn’t possible to style. The workaround is to add it as an mask-image instead.

    Here’s an example from StackOverflow (https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css):

    selector h2::after {
    background-color: currentColor;
    content: “”;
    padding: 0 0.5em;
    margin: 0 0.125rem;
    -webkit-mask-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg viewBox=’0 0 2048 2048’%3E%3Cpath d=’M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z’/%3E%3C/svg%3E”);
    mask-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg viewBox=’0 0 2048 2048’%3E%3Cpath d=’M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z’/%3E%3C/svg%3E”);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    clip-path: padding-box inset(0.28125em 0);
    }

Leave your comment