--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -652,19 +652,20 @@ groupbox {
 }
 
 .search-tooltip-parent {
   position: relative;
 }
 
 menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
   display: -moz-box;
-  width: 10px;
+  width: 8px;
   min-width: auto; /* Override the min-width defined in menu.css */
   height: 10px;
   margin-inline-end: 6px;
 }
 
-menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left {
-  background-image: url(chrome://global/skin/icons/search-arrow-indicator.svg);
-  background-repeat: no-repeat;
-  background-size: 12px 10px;
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+  list-style-image: url(chrome://global/skin/icons/search-arrow-indicator.svg);
+  width: 8px;
+  height: 10px;
+  margin: 0;
 }

--- a/toolkit/content/widgets/textbox.xml
+++ b/toolkit/content/widgets/textbox.xml
@@ -312,16 +312,17 @@
       </handler>
     </handlers>
   </binding>
 
   <binding id="search-textbox" extends="chrome://global/content/bindings/textbox.xml#textbox">
     <content>
       <children/>
       <xul:hbox class="textbox-input-box" flex="1" xbl:inherits="context,spellcheck" align="center">
+        <xul:image class="textbox-search-sign"/>
         <html:input class="textbox-input" anonid="input" mozactionhint="search"
                     xbl:inherits="value,type,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey,mozactionhint,spellcheck"/>
         <xul:deck class="textbox-search-icons" anonid="search-icons">
           <xul:image class="textbox-search-icon" anonid="searchbutton-icon"
                      xbl:inherits="src=image,label=searchbuttonlabel,searchbutton,disabled"/>
           <xul:image class="textbox-search-clear"
                      onclick="document.getBindingParent(this)._clearSearch();"
                      label="&searchTextBox.clear.label;"

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -486,27 +486,23 @@ xul|textbox {
 /* Create a separate rule to unset these styles on .tree-input instead of
    using :not(.tree-input) so the selector specifity doesn't change. */
 xul|textbox.tree-input {
   min-height: unset;
   padding-right: unset;
   padding-left: unset;
 }
 
-xul|textbox[type="search"] > .textbox-input-box {
-  background: url(chrome://global/skin/icons/search-textbox.svg) no-repeat center left;
-  padding-inline-start: 16px;
+xul|textbox[type="search"] > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
+  visibility: hidden;
 }
 
-xul|textbox[type="search"] > .textbox-input-box:-moz-locale-dir(rtl) {
-  background-position-x: right;
-}
-
-xul|textbox[type="search"] > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
-  visibility: hidden;
+xul|textbox[type="search"] > .textbox-input-box > .textbox-search-sign {
+  list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
+  margin-inline-end: 5px;
 }
 
 html|input[type="email"],
 html|input[type="tel"],
 html|input[type="text"],
 html|textarea {
   font-family: inherit;
   font-size: inherit;