--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -170,17 +170,20 @@
         <label class="category-name" flex="1">&paneSync1.title;</label>
       </richlistitem>
     </richlistbox>
 
     <keyset>
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
-    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
+    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">
+      <html:img class="help-icon" src="chrome://global/skin/icons/help.svg"/>
+      <html:span class="help-label">&helpButton2.label;</html:span>
+    </html:a>
 
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
         <hbox class="search-container" pack="end">
           <textbox type="search" id="searchInput" style="width: &searchField.width;" hidden="true" clickSelectsAll="true"/>
         </hbox>
         <prefpane id="mainPrefPane">
 #include searchResults.xul

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -606,26 +606,24 @@ button > hbox > label {
 }
 
 .help-button {
   display: flex;
   align-items: center;
   position: fixed;
   left: 0;
   bottom: 36px;
-  background-image: url("chrome://global/skin/icons/help.svg");
+  background-image: none;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   line-height: 22px;
   height: unset;
   min-height: 36px;
   width: 168px;
-  background-position: left 10px center;
-  background-size: 16px;
-  padding-inline-start: 38px;
+  padding-inline-start: 18px;
   margin-inline-start: 34px;
 }
 
 .help-button:-moz-locale-dir(rtl) {
   background-position: right 10px top 10px;
   left: auto;
   right: 0;
 }
@@ -636,16 +634,38 @@ button > hbox > label {
 
 .help-button:link,
 .help-button:visited {
   color: var(--in-content-category-text);
   text-decoration: none;
   border-radius: 2px;
 }
 
+.help-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.help-label {
+  margin: 0 14px;
+}
+
+@media (max-width: 830px) {
+  .help-button {
+    width: 36px;
+    padding: 0;
+    justify-content: center;
+    margin-inline-start: 40px;
+  }
+
+  .help-label {
+    display: none;
+  }
+}
+
 .face-sad {
   list-style-image: url("chrome://browser/skin/preferences/in-content/face-sad.svg");
   width: 20px;
   height: 20px;
   margin-inline-end: 8px;
   margin-top: 5px;
   margin-bottom: 5px;
 }

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -687,17 +687,16 @@ xul|*.radio-label-box {
 *|*.category[selected]:hover:active,
 *|*.category.selected:hover:active {
   color: var(--in-content-category-text-selected-active);
   background-color: var(--in-content-category-background-selected-active);
 }
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   border: var(--in-content-category-border-focus);
-  border-inline-start: none;
 }
 
 *|*.category-name {
   line-height: 22px;
   padding-bottom: 2px;
   padding-inline-start: 9px;
   margin: 0;
   -moz-user-select: none;
@@ -724,24 +723,16 @@ xul|*.radio-label-box {
     display: none;
   }
 
   .category {
     padding-inline-start: 13px; /* make category icons align center */
     margin-inline-end: 35px;
   }
 
-  .help-button {
-    font-size: 0 !important;
-    margin-inline-start: 41px !important; /* make the question mark icon align center */
-    background-position: 10px !important;
-    padding-inline-start: 0px !important;
-    width: 36px !important;
-  }
-
   .main-content {
     padding-left: 0;
     padding-right: 0;
   }
 
   .pane-container {
     margin-inline-end: 10px;
   }