diff --git a/client/src/assets/icons/Magnifier.tsx b/client/src/assets/icons/Magnifier.tsx
index 42e5a13c1e2..0e965191bed 100644
--- a/client/src/assets/icons/Magnifier.tsx
+++ b/client/src/assets/icons/Magnifier.tsx
@@ -6,7 +6,7 @@ const Magnifier = (): JSX.Element => {
 
   return (
     <>
-      <span className='sr-only'>{t('icons.Magnifier')}</span>
+      <span className='sr-only magnifier'>{t('icons.Magnifier')}</span>
       <svg
         className='ais-SearchBox-submitIcon'
         height='10'
diff --git a/client/src/components/search/searchBar/searchbar-base.css b/client/src/components/search/searchBar/searchbar-base.css
index d72a6c1076b..b68e9c5408d 100644
--- a/client/src/components/search/searchBar/searchbar-base.css
+++ b/client/src/components/search/searchBar/searchbar-base.css
@@ -684,3 +684,7 @@ a[class^='ais-'] {
 strong.ais-Highlight-highlighted {
   background-color: transparent;
 }
+.magnifier {
+  background-color: black;
+  color: white;
+}