diff --git a/ui/package-lock.json b/ui/package-lock.json
index 767beb40b..b7269711e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,7 +13,7 @@
         "@fortawesome/fontawesome-svg-core": "7.2.0",
         "@fortawesome/free-regular-svg-icons": "7.2.0",
         "@fortawesome/free-solid-svg-icons": "7.2.0",
-        "@fortawesome/react-fontawesome": "0.2.6",
+        "@fortawesome/react-fontawesome": "3.2.0",
         "@juggle/resize-observer": "3.4.0",
         "body-scroll-lock": "3.1.5",
         "bootstrap": "5.2.3",
@@ -2875,17 +2875,16 @@
       }
     },
     "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.6.tgz",
-      "integrity": "sha512-mtBFIi1UsYQo7rYonYFkjgYKGoL8T+fEH6NGUpvuqtY3ytMsAoDaPo5rk25KuMtKDipY4bGYM/CkmCHA1N3FUg==",
-      "deprecated": "v0.2.x is no longer supported. Unless you are still using FontAwesome 5, please update to v3.1.1 or greater.",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.2.0.tgz",
+      "integrity": "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw==",
       "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.8.1"
+      "engines": {
+        "node": ">=20"
       },
       "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
-        "react": "^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
diff --git a/ui/package.json b/ui/package.json
index e59090f1a..611b6d18d 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,7 +9,7 @@
     "@fortawesome/fontawesome-svg-core": "7.2.0",
     "@fortawesome/free-regular-svg-icons": "7.2.0",
     "@fortawesome/free-solid-svg-icons": "7.2.0",
-    "@fortawesome/react-fontawesome": "0.2.6",
+    "@fortawesome/react-fontawesome": "3.2.0",
     "@juggle/resize-observer": "3.4.0",
     "body-scroll-lock": "3.1.5",
     "bootstrap": "5.2.3",
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
index 112b06e2f..cabe53ce6 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap
@@ -155,7 +155,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="svg-inline--fa fa-up-right-from-square "
+        class="svg-inline--fa fa-up-right-from-square"
         data-icon="up-right-from-square"
         data-prefix="fas"
         role="img"
@@ -306,7 +306,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     >
       <svg
         aria-hidden="true"
-        class="svg-inline--fa fa-up-right-from-square "
+        class="svg-inline--fa fa-up-right-from-square"
         data-icon="up-right-from-square"
         data-prefix="fas"
         role="img"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
index a8af4777b..10323ff37 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="svg-inline--fa fa-up-right-from-square "
+      class="svg-inline--fa fa-up-right-from-square"
       data-icon="up-right-from-square"
       data-prefix="fas"
       role="img"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
index 61232ccb6..1f27b54d4 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
@@ -133,7 +133,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="svg-inline--fa fa-up-right-from-square "
+        class="svg-inline--fa fa-up-right-from-square"
         data-icon="up-right-from-square"
         data-prefix="fas"
         role="img"
