diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 0d1b95f75f87fa7db6a5bdde868ed16563be46b0..1b12fece23a465850d76809bbc523210d34245dd 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -22,12 +22,8 @@ export default class NotificationsForm {
 
   // eslint-disable-next-line class-methods-use-this
   showCheckboxLoadingSpinner($parent) {
-    $parent
-      .addClass('is-loading')
-      .find('.custom-notification-event-loading')
-      .removeClass('fa-check')
-      .addClass('spinner align-middle')
-      .removeClass('is-done');
+    $parent.find('.is-loading').removeClass('gl-display-none');
+    $parent.find('.is-done').addClass('gl-display-none');
   }
 
   saveEvent($checkbox, $parent) {
@@ -39,14 +35,11 @@ export default class NotificationsForm {
       .then(({ data }) => {
         $checkbox.enable();
         if (data.saved) {
-          $parent
-            .find('.custom-notification-event-loading')
-            .toggleClass('spinner fa-check is-done align-middle');
+          $parent.find('.is-loading').addClass('gl-display-none');
+          $parent.find('.is-done').removeClass('gl-display-none');
+
           setTimeout(() => {
-            $parent
-              .removeClass('is-loading')
-              .find('.custom-notification-event-loading')
-              .toggleClass('spinner fa-check is-done align-middle');
+            $parent.find('.is-done').addClass('gl-display-none');
           }, 2000);
         }
       })
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 9f80d7b57ab4cefe8e74614e91db6bd512d190df..09501d3713d9b8780e9c8df0077e4f7687b6107c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -993,23 +993,6 @@ pre.light-well {
   }
 }
 
-.custom-notifications-form {
-  .is-loading {
-    .custom-notification-event-loading {
-      display: inline-block;
-    }
-  }
-}
-
-.custom-notification-event-loading {
-  display: none;
-  margin-left: 5px;
-
-  &.is-done {
-    color: $green-600;
-  }
-}
-
 .project-refs-form .dropdown-menu,
 .dropdown-menu-projects {
   width: 300px;
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index 51b7da7dee8db5caf28e403bd9b379aeb58b2c33..946e3c67dcf11dd23cc75dc625910b402d28006d 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -30,4 +30,5 @@
                       %label.form-check-label{ for: field_id }
                         %strong
                           = notification_event_name(event)
-                          .fa.custom-notification-event-loading.spinner
+                          %span.spinner.is-loading.gl-vertical-align-middle.gl-display-none
+                          = sprite_icon('check', css_class: 'is-done gl-display-none gl-vertical-align-middle gl-text-green-600')
diff --git a/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml b/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml
new file mode 100644
index 0000000000000000000000000000000000000000..573a72950fb5892d03b53eb1dda5064cc3516e52
--- /dev/null
+++ b/changelogs/unreleased/mw-replace-fa-icons-custom-notifications.yml
@@ -0,0 +1,5 @@
+---
+title: Replace fa-check icon in custom notifications
+merge_request: 47288
+author:
+type: changed