diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a1a9489e6599e4ee2019d921bd82487eaf69eaf4..5abf8e1c64ff076ec830a0e781955bfe3e704ecc 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -224,12 +224,6 @@
       font-size: $gl-font-size-large;
     }
   }
-
-  .notifications-btn {
-    .fa-bell {
-      margin-right: 0;
-    }
-  }
 }
 
 .nav > .project-buttons {
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index 2b3e986a841ca578680a1753baf75e4d2dcd3d0e..b4a274a3ecf3b309fc307d2853f31d78fc2aafdb 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -17,16 +17,16 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
-              = icon("bell", class: "js-notification-loading")
+            %button.dropdown-new.btn.btn-defaul.btn-icon.gl-button.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+              = sprite_icon("notifications", size: 16, css_class: "js-notification-loading")
               = notification_title(notification_setting.level)
             %button.btn.dropdown-toggle.d-flex{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = icon('caret-down')
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.dropdown-new.btn.btn-default.btn-icon.gl-button.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               .float-left
-                = icon("bell", class: "js-notification-loading")
+                = sprite_icon("notifications", size: 16, css_class: "js-notification-loading")
                 = notification_title(notification_setting.level)
               .float-right
                 = icon("caret-down")
diff --git a/changelogs/unreleased/225934-replace-fa-bell-icons-with-gitlab-svg-notifications-icon.yml b/changelogs/unreleased/225934-replace-fa-bell-icons-with-gitlab-svg-notifications-icon.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ea7b5a91be4d58513d0a2fde33fb6810d28f2d73
--- /dev/null
+++ b/changelogs/unreleased/225934-replace-fa-bell-icons-with-gitlab-svg-notifications-icon.yml
@@ -0,0 +1,5 @@
+---
+title: Replace fa-bell icons with GitLab SVG notifications icon
+merge_request: 37676
+author:
+type: changed