@@ -283,7 +283,7 @@ exports[`<GroupFooter /> matches snapshot when silence is rendered 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="svg-inline--fa fa-up-right-from-square "
+        class="svg-inline--fa fa-up-right-from-square"
         data-icon="up-right-from-square"
         data-prefix="fas"
         role="img"
@@ -363,7 +363,7 @@ exports[`<GroupFooter /> matches snapshot when silence is rendered 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-chevron-down fa-rotate-180 m-auto text-muted cursor-pointer"
+                    class="svg-inline--fa fa-chevron-down m-auto text-muted cursor-pointer fa-rotate-180"
                     data-icon="chevron-down"
                     data-prefix="fas"
                     role="img"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
index 7fbf07c9b..e33270909 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`<RenderSilence /> renders ManagedSilence if silence is present in Alert
             >
               <svg
                 aria-hidden="true"
-                class="svg-inline--fa fa-chevron-down fa-rotate-180 m-auto text-muted cursor-pointer"
+                class="svg-inline--fa fa-chevron-down m-auto text-muted cursor-pointer fa-rotate-180"
                 data-icon="chevron-down"
                 data-prefix="fas"
                 role="img"
diff --git a/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
index 584bcd14b..7a2c8d81b 100644
--- a/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<ReloadNeeded /> matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-spinner fa-spin me-2"
+          class="svg-inline--fa fa-spinner me-2 fa-spin"
           data-icon="spinner"
           data-prefix="fas"
           role="img"
diff --git a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
index 547c1d8e7..9321e18ff 100644
--- a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-spinner fa-spin me-2"
+          class="svg-inline--fa fa-spinner me-2 fa-spin"
           data-icon="spinner"
           data-prefix="fas"
           role="img"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
index 7ddfd32f2..6868b9fbc 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-chevron-down fa-rotate-180 m-auto text-muted cursor-pointer"
+            class="svg-inline--fa fa-chevron-down m-auto text-muted cursor-pointer fa-rotate-180"
             data-icon="chevron-down"
             data-prefix="fas"
             role="img"
@@ -162,7 +162,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-chevron-down fa-rotate-180 m-auto text-muted cursor-pointer"
+            class="svg-inline--fa fa-chevron-down m-auto text-muted cursor-pointer fa-rotate-180"
             data-icon="chevron-down"
             data-prefix="fas"
             role="img"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
index 3a7f97c03..a04587072 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="svg-inline--fa fa-chevron-down fa-rotate-180 m-auto text-muted cursor-pointer"
+                class="svg-inline--fa fa-chevron-down m-auto text-muted cursor-pointer fa-rotate-180"
                 data-icon="chevron-down"
                 data-prefix="fas"
                 role="img"
@@ -209,7 +209,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-calendar-check fa-fw text-muted me-1"
+                  class="svg-inline--fa fa-calendar-check text-muted me-1 fa-fw"
                   data-icon="calendar-check"
                   data-prefix="fas"
                   role="img"
@@ -227,7 +227,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-calendar-xmark fa-fw text-muted me-1"
+                  class="svg-inline--fa fa-calendar-xmark text-muted me-1 fa-fw"
                   data-icon="calendar-xmark"
                   data-prefix="fas"
                   role="img"
@@ -249,7 +249,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-fingerprint fa-fw text-muted me-1"
+                  class="svg-inline--fa fa-fingerprint text-muted me-1 fa-fw"
                   data-icon="fingerprint"
                   data-prefix="fas"
                   role="img"
@@ -275,7 +275,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-copy "
+                    class="svg-inline--fa fa-copy"
                     data-icon="copy"
                     data-prefix="fas"
                     role="img"
@@ -297,7 +297,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-house fa-fw text-muted me-1"
+                  class="svg-inline--fa fa-house text-muted me-1 fa-fw"
                   data-icon="house"
                   data-prefix="fas"
                   role="img"
@@ -318,7 +318,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-up-right-from-square "
+                  class="svg-inline--fa fa-up-right-from-square"
                   data-icon="up-right-from-square"
                   data-prefix="fas"
                   role="img"
@@ -343,7 +343,7 @@ exports[`<ManagedSilence /> matches snapshot with expanded details 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-filter fa-fw text-muted me-1"
+                    class="svg-inline--fa fa-filter text-muted me-1 fa-fw"
                     data-icon="filter"
                     data-prefix="fas"
                     role="img"
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
index 128cd7688..3aad947cd 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<FilterInput /> matches snapshot with no filters 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="svg-inline--fa fa-magnifying-glass "
+              class="svg-inline--fa fa-magnifying-glass"
               data-icon="magnifying-glass"
               data-prefix="fas"
               role="img"
@@ -65,7 +65,7 @@ exports[`<FilterInput /> matches snapshot with no filters 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-caret-down "
+            class="svg-inline--fa fa-caret-down"
             data-icon="caret-down"
             data-prefix="fas"
             role="img"
@@ -101,7 +101,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-spinner fa-spin "
+            class="svg-inline--fa fa-spinner fa-spin"
             data-icon="spinner"
             data-prefix="fas"
             role="img"
@@ -142,7 +142,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-spinner fa-spin "
+            class="svg-inline--fa fa-spinner fa-spin"
             data-icon="spinner"
             data-prefix="fas"
             role="img"
@@ -183,21 +183,21 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
           <input
             aria-activedescendant=""
             aria-autocomplete="list"
-            aria-controls="downshift-_r_1_-menu"
+            aria-controls="downshift-_r_5_-menu"
             aria-expanded="false"
-            aria-labelledby="downshift-_r_1_-label"
+            aria-labelledby="downshift-_r_5_-label"
             autocomplete="off"
             class="components-filterinput-wrapper text-white mw-100"
-            id="downshift-_r_1_-input"
+            id="downshift-_r_5_-input"
             role="combobox"
             size="1"
             value=""
           />
         </div>
         <span
-          aria-labelledby="downshift-_r_1_-label"
+          aria-labelledby="downshift-_r_5_-label"
           class="dropdown"
-          id="downshift-_r_1_-menu"
+          id="downshift-_r_5_-menu"
           role="listbox"
         />
       </div>
@@ -213,7 +213,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-caret-down "
+            class="svg-inline--fa fa-caret-down"
             data-icon="caret-down"
             data-prefix="fas"
             role="img"
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
index 862a5fb16..d90080bd8 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -122,7 +122,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -156,7 +156,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -198,7 +198,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -232,7 +232,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -274,7 +274,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -983,7 +983,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-calendar-day fa-fw me-1"
+                  class="svg-inline--fa fa-calendar-day me-1 fa-fw"
                   data-icon="calendar-day"
                   data-prefix="fas"
                   role="img"
@@ -1014,7 +1014,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -1034,7 +1034,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -1078,7 +1078,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -1098,7 +1098,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -1876,7 +1876,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="svg-inline--fa fa-calendar-day fa-fw me-1"
+                  class="svg-inline--fa fa-calendar-day me-1 fa-fw"
                   data-icon="calendar-day"
                   data-prefix="fas"
                   role="img"
@@ -1907,7 +1907,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -1927,7 +1927,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-up fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-up text-muted cursor-pointer fa-2x"
                     data-icon="angle-up"
                     data-prefix="fas"
                     role="img"
@@ -1971,7 +1971,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
@@ -1991,7 +1991,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
                 <span>
                   <svg
                     aria-hidden="true"
-                    class="svg-inline--fa fa-angle-down fa-2x text-muted cursor-pointer"
+                    class="svg-inline--fa fa-angle-down text-muted cursor-pointer fa-2x"
                     data-icon="angle-down"
                     data-prefix="fas"
                     role="img"
diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
index 4f7ad6412..243efea89 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="svg-inline--fa fa-angle-left "
+                class="svg-inline--fa fa-angle-left"
                 data-icon="angle-left"
                 data-prefix="fas"
                 role="img"
@@ -78,7 +78,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="svg-inline--fa fa-angle-right "
+                class="svg-inline--fa fa-angle-right"
                 data-icon="angle-right"
                 data-prefix="fas"
                 role="img"
diff --git a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
index 100d54b19..5239c16b4 100644
--- a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
+++ b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
       >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-circle-info fa-fw "
+          class="svg-inline--fa fa-circle-info fa-fw"
           data-icon="circle-info"
           data-prefix="fas"
           role="img"
@@ -47,7 +47,7 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
       >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-circle-info fa-fw "
+          class="svg-inline--fa fa-circle-info fa-fw"
           data-icon="circle-info"
           data-prefix="fas"
           role="img"
@@ -78,7 +78,7 @@ exports[`<AppToasts /> renders upstream error toasts if all instances are down 1
       >
         <svg
           aria-hidden="true"
-          class="svg-inline--fa fa-circle-info fa-fw "
+          class="svg-inline--fa fa-circle-info fa-fw"
           data-icon="circle-info"
           data-prefix="fas"
           role="img"
diff --git a/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap b/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
index 51c68b4dd..d7f038c2b 100644
--- a/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ToggleIcon/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<ToggleIcon /> matches snapshot when closed 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svg-inline--fa fa-chevron-down fa-rotate-180 "
+    class="svg-inline--fa fa-chevron-down fa-rotate-180"
     data-icon="chevron-down"
     data-prefix="fas"
     role="img"
@@ -23,7 +23,7 @@ exports[`<ToggleIcon /> matches snapshot when open 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
-    class="svg-inline--fa fa-chevron-down "
+    class="svg-inline--fa fa-chevron-down"
     data-icon="chevron-down"
     data-prefix="fas"
     role="img"
diff --git a/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap b/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
index fe726e528..b76a83340 100644
--- a/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/ValidationError/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<ValidationError /> matches snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="svg-inline--fa fa-circle-exclamation "
+      class="svg-inline--fa fa-circle-exclamation"
       data-icon="circle-exclamation"
       data-prefix="fas"
       role="img"