diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
index 2858561e033..a7425735733 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
@@ -1,10 +1,17 @@
 <script>
 import { createNamespacedHelpers, mapState, mapActions, mapGetters } from 'vuex';
-import { GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlFormInput,
+  GlFormCheckbox,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+  GlButton,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
 import { KUBERNETES_VERSIONS } from '../constants';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
 const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers(
@@ -29,7 +36,7 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
-    LoadingButton,
+    GlButton,
   },
   props: {
     gitlabManagedClusterHelpPath: {
@@ -508,13 +515,16 @@ export default {
       </p>
     </div>
     <div class="form-group">
-      <loading-button
-        class="js-create-cluster btn-success"
+      <gl-button
+        variant="success"
+        category="primary"
+        class="js-create-cluster"
         :disabled="createClusterButtonDisabled"
         :loading="isCreatingCluster"
-        :label="createClusterButtonLabel"
         @click="createCluster()"
-      />
+      >
+        {{ createClusterButtonLabel }}
+      </gl-button>
     </div>
   </form>
 </template>
diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
index 11ece478d36..6c0d20c55e9 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue
@@ -85,6 +85,7 @@ export default {
         v-model="filter"
         :placeholder="$options.i18n.searchPlaceholder"
         class="gl-align-self-center gl-ml-auto fork-filtered-search"
+        data-qa-selector="fork_groups_list_search_field"
       />
     </template>
   </gl-tabs>
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
index 00f1339d7f2..da9ff407faf 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue
@@ -1,7 +1,11 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -46,6 +50,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
index eabd4d88d52..362ca4ab917 100644
--- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue
@@ -112,11 +112,12 @@ export default {
     />
     <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="isMergeRequest && !allAssigneesCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
index 45707c18f7b..10b16a44261 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue
@@ -97,11 +97,12 @@ export default {
     <collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" />
     <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button">
       <span class="avatar-counter sidebar-avatar-counter"> {{ sidebarAvatarCounter }} </span>
-      <i
+      <gl-icon
         v-if="!allReviewersCanMerge"
+        name="warning-solid"
         aria-hidden="true"
-        class="fa fa-exclamation-triangle merge-icon"
-      ></i>
+        class="merge-icon"
+      />
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue
index 9fa3fa38eac..7961b7cd679 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue
@@ -1,9 +1,13 @@
 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
+import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
+  components: {
+    GlIcon,
+  },
   props: {
     user: {
       type: Object,
@@ -38,6 +42,6 @@ export default {
       class="avatar avatar-inline m-0"
       data-qa-selector="avatar_image"
     />
-    <i v-if="hasMergeIcon" aria-hidden="true" class="fa fa-exclamation-triangle merge-icon"></i>
+    <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/users_select/index.js b/app/assets/javascripts/users_select/index.js
index 19846026726..fbede49e9e8 100644
--- a/app/assets/javascripts/users_select/index.js
+++ b/app/assets/javascripts/users_select/index.js
@@ -796,7 +796,7 @@ UsersSelect.prototype.renderRowAvatar = function(issuableType, user, img) {
 
   const mergeIcon =
     issuableType === 'merge_request' && !user.can_merge
-      ? `${spriteIcon('warning-solid', 's12 merge-icon')}`
+      ? spriteIcon('warning-solid', 's12 merge-icon')
       : '';
 
   return `<span class="position-relative mr-2">
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b0ce90ca596..57725aa3002 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -113,7 +113,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+    filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
   }
 }
 
@@ -392,6 +392,13 @@
       text-align: center;
     }
 
+    .merge-icon {
+      height: 12px;
+      width: 12px;
+      bottom: -5px;
+      right: 4px;
+    }
+
     .sidebar-collapsed-icon {
       display: flex;
       flex-direction: column;
@@ -402,7 +409,7 @@
       text-align: center;
       color: $gl-text-color-secondary;
 
-      svg {
+      > svg {
         fill: $gl-text-color-secondary;
       }
 
@@ -410,7 +417,7 @@
       &:hover .todo-undone {
         color: $gl-text-color;
 
-        svg {
+        > svg {
           fill: $gl-text-color;
         }
       }
@@ -482,10 +489,6 @@
       display: none;
     }
 
-    .merge-icon {
-      font-size: 10px;
-    }
-
     .multiple-users {
       position: relative;
       height: 24px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b6a5c133c05..7e9b14a545b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -287,10 +287,6 @@ $mr-widget-min-height: 69px;
       margin-top: 0;
       margin-bottom: 0;
 
-      &.has-conflicts .fa-exclamation-triangle {
-        color: $orange-500;
-      }
-
       time {
         font-weight: $gl-font-weight-normal;
       }
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index bf17eb4fe3e..b5bfbc7bd1c 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -10,7 +10,7 @@
         - if current_user.admin?
           .text-warning
             %p
-              = icon("exclamation-triangle fw")
+              = sprite_icon('warning-solid')
               = html_escape(_('You are an admin, which means granting access to %{client_name} will allow them to interact with GitLab as an admin as well. Proceed with caution.')) % { client_name: tag.strong(@pre_auth.client.name) }
         %p
           - link_to_client = link_to(@pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer')
diff --git a/app/views/projects/_archived_notice.html.haml b/app/views/projects/_archived_notice.html.haml
index 522693ae24a..dcece8ab42f 100644
--- a/app/views/projects/_archived_notice.html.haml
+++ b/app/views/projects/_archived_notice.html.haml
@@ -1,5 +1,5 @@
 - if project.archived?
   .text-warning.center.prepend-top-20
     %p
-      = icon("exclamation-triangle fw")
+      = sprite_icon('warning-solid')
       = _('Archived project! Repository and other project resources are read only')
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 63cc96c2c05..a8a928515fe 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -37,7 +37,9 @@
     = _('Add previously merged commits')
 
 - if commits.size == 0 && context_commits.nil?
-  .mt-4.text-center
-    .bold
+  .commits-empty.gl-mt-6
+    = custom_icon('illustration_no_commits')
+    %h4
       = _('Your search didn\'t match any commits.')
-    = _('Try changing or removing filters.')
+    %p
+      = _('Try changing or removing filters.')
diff --git a/app/views/projects/merge_requests/widget/open/_error.html.haml b/app/views/projects/merge_requests/widget/open/_error.html.haml
index bbdc053609f..31efa64c672 100644
--- a/app/views/projects/merge_requests/widget/open/_error.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_error.html.haml
@@ -1,5 +1,5 @@
 %h4
-  = icon('exclamation-triangle')
+  = sprite_icon('warning-solid')
   This merge request failed to be merged automatically
 
 %p
diff --git a/app/views/projects/tree/_truncated_notice_tree_row.html.haml b/app/views/projects/tree/_truncated_notice_tree_row.html.haml
index 693b641888b..a03e0a549ee 100644
--- a/app/views/projects/tree/_truncated_notice_tree_row.html.haml
+++ b/app/views/projects/tree/_truncated_notice_tree_row.html.haml
@@ -1,6 +1,6 @@
 %tr.tree-truncated-warning
   %td{ colspan: '3' }
-    = icon('exclamation-triangle fw')
+    = sprite_icon('warning-solid')
     %span
       Too many items to show. To preserve performance only
       %strong #{number_with_delimiter(limit)} of #{number_with_delimiter(total)}
diff --git a/app/views/shared/_md_preview.html.haml b/app/views/shared/_md_preview.html.haml
index c7c36d79fa0..0976defea1b 100644
--- a/app/views/shared/_md_preview.html.haml
+++ b/app/views/shared/_md_preview.html.haml
@@ -28,7 +28,7 @@
   - if referenced_users
     .referenced-users.hide
       %span
-        = icon("exclamation-triangle")
+        = sprite_icon('warning-solid')
         You are about to add
         %strong
           %span.js-referenced-users-count 0
diff --git a/changelogs/unreleased/214044-add-empty-state-no-commit-result.yml b/changelogs/unreleased/214044-add-empty-state-no-commit-result.yml
new file mode 100644
index 00000000000..60bac0b0326
--- /dev/null
+++ b/changelogs/unreleased/214044-add-empty-state-no-commit-result.yml
@@ -0,0 +1,5 @@
+---
+title: Update empty state for no commits result
+merge_request: 48538
+author:
+type: changed
diff --git a/changelogs/unreleased/276417-replace-fa-exclamation-triangle-icons-with-gitlab-svg-warning-soli.yml b/changelogs/unreleased/276417-replace-fa-exclamation-triangle-icons-with-gitlab-svg-warning-soli.yml
new file mode 100644
index 00000000000..a2c5cd17431
--- /dev/null
+++ b/changelogs/unreleased/276417-replace-fa-exclamation-triangle-icons-with-gitlab-svg-warning-soli.yml
@@ -0,0 +1,5 @@
+---
+title: Replace fa-exclamation-triangle icons with GitLab SVG warning-solid icon
+merge_request: 47089
+author:
+type: changed
diff --git a/doc/administration/troubleshooting/log_parsing.md b/doc/administration/troubleshooting/log_parsing.md
index 84247164b52..144aa0f6d3b 100644
--- a/doc/administration/troubleshooting/log_parsing.md
+++ b/doc/administration/troubleshooting/log_parsing.md
@@ -143,16 +143,39 @@ jq 'select(."grpc.code" != null and ."grpc.code" != "OK")' current
 jq 'select(."grpc.time_ms" > 30000)' current
 ```
 
-#### Print top three projects by request volume and their three longest durations
+#### Print top ten projects by request volume and their three longest durations
 
 ```shell
-jq -s -r 'map(select(."grpc.request.glProjectPath" != null and ."grpc.request.glProjectPath" != "" and ."grpc.time_ms" != null)) | group_by(."grpc.request.glProjectPath") | sort_by(-length) | limit(3; .[]) | sort_by(-."grpc.time_ms") | "CT: \(length)\tPROJECT: \(.[0]."grpc.request.glProjectPath")\tDURS: \(.[0]."grpc.time_ms"),  \(.[1]."grpc.time_ms"),  \(.[2]."grpc.time_ms")"' current
+jq --raw-output --slurp '
+  map(
+    select(
+      ."grpc.request.glProjectPath" != null
+      and ."grpc.request.glProjectPath" != ""
+      and ."grpc.time_ms" != null
+    )
+  )
+  | group_by(."grpc.request.glProjectPath")
+  | sort_by(-length)
+  | limit(10; .[])
+  | sort_by(-."grpc.time_ms")
+  | [
+      length,
+      .[0]."grpc.time_ms",
+      .[1]."grpc.time_ms",
+      .[2]."grpc.time_ms",
+      .[0]."grpc.request.glProjectPath"
+    ]
+  | @sh' /var/log/gitlab/gitaly/current \
+| awk 'BEGIN { printf "%7s %10s %10s %10s\t%s\n", "CT", "MAX DURS", "", "", "PROJECT" }
+  { printf "%7u %7u ms, %7u ms, %7u ms\t%s\n", $1, $2, $3, $4, $5 }'
 ```
 
 **Example output**
 
 ```plaintext
-CT: 635 PROJECT: groupA/project1     DURS: 4292.269,  4228.853,  2885.548
-CT: 462 PROJECT: groupB/project5     DURS: 4368.981,  3623.553,  361.399
-CT: 455 PROJECT: groupC/project7     DURS: 387.295,  381.874,  373.988
+   CT    MAX DURS                              PROJECT
+  206    4898 ms,    1101 ms,    1032 ms      'groupD/project4'
+  109    1420 ms,     962 ms,     875 ms      'groupEF/project56'
+  663     106 ms,      96 ms,      94 ms      'groupABC/project123'
+  ...
 ```
diff --git a/doc/ci/yaml/gitlab_ci_yaml.md b/doc/ci/yaml/gitlab_ci_yaml.md
index 54c9cee0ceb..602e02dbe6b 100644
--- a/doc/ci/yaml/gitlab_ci_yaml.md
+++ b/doc/ci/yaml/gitlab_ci_yaml.md
@@ -8,62 +8,81 @@ type: reference
 # The .gitlab-ci.yml file
 <!-- markdownlint-enable MD044 -->
 
-To use GitLab CI/CD, you need an application codebase hosted in a
-Git repository, and for your build, test, and deployment
-scripts to be specified in a file called [`.gitlab-ci.yml`](README.md),
-located in the root path of your repository.
+To use GitLab CI/CD, you need:
 
-In this file, you can define the scripts you want to run, define include and
-cache dependencies, choose commands you want to run in sequence
-and those you want to run in parallel, define where you want to
-deploy your app, and specify whether you want to run the scripts automatically
-or trigger any of them manually. After you're familiar with
-GitLab CI/CD you can add more advanced steps into the configuration file.
+- Application code hosted in a Git repository.
+- A file called [`.gitlab-ci.yml`](README.md) in the root of your repository, which
+  contains the CI/CD configuration.
 
-To add scripts to that file, you need to organize them in a
-sequence that suits your application and are in accordance with
-the tests you wish to perform. To visualize the process, imagine
-that all the scripts you add to the configuration file are the
-same as the commands you run on a terminal on your computer.
+In the `.gitlab-ci.yml` file, you can define:
 
-After you've added your `.gitlab-ci.yml` configuration file to your
-repository, GitLab detects it and run your scripts with the
-tool called [GitLab Runner](https://docs.gitlab.com/runner/), which
-works similarly to your terminal.
+- The scripts you want to run.
+- Other configuration files and templates you want to include.
+- Dependencies and caches.
+- The commands you want to run in sequence and those you want to run in parallel.
+- The location to deploy your application to.
+- Whether you want to run the scripts automatically or trigger any of them manually.
 
-The scripts are grouped into **jobs**, and together they compose
-a **pipeline**. A minimalist example of `.gitlab-ci.yml` file
-could contain:
+The scripts are grouped into **jobs**, and jobs run as part of a larger
+**pipeline**. You can group multiple independent jobs into **stages** that run in a defined order.
+
+You should organize your jobs in a sequence that suits your application and is in accordance with
+the tests you wish to perform. To [visualize](visualization.md) the process, imagine
+the scripts you add to jobs are the same as CLI commands you run on your computer.
+
+When you add a `.gitlab-ci.yml` file to your
+repository, GitLab detects it and an application called [GitLab Runner](https://docs.gitlab.com/runner/)
+runs the scripts defined in the jobs.
+
+A `.gitlab-ci.yml` file might contain:
 
 ```yaml
-before_script:
-  - apt-get install rubygems ruby-dev -y
+stages:
+  - build
+  - test
 
-run-test:
+build-code-job:
+  stage: build
   script:
-    - ruby --version
+    - echo "Check the ruby version, then build some Ruby project files:"
+    - ruby -v
+    - rake
+
+test-code-job1:
+  stage: test
+  script:
+    - echo "If the files are built successfully, test some files with one command:"
+    - rake test1
+
+test-code-job2:
+  stage: test
+  script:
+    - echo "If the files are built successfully, test other files with a different command:"
+    - rake test2
 ```
 
-The `before_script` attribute would install the dependencies
-for your app before running anything, and a  **job** called
-`run-test` would print the Ruby version of the current system.
-Both of them compose a **pipeline** triggered at every push
-to any branch of the repository.
+In this example, the `build-code-job` job in the `build` stage runs first. It outputs
+the Ruby version the job is using, then runs `rake` to build project files.
+If this job completes successfully, the two `test-code-job` jobs in the `test` stage start
+in parallel and run tests on the files.
 
-GitLab CI/CD not only executes the jobs you've
-set but also shows you what's happening during execution, as you
-would see in your terminal:
+The full pipeline in the example is composed of three jobs, grouped into two stages,
+`build` and `test`. The pipeline runs every time changes are pushed to any
+branch in the project.
+
+GitLab CI/CD not only executes the jobs but also shows you what's happening during execution,
+just as you would see in your terminal:
 
 ![job running](img/job_running.png)
 
 You create the strategy for your app and GitLab runs the pipeline
-for you according to what you've defined. Your pipeline status is also
+according to what you've defined. Your pipeline status is also
 displayed by GitLab:
 
 ![pipeline status](img/pipeline_status.png)
 
-At the end, if anything goes wrong, you can easily
-[roll back](../environments/index.md#retrying-and-rolling-back) all the changes:
+If anything goes wrong, you can
+[roll back](../environments/index.md#retrying-and-rolling-back) the changes:
 
 ![rollback button](img/rollback.png)
 
diff --git a/qa/qa/page/base.rb b/qa/qa/page/base.rb
index ce4eac7fbc4..00b48dc7fe9 100644
--- a/qa/qa/page/base.rb
+++ b/qa/qa/page/base.rb
@@ -228,7 +228,7 @@ module QA
       def finished_loading_block?
         wait_for_requests
 
-        has_no_css?('.fa-spinner.block-loading', wait: Capybara.default_max_wait_time)
+        has_no_css?('.gl-spinner', wait: Capybara.default_max_wait_time)
       end
 
       def has_loaded_all_images?
diff --git a/qa/qa/page/project/fork/new.rb b/qa/qa/page/project/fork/new.rb
index e2f2e9330dd..bbdd4748f5c 100644
--- a/qa/qa/page/project/fork/new.rb
+++ b/qa/qa/page/project/fork/new.rb
@@ -9,9 +9,17 @@ module QA
             element :fork_namespace_button
           end
 
+          view 'app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue' do
+            element :fork_groups_list_search_field
+          end
+
           def choose_namespace(namespace = Runtime::Namespace.path)
             click_element(:fork_namespace_button, name: namespace)
           end
+
+          def search_for_group(group_name)
+            find_element(:fork_groups_list_search_field).set(group_name)
+          end
         end
       end
     end
diff --git a/qa/qa/resource/sandbox.rb b/qa/qa/resource/sandbox.rb
index b351d92092f..376600b727a 100644
--- a/qa/qa/resource/sandbox.rb
+++ b/qa/qa/resource/sandbox.rb
@@ -76,6 +76,19 @@ module QA
           visibility: 'public'
         }
       end
+
+      def api_put_path
+        "/groups/#{id}"
+      end
+
+      def update_group_setting(group_setting:, value:)
+        put_body = { "#{group_setting}": value }
+        response = put Runtime::API::Request.new(api_client, api_put_path).url, put_body
+
+        unless response.code == HTTP_STATUS_OK
+          raise ResourceUpdateFailedError, "Could not update #{group_setting} to #{value}. Request returned (#{response.code}): `#{response}`."
+        end
+      end
     end
   end
 end
diff --git a/qa/qa/support/wait_for_requests.rb b/qa/qa/support/wait_for_requests.rb
index ebc473a7d86..5109f51d4d7 100644
--- a/qa/qa/support/wait_for_requests.rb
+++ b/qa/qa/support/wait_for_requests.rb
@@ -25,7 +25,7 @@ module QA
         # https://gitlab.com/groups/gitlab-org/-/epics/956
         # retry_on_exception added here due to `StaleElementReferenceError`. See: https://gitlab.com/gitlab-org/gitlab/-/issues/232485
         Support::Retrier.retry_on_exception do
-          Capybara.page.has_no_css?('.gl-spinner, .fa-spinner, .spinner', wait: wait)
+          Capybara.page.has_no_css?('.gl-spinner', wait: wait)
         end
       end
     end
diff --git a/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb b/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
index ba504624823..91a7753fe6d 100644
--- a/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
+++ b/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
@@ -19,7 +19,7 @@ RSpec.describe "User interacts with deploy keys", :js do
 
         click_button("Enable")
 
-        expect(page).not_to have_selector(".fa-spinner")
+        expect(page).not_to have_selector(".gl-spinner")
         expect(current_path).to eq(project_settings_repository_path(project))
 
         find(".js-deployKeys-tab-enabled_keys").click
diff --git a/spec/frontend/fixtures/static/create_item_dropdown.html b/spec/frontend/fixtures/static/create_item_dropdown.html
index d2d38370092..aac7d3397ce 100644
--- a/spec/frontend/fixtures/static/create_item_dropdown.html
+++ b/spec/frontend/fixtures/static/create_item_dropdown.html
@@ -1,11 +1,42 @@
 <div class="js-create-item-dropdown-fixture-root">
-<input name="variable[environment]" type="hidden">
-<div class="dropdown "><button class="dropdown-menu-toggle js-dropdown-menu-toggle" type="button" data-toggle="dropdown"><span class="dropdown-toggle-text ">some label</span><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i></button><div class="dropdown-menu dropdown-select dropdown-menu-selectable"><div class="dropdown-input"><input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i><i aria-hidden="true" data-hidden="true" role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i></div><div class="dropdown-content js-dropdown-content"></div><div class="dropdown-footer"><ul class="dropdown-footer-list">
-<li>
-<button class="dropdown-create-new-item-button js-dropdown-create-new-item">
-Create wildcard
-<code></code>
-</button>
-</li>
-</ul>
-</div><div class="dropdown-loading"><i aria-hidden="true" data-hidden="true" class="fa fa-spinner fa-spin"></i></div></div></div></div>
+  <input name="variable[environment]" type="hidden" />
+  <div class="dropdown ">
+    <button
+      class="dropdown-menu-toggle js-dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+    >
+      <span class="dropdown-toggle-text ">some label</span
+      ><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-input">
+        <input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i
+          aria-hidden="true"
+          data-hidden="true"
+          class="fa fa-search dropdown-input-search"
+        ></i
+        ><i
+          aria-hidden="true"
+          data-hidden="true"
+          role="button"
+          class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+        ></i>
+      </div>
+      <div class="dropdown-content js-dropdown-content"></div>
+      <div class="dropdown-footer">
+        <ul class="dropdown-footer-list">
+          <li>
+            <button class="dropdown-create-new-item-button js-dropdown-create-new-item">
+              Create wildcard
+              <code></code>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="dropdown-loading">
+        <span aria-hidden="true" data-hidden="true" class="gl-spinner"></span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/spec/frontend/fixtures/static/deprecated_jquery_dropdown.html b/spec/frontend/fixtures/static/deprecated_jquery_dropdown.html
index 3db9bafcb9f..41e7170b5c6 100644
--- a/spec/frontend/fixtures/static/deprecated_jquery_dropdown.html
+++ b/spec/frontend/fixtures/static/deprecated_jquery_dropdown.html
@@ -32,7 +32,7 @@
       </div>
       <div class="dropdown-content"></div>
       <div class="dropdown-loading">
-        <i class="fa fa-spinner fa-spin"></i>
+        <span class="gl-spinner"></span>
       </div>
     </div>
   </div>
diff --git a/spec/frontend/fixtures/static/mini_dropdown_graph.html b/spec/frontend/fixtures/static/mini_dropdown_graph.html
index cb55698b709..cde811d4f52 100644
--- a/spec/frontend/fixtures/static/mini_dropdown_graph.html
+++ b/spec/frontend/fixtures/static/mini_dropdown_graph.html
@@ -7,7 +7,7 @@
       <ul></ul>
     </li>
     <li class="js-builds-dropdown-loading hidden">
-      <span class="fa fa-spinner"></span>
+      <span class="gl-spinner"></span>
     </li>
   </ul>
 </div>
diff --git a/spec/frontend/fixtures/static/project_select_combo_button.html b/spec/frontend/fixtures/static/project_select_combo_button.html
index 50c826051c0..f13f9075706 100644
--- a/spec/frontend/fixtures/static/project_select_combo_button.html
+++ b/spec/frontend/fixtures/static/project_select_combo_button.html
@@ -1,9 +1,9 @@
 <div class="project-item-select-holder">
-<input class="project-item-select" data-group-id="12345" data-relative-path="issues/new">
-<a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
-<i class="fa fa-spinner spin"></i>
-</a>
-<a class="new-project-item-select-button">
-<i class="fa fa-caret-down"></i>
-</a>
+  <input class="project-item-select" data-group-id="12345" data-relative-path="issues/new" />
+  <a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
+    <span class="gl-spinner"></span>
+  </a>
+  <a class="new-project-item-select-button">
+    <i class="fa fa-caret-down"></i>
+  </a>
 </div>
diff --git a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js b/spec/frontend/pipelines/graph/graph_component_legacy_spec.js
index 8d1905cc441..4b34c260b91 100644
--- a/spec/frontend/pipelines/graph/graph_component_legacy_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_legacy_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { setHTMLFixture } from 'helpers/fixtures';
 import PipelineStore from '~/pipelines/stores/pipeline_store';
 import GraphComponentLegacy from '~/pipelines/components/graph/graph_component_legacy.vue';
@@ -42,7 +43,7 @@ describe('graph component', () => {
         },
       });
 
-      expect(wrapper.find('.gl-spinner').exists()).toBe(true);
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -85,7 +86,7 @@ describe('graph component', () => {
       });
 
       it('should not include the loading icon', () => {
-        expect(wrapper.find('.fa-spinner').exists()).toBe(false);
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
       });
 
       it('should include the stage column', () => {
diff --git a/spec/support/helpers/features/merge_request_helpers.rb b/spec/support/helpers/features/merge_request_helpers.rb
index 6bc3a15f20a..53896e1fe12 100644
--- a/spec/support/helpers/features/merge_request_helpers.rb
+++ b/spec/support/helpers/features/merge_request_helpers.rb
@@ -7,7 +7,8 @@ module Spec
         module MergeRequestHelpers
           def preload_view_requirements(merge_request, note)
             # This will load the status fields of the author of the note and merge request
-            # to avoid queries in when rendering the view being tested.
+            # to avoid queries when rendering the view being tested.
+            #
             merge_request.author.status
             note.author.status
           end
diff --git a/spec/views/projects/commits/_commit.html.haml_spec.rb b/spec/views/projects/commits/_commit.html.haml_spec.rb
index 898d3baae19..abbb3a168c3 100644
--- a/spec/views/projects/commits/_commit.html.haml_spec.rb
+++ b/spec/views/projects/commits/_commit.html.haml_spec.rb
@@ -22,7 +22,7 @@ RSpec.describe 'projects/commits/_commit.html.haml' do
       }
 
       within '.gpg-status-box' do
-        expect(page).not_to have_css('i.fa.fa-spinner.fa-spin')
+        expect(page).not_to have_css('.gl-spinner')
       end
     end
   end