diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index 309af368df9c4458f38ae41e44e5ecb375b2ebcb..53469ac89990e9a23dd85d065cc7d805d0ab9133 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -84,7 +84,7 @@ export default {
       />
     </a>
 
-    <gl-loading-icon v-show="isLoading" :inline="true" />
+    <gl-loading-icon v-show="isLoading" size="sm" :inline="true" />
 
     <div v-show="hasError" class="btn-group">
       <div class="btn btn-default btn-sm disabled">
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 7c4ff830a9d3f53af4a426736e13ee0dc1dbb486..7e605099655f6d9706957d6972c0b134705d671e 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -221,7 +221,7 @@ export default {
         :link-url="renderedLinkUrl"
       />
       <p v-show="isRendering">
-        <gl-loading-icon :inline="true" />
+        <gl-loading-icon size="sm" :inline="true" />
       </p>
       <p v-show="!renderedBadge && !isRendering" class="disabled-content">
         {{ s__('Badges|No image to preview') }}
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index fda51c98e2c9e724161d4e9b34c31a37ec2e97a8..d8525c15087bababf02c99eb56097bc437a8ae21 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -73,7 +73,7 @@ export default {
           data-testid="delete-badge"
           @click="updateBadgeInModal(badge)"
         />
-        <gl-loading-icon v-show="badge.isDeleting" :inline="true" />
+        <gl-loading-icon v-show="badge.isDeleting" size="sm" :inline="true" />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/boards/components/board_blocked_icon.vue b/app/assets/javascripts/boards/components/board_blocked_icon.vue
index ac0914bfc39777e4e283745f269f4c19ff68a9a6..b81edb4dfe6070215a6f2ae8a1bc80dfa54f88f3 100644
--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue
@@ -163,7 +163,7 @@ export default {
         ><span data-testid="popover-title">{{ blockedLabel }}</span></template
       >
       <template v-if="loading">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
         <p class="gl-mt-4 gl-mb-0 gl-font-small">{{ loadingMessage }}</p>
       </template>
       <template v-else>
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index be2d570ba099811b4d26e021cdace99c07a67be2..8dca6be853f8a1c61ea22989d62131d355c26749 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -242,7 +242,7 @@ export default {
       :aria-label="$options.i18n.loading"
       data-testid="board_list_loading"
     >
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
     </div>
     <board-new-issue v-if="issueCreateFormVisible" :list="list" />
     <board-new-epic v-if="epicCreateFormVisible" :list="list" />
@@ -273,6 +273,7 @@ export default {
         <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
           <gl-loading-icon
             v-if="loadingMore"
+            size="sm"
             :label="$options.i18n.loadingMoreboardItems"
             data-testid="count-loading-icon"
           />
diff --git a/app/assets/javascripts/boards/components/board_list_deprecated.vue b/app/assets/javascripts/boards/components/board_list_deprecated.vue
index 9b3e7e1547d9845fa15bc0c6cc6f738177a461e1..fabaf7a85f5adb05d4862477fe9b05e9890efb94 100644
--- a/app/assets/javascripts/boards/components/board_list_deprecated.vue
+++ b/app/assets/javascripts/boards/components/board_list_deprecated.vue
@@ -429,7 +429,7 @@ export default {
     data-qa-selector="board_list_cards_area"
   >
     <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
     </div>
     <board-new-issue v-if="list.type !== 'closed' && showIssueForm" :list="list" />
     <ul
@@ -450,7 +450,7 @@ export default {
         :disabled="disabled"
       />
       <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
-        <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
+        <gl-loading-icon v-show="list.loadingMore" size="sm" label="Loading more issues" />
         <span v-if="list.issues.length === list.issuesSize">{{ __('Showing all issues') }}</span>
         <span v-else>{{ paginatedIssueText }}</span>
       </li>
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 5124467136e09e1d444b51d6f0e76bde42fd02d2..980279172217881c4a3113f2dd9c2497f0ccc33d 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -327,7 +327,7 @@ export default {
           :class="scrollFadeClass"
         ></div>
 
-        <gl-loading-icon v-if="loading" />
+        <gl-loading-icon v-if="loading" size="sm" />
 
         <div v-if="canAdminBoard">
           <gl-dropdown-divider />
diff --git a/app/assets/javascripts/boards/components/boards_selector_deprecated.vue b/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
index 85c7b27336bb16825ed71cd0ceb61bee14769541..c1536dff2c609afea144abfb53aee898aea1646f 100644
--- a/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
+++ b/app/assets/javascripts/boards/components/boards_selector_deprecated.vue
@@ -316,7 +316,7 @@ export default {
           :class="scrollFadeClass"
         ></div>
 
-        <gl-loading-icon v-if="loading" />
+        <gl-loading-icon v-if="loading" size="sm" />
 
         <div v-if="canAdminBoard">
           <gl-dropdown-divider />
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index 77b6af77652e4ca0d1de3425ae67a123ed87390c..1412411c2756e03b121eeef3e576e4b937e951cb 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -126,7 +126,7 @@ export default {
         v-show="groupProjectsFlags.isLoading"
         data-testid="dropdown-text-loading-icon"
       >
-        <gl-loading-icon class="gl-mx-auto" />
+        <gl-loading-icon class="gl-mx-auto" size="sm" />
       </gl-dropdown-text>
       <gl-dropdown-text
         v-if="isFetchResultEmpty && !groupProjectsFlags.isLoading"
diff --git a/app/assets/javascripts/boards/components/project_select_deprecated.vue b/app/assets/javascripts/boards/components/project_select_deprecated.vue
index afe161d9c54c53c9064d28d4a851b42ac5b2716a..fc95ba0461de36d9ee1b0a6b0c6b2d30c2e6288d 100644
--- a/app/assets/javascripts/boards/components/project_select_deprecated.vue
+++ b/app/assets/javascripts/boards/components/project_select_deprecated.vue
@@ -136,7 +136,7 @@ export default {
         {{ project.namespacedName }}
       </gl-dropdown-item>
       <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-        <gl-loading-icon class="gl-mx-auto" />
+        <gl-loading-icon class="gl-mx-auto" size="sm" />
       </gl-dropdown-text>
       <gl-dropdown-text v-if="isFetchResultEmpty && !isFetching" data-testid="empty-result-message">
         <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span>
diff --git a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
index 352a25ef6d9869e81b0d60cafdaa37b816bc131e..84802650dad978bcca440f3b05c4e7cd67c5b275 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_editable_item.vue
@@ -93,7 +93,7 @@ export default {
         <slot name="title">
           <span data-testid="title">{{ title }}</span>
         </slot>
-        <gl-loading-icon v-if="loading" inline class="gl-ml-2" />
+        <gl-loading-icon v-if="loading" size="sm" inline class="gl-ml-2" />
       </span>
       <gl-button
         v-if="canUpdate"
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
index 6b18455bfcc750faa55fd124acd32fcae5d1997c..23c477bfbfddab7c09c01a189e6acef2a4b07985 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
@@ -95,7 +95,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
index b6f0bdbf01d84223595b1781a8b2ecb16ca8723c..aba6dd4b4930005da377e75183b7bd7d64c27257 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
@@ -160,7 +160,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
index daab42c7e603a3f072fba1d42e5adf77dc10bc4d..027ce74753e59ca89287e81e9c5c040863dfd63f 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
@@ -84,7 +84,7 @@ export default {
             </li>
           </ul>
         </div>
-        <div class="dropdown-loading"><gl-loading-icon /></div>
+        <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
       </div>
     </div>
     <span
diff --git a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
index 0aae63e16485ef35b481eee8ddeaf7b134007b92..411e482b0ce0ec9e2a767658c5b5f81ad4c97304 100644
--- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
+++ b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue
@@ -218,7 +218,7 @@ export default {
         @input="debouncedValidateQuery"
       />
       <span v-if="queryValidateInFlight" class="form-text text-muted">
-        <gl-loading-icon :inline="true" class="mr-1 align-middle" />
+        <gl-loading-icon size="sm" :inline="true" class="mr-1 align-middle" />
         {{ s__('Metrics|Validating query') }}
       </span>
       <slot v-if="!queryValidateInFlight" name="valid-feedback">
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index b1c37b0687fa2e851e2ccfe0eb93aff7ecaf7171..78ba586ce37e8466a01a9334ea4ebd0933cb868c 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -221,7 +221,7 @@ export default {
             @click.stop="toggleResolvedStatus"
           >
             <gl-icon v-if="!isResolving" :name="resolveIconName" data-testid="resolve-icon" />
-            <gl-loading-icon v-else inline />
+            <gl-loading-icon v-else size="sm" inline />
           </button>
         </template>
         <template v-if="discussion.resolved" #resolved-status>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 5cf547c1423c71a0e5dbed226c155cc0ddf100a5..67cb0e6925b802d3c15afda17c1d64d7dff4e8d9 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -365,6 +365,7 @@ export default {
       >
         <gl-loading-icon
           v-if="showLoadingIcon"
+          size="sm"
           class="diff-content loading gl-my-0 gl-pt-3"
           data-testid="loader-icon"
         />
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index bc59038e65e828226ccff2da56b04fb3e86d8022..150aeb95dc603f7604f25dde094bd2094c831f24 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -467,7 +467,7 @@ export default {
               :disabled="diffFile.isLoadingFullFile"
               @click="toggleFullDiff(diffFile.file_path)"
             >
-              <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
+              <gl-loading-icon v-if="diffFile.isLoadingFullFile" size="sm" inline />
               {{ expandDiffToFullFileTitle }}
             </gl-dropdown-item>
           </template>
diff --git a/app/assets/javascripts/environments/components/deploy_board.vue b/app/assets/javascripts/environments/components/deploy_board.vue
index 217cea051b71bf23d8ee5ccf25c397b1c4ca71b6..c642a07fd1e4a75ae8b5b7a8a8053fbd8cd11c29 100644
--- a/app/assets/javascripts/environments/components/deploy_board.vue
+++ b/app/assets/javascripts/environments/components/deploy_board.vue
@@ -111,7 +111,7 @@ export default {
 </script>
 <template>
   <div class="js-deploy-board deploy-board">
-    <gl-loading-icon v-if="isLoading" class="loading-icon" />
+    <gl-loading-icon v-if="isLoading" size="sm" class="loading-icon" />
     <template v-else>
       <div v-if="canRenderDeployBoard" class="deploy-board-information gl-p-5">
         <div class="deploy-board-information gl-w-full">
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 542b8c9219dbb000e719f9f259be0e9fe2a190ba..2d98f00433a1ce239778d13e4be7d5e7ca63808e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -80,7 +80,7 @@ export default {
     <template #button-content>
       <gl-icon name="play" />
       <gl-icon name="chevron-down" />
-      <gl-loading-icon v-if="isLoading" />
+      <gl-loading-icon v-if="isLoading" size="sm" />
     </template>
     <gl-dropdown-item
       v-for="(action, i) in actions"
diff --git a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
index 77e40039b4324992d4f5ca29bddd397bf5456001..d86e13ce7229728aa1a31acb3c61aadef63d5c9a 100644
--- a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
+++ b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue
@@ -196,6 +196,7 @@ export default {
         />
         <gl-loading-icon
           v-if="isRotating"
+          size="sm"
           class="gl-absolute gl-align-self-center gl-right-5 gl-mr-7"
         />
 
diff --git a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
index c59e3178b09baa156e7a75533f2f651f8a4dd1ba..5575c6567b54367f0d238722b2a3fbe596a342c6 100644
--- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
+++ b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue
@@ -80,7 +80,7 @@ export default {
       @focus="fetchEnvironments"
       @keyup="fetchEnvironments"
     />
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <gl-dropdown-item
       v-for="environment in results"
       v-else-if="results.length"
diff --git a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
index 45fc37da747ddbe8e76ece0a7cef240538465d7d..9dbffe75f6b6e55e11542a139a3f0f065e04c955 100644
--- a/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
+++ b/app/assets/javascripts/feature_flags/components/strategies/gitlab_user_list.vue
@@ -76,7 +76,7 @@ export default {
           @focus="fetchUserLists"
           @keyup="fetchUserLists"
         />
-        <gl-loading-icon v-if="isLoading" />
+        <gl-loading-icon v-if="isLoading" size="sm" />
         <gl-dropdown-item
           v-for="list in userLists"
           :key="list.id"
diff --git a/app/assets/javascripts/group_settings/components/shared_runners_form.vue b/app/assets/javascripts/group_settings/components/shared_runners_form.vue
index a1d706f0f663782dfa48140878f14c48acacc969..f61d96b3dfdba22690fd3cde1abec317388c440e 100644
--- a/app/assets/javascripts/group_settings/components/shared_runners_form.vue
+++ b/app/assets/javascripts/group_settings/components/shared_runners_form.vue
@@ -101,7 +101,7 @@ export default {
 
     <h4 class="gl-display-flex gl-align-items-center">
       {{ __('Set up shared runner availability') }}
-      <gl-loading-icon v-if="isLoading" class="gl-ml-3" inline />
+      <gl-loading-icon v-if="isLoading" class="gl-ml-3" size="sm" inline />
     </h4>
 
     <section class="gl-mt-5">
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index d3a52f9f0cfa132518f01f471a0eeb4bf8c81242..2b75d10f65988bba0195a54bf5668f13b4d96f6f 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -57,6 +57,6 @@ export default {
     @primaryAction="doAction"
   >
     <span v-html="message.text"></span>
-    <gl-loading-icon v-show="isLoading" inline class="vertical-align-middle ml-1" />
+    <gl-loading-icon v-show="isLoading" size="sm" inline class="vertical-align-middle ml-1" />
   </gl-alert>
 </template>
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 6c7f084c164fc615801a1a6befd64c532bd1d9f9..938385f0b814502c022c638113f2f5c99774ef72 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -79,7 +79,7 @@ export default {
       <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0">
-      <gl-loading-icon v-if="showLoadingIcon" />
+      <gl-loading-icon v-if="showLoadingIcon" size="sm" />
       <template v-else>
         <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" />
       </template>
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index 4d35e946d8963d2254f27cd798c4f945012b27aa..838c363a6a3113ed732c56bc3e5e9846eb98419a 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -126,7 +126,11 @@ export default {
         class="ide-navigator-location form-control bg-white"
         readonly
       />
-      <gl-loading-icon v-if="loading" class="position-absolute ide-preview-loading-icon" />
+      <gl-loading-icon
+        v-if="loading"
+        size="sm"
+        class="position-absolute ide-preview-loading-icon"
+      />
     </div>
   </header>
 </template>
diff --git a/app/assets/javascripts/ide/components/terminal/terminal.vue b/app/assets/javascripts/ide/components/terminal/terminal.vue
index 08fb2f5e5a07a5033f6143b7eb3dc31c87969770..c91a98c9527971a04ad2c55b10d48866f04b2adb 100644
--- a/app/assets/javascripts/ide/components/terminal/terminal.vue
+++ b/app/assets/javascripts/ide/components/terminal/terminal.vue
@@ -93,7 +93,7 @@ export default {
   <div class="d-flex flex-column flex-fill min-height-0 pr-3">
     <div class="top-bar d-flex border-left-0 align-items-center">
       <div v-if="loadingText" data-qa-selector="loading_container">
-        <gl-loading-icon :inline="true" />
+        <gl-loading-icon size="sm" :inline="true" />
         <span>{{ loadingText }}</span>
       </div>
       <terminal-controls
diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue
index e7816f6d1877817f9f9a00776c41d3d797e58e74..1b6e365fdb24ec51d6eb6d1eecf6acf28aec09a1 100644
--- a/app/assets/javascripts/jira_import/components/jira_import_form.vue
+++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue
@@ -310,7 +310,7 @@ export default {
           >
             <gl-search-box-by-type v-model.trim="searchTerm" />
 
-            <gl-loading-icon v-if="isFetching" />
+            <gl-loading-icon v-if="isFetching" size="sm" />
 
             <gl-dropdown-item
               v-for="user in users"
@@ -328,7 +328,7 @@ export default {
         </template>
       </gl-table>
 
-      <gl-loading-icon v-if="isInitialLoadingState" />
+      <gl-loading-icon v-if="isInitialLoadingState" size="sm" />
 
       <gl-button
         v-if="hasMoreUsers"
diff --git a/app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue b/app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue
index f8ce704942bf29676ffcd6b9cd7b78f71ecf30d7..4e672c1d121717e9cced4a3b72127a49b0a083ba 100644
--- a/app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue
+++ b/app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue
@@ -20,7 +20,7 @@ export default {
   <gl-filtered-search-token :config="config" v-bind="{ ...$attrs }" v-on="$listeners">
     <template #suggestions>
       <div class="m-1">
-        <gl-loading-icon v-if="config.loading" />
+        <gl-loading-icon v-if="config.loading" size="sm" />
         <div v-else class="py-1 px-2 text-muted">
           {{ config.noOptionsText }}
         </div>
diff --git a/app/assets/javascripts/milestones/components/milestone_combobox.vue b/app/assets/javascripts/milestones/components/milestone_combobox.vue
index 7cdfdba6f27c690c271f0d44a0129f76b144eb80..e84990152100d9f340113bc2f325bdc2c3b71e45 100644
--- a/app/assets/javascripts/milestones/components/milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/components/milestone_combobox.vue
@@ -202,7 +202,7 @@ export default {
     <gl-dropdown-divider />
 
     <template v-if="isLoading">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
       <gl-dropdown-divider />
     </template>
     <template v-else-if="showNoResults">
diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
index c18c13f25747e856de7353ad56c795dec26ebcc7..e5d7e2ea2eb30fc285412f23e45decbde96c3b59 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget.vue
@@ -227,7 +227,7 @@ export default {
 
 <template>
   <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
-    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" />
+    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" size="sm" />
     <span v-else-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
       errorMessage
     }}</span>
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index 05b5b760f0af0786431b6743fe1b1ad21a6b16c9..f53f78a3f13782c786d06518502961b764c735d3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -197,7 +197,7 @@ export default {
           <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
           <gl-search-box-by-type @input="debouncedEnvironmentsSearch" />
 
-          <gl-loading-icon v-if="environmentsLoading" :inline="true" />
+          <gl-loading-icon v-if="environmentsLoading" size="sm" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
             <gl-dropdown-item
               v-for="environment in filteredEnvironments"
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
index 202d18ac721b92785f0dc44eb94ab9ac68b2e143..b786d015f3b3b9b1df4b0c40ccdc6164d31472cf 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -389,7 +389,7 @@ export default {
       />
       <div class="flex-grow-1"></div>
       <div v-if="graphDataIsLoading" class="mx-1 mt-1">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
       </div>
       <div
         v-if="isContextualMenuShown"
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
index 49d7e3a48a7bac9c77e4dbb56944b1ea00302476..fd07a41ec37d722b84dc736b8d441935305cf2f7 100644
--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
+++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue
@@ -88,7 +88,7 @@ export default {
       @change="formChange"
     />
     <template #modal-ok>
-      <gl-loading-icon v-if="loading" inline color="light" />
+      <gl-loading-icon v-if="loading" size="sm" inline color="light" />
       {{ okButtonText }}
     </template>
   </gl-modal>
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index ecb8ef4a0d0794c255c7587496535bc68c00b300..5b73fb4e10d70740e3817f6b8d613fc571dc00b8 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -61,7 +61,7 @@ export default {
   <div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <gl-loading-icon v-if="isLoading" name="loading" />
+      <gl-loading-icon v-if="isLoading" size="sm" name="loading" />
       <a
         data-testid="group-toggle-button"
         :aria-label="__('Toggle collapse')"
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 6932af61c69860542f8bb4d00c23d45920ad28aa..1a4a6c137a62e07a29a386e9e70a6070914af8d4 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -216,6 +216,7 @@ export default {
       <gl-loading-icon
         v-if="showSpinner"
         ref="spinner"
+        size="sm"
         class="editing-spinner"
         :label="__('Comment is being updated')"
       />
diff --git a/app/assets/javascripts/notifications/components/custom_notifications_modal.vue b/app/assets/javascripts/notifications/components/custom_notifications_modal.vue
index 7427e39f8fe1788116ff69009663331bc24b7f54..182948c39f4e73bbcf42393fe0e627d75e4ddb0c 100644
--- a/app/assets/javascripts/notifications/components/custom_notifications_modal.vue
+++ b/app/assets/javascripts/notifications/components/custom_notifications_modal.vue
@@ -132,7 +132,7 @@ export default {
                 @change="updateEvent($event, event)"
               >
                 <strong>{{ event.name }}</strong
-                ><gl-loading-icon v-if="event.loading" :inline="true" class="gl-ml-2" />
+                ><gl-loading-icon v-if="event.loading" size="sm" :inline="true" class="gl-ml-2" />
               </gl-form-checkbox>
             </gl-form-group>
           </template>
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
index 8771086279e2007f6a1ba3aa442b47ceaf52947f..e6e375655df163718fab040651fab93554b0aaa6 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
@@ -475,7 +475,11 @@ export default {
               >
             </gl-sprintf>
           </gl-alert>
-          <gl-loading-icon v-if="isContentEditorLoading" class="bordered-box gl-w-full gl-py-6" />
+          <gl-loading-icon
+            v-if="isContentEditorLoading"
+            size="sm"
+            class="bordered-box gl-w-full gl-py-6"
+          />
           <content-editor v-else :content-editor="contentEditor" />
           <input id="wiki_content" v-model.trim="content" type="hidden" name="wiki[content]" />
         </div>
diff --git a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue
index d1534655a00da321c9468d709884e9bd9e68447c..8bffd893473c3b25f62ba5cdbdf20cc026e741de 100644
--- a/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue
+++ b/app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue
@@ -87,7 +87,7 @@ export default {
 <template>
   <div>
     <template v-if="isLoading">
-      <gl-loading-icon inline />
+      <gl-loading-icon size="sm" inline />
       {{ $options.i18n.loading }}
     </template>
 
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index b3c5af5418f8a34b274d424796e4988893e861d5..dd8a354511a3be999f61b09a7d7736e88113bf3d 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -161,7 +161,7 @@ export default {
           :size="24"
           css-classes="gl-top-0 gl-pr-2"
         />
-        <div v-else class="gl-pr-2"><gl-loading-icon inline /></div>
+        <div v-else class="gl-pr-2"><gl-loading-icon size="sm" inline /></div>
         <div class="gl-display-flex gl-flex-direction-column gl-w-13">
           <span class="gl-text-truncate" data-testid="downstream-title">
             {{ downstreamTitle }}
diff --git a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
index d19215e78951ca2c6f290867166f12f01bf1066e..efad43ddd4ff1d8e925509b54524504ddb94d027 100644
--- a/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue
@@ -99,7 +99,7 @@ export default {
     class="js-ci-action gl-ci-action-icon-container ci-action-icon-container ci-action-icon-wrapper gl-display-flex gl-align-items-center gl-justify-content-center"
     @click.stop="onClickAction"
   >
-    <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
+    <gl-loading-icon v-if="isLoading" size="sm" class="js-action-icon-loading" />
     <gl-icon v-else :name="actionIcon" class="gl-mr-0!" :aria-label="actionIcon" />
   </gl-button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
index d7bd2d731b1afc24108d6c5fc071b294d592a96a..5e18f636b52d52548d3ac80e955dcd503090c369 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_multi_actions.vue
@@ -97,7 +97,7 @@ export default {
       {{ $options.i18n.artifactsFetchErrorMessage }}
     </gl-alert>
 
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
 
     <gl-dropdown-item
       v-for="(artifact, i) in artifacts"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
index b433b078457fff092e3f3825098683c82683c5e6..7552ddb61dcce79d17b2d98cace2782591e4fd89 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
@@ -120,7 +120,7 @@ export default {
         <gl-icon :name="borderlessIcon" />
       </span>
     </template>
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <ul
       v-else
       class="js-builds-dropdown-list scrollable-menu"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
index 147fff521019fc7d72636f71d2f95ab44f69dae5..36629d9f1f13bf4b927a43f33b8f2e1dbf031655 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue
@@ -96,7 +96,7 @@ export default {
       {{ $options.i18n.artifactsFetchErrorMessage }}
     </gl-alert>
 
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
 
     <gl-alert v-else-if="!hasArtifacts" variant="info" :dismissible="false">
       {{ $options.i18n.noArtifacts }}
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
index 15ff7da35e1d8fd22535bc39baa49005418917c0..5409e68cdc46c24e43397da9881a4465a58ab7d5 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue
@@ -60,7 +60,7 @@ export default {
     @input="searchBranches"
   >
     <template #suggestions>
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="(branch, index) in branches"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
index af62c4927482edb895776980d2e72980affbccf3..afcdd63b6642190cc471e519f5dac0d516e2ec1e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue
@@ -55,7 +55,7 @@ export default {
 <template>
   <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" @input="searchTags">
     <template #suggestions>
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="(tag, index) in tags" :key="index" :value="tag">
           {{ tag }}
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
index bc661f37493ac6e790f201813a0d98c9a9e63e6d..33115d72b9c1e187cf5ff1dbdb71fd209b4d5a53 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
@@ -98,7 +98,7 @@ export default {
       }}</gl-filtered-search-suggestion>
       <gl-dropdown-divider />
 
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="user in users"
diff --git a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
index cc5bc703994a230fb5b635b044c77523618bfe81..52da8aaba4d8413bc9a49202e73af567a83ab2e4 100644
--- a/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
+++ b/app/assets/javascripts/projects/commit/components/branches_dropdown.vue
@@ -99,7 +99,7 @@ export default {
       {{ branch }}
     </gl-dropdown-item>
     <gl-dropdown-text v-show="isFetching" data-testid="dropdown-text-loading-icon">
-      <gl-loading-icon class="gl-mx-auto" />
+      <gl-loading-icon size="sm" class="gl-mx-auto" />
     </gl-dropdown-text>
     <gl-dropdown-text
       v-if="!filteredResults.length && !isFetching"
diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
index 3294a37c26ac78bbf8f837dbdd510ac7a63969d0..34d53e2de0cba75a7d7a7170d235b3fab7407211 100644
--- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
+++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
@@ -144,7 +144,7 @@ export default {
           </span>
         </template>
         <template v-else>
-          <gl-loading-icon :inline="true" />
+          <gl-loading-icon size="sm" :inline="true" />
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 
diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue
index 825a4a02b71e0a1b91d51036e545d01af9ce972e..40d9d77e69922f117eb6367d58025cb76b70d548 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue
@@ -102,7 +102,12 @@ export default {
         class="related-issues-loading-icon"
         data-qa-selector="related_issues_loading_placeholder"
       >
-        <gl-loading-icon ref="loadingIcon" label="Fetching linked issues" class="gl-mt-2" />
+        <gl-loading-icon
+          ref="loadingIcon"
+          size="sm"
+          label="Fetching linked issues"
+          class="gl-mt-2"
+        />
       </div>
       <ul ref="list" :class="{ 'content-list': !canReorder }" class="related-items-list">
         <li
diff --git a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
index ccb92d2aedc4ca579735b402a5611c9d496b29fc..6fb1d1ed365c6ee7fa32b27372e0f455141d0f79 100644
--- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
@@ -94,7 +94,7 @@ export default {
       </div>
       <div>
         <div v-if="isFetchingMergeRequests" class="qa-related-merge-requests-loading-icon">
-          <gl-loading-icon label="Fetching related merge requests" class="py-2" />
+          <gl-loading-icon size="sm" label="Fetching related merge requests" class="py-2" />
         </div>
         <ul v-else class="content-list related-items-list">
           <li v-for="mr in mergeRequests" :key="mr.id" class="list-item pt-0 pb-0">
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 462cf77a2783de81c50b8cf62320e5f86c6e7e30..b30d0769861cb195871659ce5f41c089046bda4a 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -150,7 +150,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" />
+    <gl-loading-icon v-if="isLoading" size="sm" />
     <div v-if="blobInfo && !isLoading" class="file-holder">
       <blob-header
         :blob="blobInfo"
diff --git a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
index 2e2aa052dd8f4b088e4bf404c3a48753ee1a7ddd..e166e44f5f4566cd989d6028127216416b054c4c 100644
--- a/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
+++ b/app/assets/javascripts/search/topbar/components/searchable_dropdown.vue
@@ -99,7 +99,7 @@ export default {
       <span class="dropdown-toggle-text gl-flex-grow-1 gl-text-truncate">
         {{ selectedItem[name] }}
       </span>
-      <gl-loading-icon v-if="loading" inline class="gl-mr-3" />
+      <gl-loading-icon v-if="loading" size="sm" inline class="gl-mr-3" />
       <gl-button
         v-if="!isSelected($options.ANY_OPTION)"
         v-gl-tooltip
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index adb573db652ab50c7eab46e5ddf103e30b2cf00d..4b3b22f6db3bd2ed46f3cdf8d174f84d908be7c2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -47,7 +47,7 @@ export default {
 <template>
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ assigneeTitle }}
-    <gl-loading-icon v-if="loading" inline class="align-bottom" />
+    <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index e85e416881cec995a11ebaa7b1e8259c63dd7a25..650aa603f18a057372b029677a9af9efd941719d 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -92,11 +92,11 @@ export default {
       @click="onClickCollapsedIcon"
     >
       <gl-icon name="users" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <span v-else data-testid="collapsed-count"> {{ participantCount }} </span>
     </div>
     <div v-if="showParticipantLabel" class="title hide-collapsed gl-mb-2">
-      <gl-loading-icon v-if="loading" :inline="true" />
+      <gl-loading-icon v-if="loading" size="sm" :inline="true" />
       {{ participantLabel }}
     </div>
     <div class="participants-list hide-collapsed">
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
index 88c0b18ccc7c9e31d98fe475437a4a45b0742d0c..295027186cc5580c5378e057a177ad02c883a0d9 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
@@ -35,7 +35,7 @@ export default {
 <template>
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ reviewerTitle }}
-    <gl-loading-icon v-if="loading" inline class="align-bottom" />
+    <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link float-right"
diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
index 592cfea5e3242046e9f1f1fefa451f333b23731f..fdf63c23552a483cdcda1940888b8ba27807c7d4 100644
--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
+++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue
@@ -181,7 +181,7 @@ export default {
         </gl-dropdown-item>
       </gl-dropdown>
 
-      <gl-loading-icon v-if="isUpdating" :inline="true" />
+      <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
 
       <severity-token v-else-if="!isDropdownShowing" :severity="selectedItem" />
     </div>
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 71866cb14ad4fa4af4bc3beaf50c2a694d7f0686..44fd1eac08df798216b810358381f1049279a94b 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -334,6 +334,7 @@ export default {
         <gl-dropdown-divider />
         <gl-loading-icon
           v-if="$apollo.queries.attributesList.loading"
+          size="sm"
           class="gl-py-4"
           data-testid="loading-icon-dropdown"
         />
diff --git a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
index 825d7ff584107f00cd48d593393103f2e805c8e4..7c496cc422ae54e908ed96be4c698416bf37e08d 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
@@ -117,9 +117,15 @@ export default {
         {{ title }}
       </span>
       <slot name="title-extra"></slot>
-      <gl-loading-icon v-if="loading || initialLoading" inline class="gl-ml-2 hide-collapsed" />
+      <gl-loading-icon
+        v-if="loading || initialLoading"
+        size="sm"
+        inline
+        class="gl-ml-2 hide-collapsed"
+      />
       <gl-loading-icon
         v-if="loading && isClassicSidebar"
+        size="sm"
         inline
         class="gl-mx-auto gl-my-0 hide-expanded"
       />
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index a72409142c9a3c0b14abf4c69e0bef593862181c..436f4f2b66d81dbcc2c64b8356c4f7ea1b1f3b32 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -196,7 +196,7 @@ export default {
         class="sidebar-collapsed-icon"
         @click="toggleSubscribed"
       >
-        <gl-loading-icon v-if="isLoading" class="sidebar-item-icon is-active" />
+        <gl-loading-icon v-if="isLoading" size="sm" class="sidebar-item-icon is-active" />
         <gl-icon v-else :name="notificationIcon" :size="16" class="sidebar-item-icon is-active" />
       </span>
       <div v-show="emailsDisabled" class="gl-mt-3 hide-collapsed gl-text-gray-500">
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 87ddbbf256a6540033d332659d206e73039b8084..9a9d03353dc60a3521492a83a3e55a3bb6999e78 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -200,7 +200,7 @@ export default {
     />
     <div class="hide-collapsed gl-line-height-20 gl-text-gray-900">
       {{ __('Time tracking') }}
-      <gl-loading-icon v-if="isTimeTrackingInfoLoading" inline />
+      <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline />
       <div
         v-if="!showHelpState"
         data-testid="helpButton"
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index f589e7555b371fb83f6de2a7d5bea93bffaec6c9..f7e76cc2b7f2240dd44f25ae7dfb56648a9a0e87 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -85,6 +85,6 @@ export default {
       :name="collapsedButtonIcon"
     />
     <span v-show="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
-    <gl-loading-icon v-show="isActionActive" :inline="true" />
+    <gl-loading-icon v-show="isActionActive" size="sm" :inline="true" />
   </button>
 </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index bf19b63650ef0565c6b373ad9b5f2f30dc138d2e..a8f95748e7ed6ee1e4b8503be4ba5dccb56ee697 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -274,7 +274,7 @@ export default {
           data-qa-selector="delete_snippet_button"
           @click="deleteSnippet"
         >
-          <gl-loading-icon v-if="isDeleting" inline />
+          <gl-loading-icon v-if="isDeleting" size="sm" inline />
           {{ __('Delete snippet') }}
         </gl-button>
       </template>
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
index 2577664a5e8410d248cecfec42830b579e136a34..d066834540f02a5f5051847f4930f0fd7be3db60 100644
--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/app/assets/javascripts/terraform/components/states_table.vue
@@ -137,7 +137,7 @@ export default {
 
         <div v-if="item.loadingLock" class="gl-mx-3">
           <p class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0">
-            <gl-loading-icon class="gl-pr-1" />
+            <gl-loading-icon size="sm" class="gl-pr-1" />
             {{ loadingLockText(item) }}
           </p>
         </div>
@@ -146,7 +146,7 @@ export default {
           <p
             class="gl-display-flex gl-justify-content-start gl-align-items-baseline gl-m-0 gl-text-red-500"
           >
-            <gl-loading-icon class="gl-pr-1" />
+            <gl-loading-icon size="sm" class="gl-pr-1" />
             {{ $options.i18n.removing }}
           </p>
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
index 410d2740e1d0669453f52ec2222dee1e4aea2393..bb1837399ed4ffa19fb28a5b335134f47872509e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue
@@ -136,7 +136,7 @@ export default {
 <template>
   <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
     <p v-if="shouldShowLoading" class="usage-info js-usage-info usage-info-loading">
-      <gl-loading-icon class="usage-info-load-spinner" />{{
+      <gl-loading-icon size="sm" class="usage-info-load-spinner" />{{
         s__('mrWidget|Loading deployment statistics')
       }}
     </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 33809b953ee65c80d26e20555e59ebf3311980b3..0ac98f6c9822a7b2017774793834da5a7ecda20d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -122,7 +122,7 @@ export default {
     </div>
     <div v-if="!isCollapsed" class="mr-widget-grouped-section">
       <div v-if="isLoadingExpanded" class="report-block-container">
-        <gl-loading-icon inline /> {{ __('Loading...') }}
+        <gl-loading-icon size="sm" inline /> {{ __('Loading...') }}
       </div>
       <smart-virtual-list
         v-else-if="fullData"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index a619ae9c351b5ff1d9188d3b49ea1c137fe51eb2..042c925d0f435809821adb2653a239a19cca12f9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -64,7 +64,7 @@ export default {
           :disabled="isLoading"
           @click="toggleCollapsed"
         >
-          <gl-loading-icon v-if="isLoading" />
+          <gl-loading-icon v-if="isLoading" size="sm" />
           <gl-icon v-else :name="arrowIconName" class="js-icon" />
         </button>
         <template v-if="isCollapsed">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 2c8245b0943a923dd0f87717f917ab92be45f6c0..f99b825ff301e9f9f0f877c2c6ed375efd8547bf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -177,7 +177,7 @@ export default {
             data-testid="cancelAutomaticMergeButton"
             @click.prevent="cancelAutomaticMerge"
           >
-            <gl-loading-icon v-if="isCancellingAutoMerge" inline class="gl-mr-1" />
+            <gl-loading-icon v-if="isCancellingAutoMerge" size="sm" inline class="gl-mr-1" />
             {{ cancelButtonText }}
           </a>
         </h4>
@@ -200,7 +200,7 @@ export default {
               data-testid="removeSourceBranchButton"
               @click.prevent="removeSourceBranch"
             >
-              <gl-loading-icon v-if="isRemovingSourceBranch" inline class="gl-mr-1" />
+              <gl-loading-icon v-if="isRemovingSourceBranch" size="sm" inline class="gl-mr-1" />
               {{ s__('mrWidget|Delete source branch') }}
             </a>
           </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 5f8630bf7b3e5585eb5c10640f5eb23507c0e3be..1a764d3d09149055c37717510c9f90459bc7de29 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -63,7 +63,7 @@ export default {
         size="small"
         @click="refreshWidget"
       >
-        <gl-loading-icon v-if="isRefreshing" :inline="true" />
+        <gl-loading-icon v-if="isRefreshing" size="sm" :inline="true" />
         {{ s__('mrWidget|Refresh') }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index dbd9dbf751358de7d25b2a6ef52abc940eedc0bd..963f1cf324f6c69f8f0eb30e8688c8fa23230932 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -208,7 +208,7 @@ export default {
           </gl-button>
         </p>
         <p v-if="shouldShowSourceBranchRemoving">
-          <gl-loading-icon :inline="true" />
+          <gl-loading-icon size="sm" :inline="true" />
           <span> {{ s__('mrWidget|The source branch is being deleted') }} </span>
         </p>
       </section>
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
index b7544a4a5d01d253f3bbd1c46259bcd5e58ef6af..c24318cb9ad99bc1ab3547eb6445404c6a00f904 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
@@ -204,7 +204,7 @@ export default {
         @click="$emit('toggle-sidebar')"
       >
         <gl-icon name="user" />
-        <gl-loading-icon v-if="isUpdating" />
+        <gl-loading-icon v-if="isUpdating" size="sm" />
       </div>
       <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
         <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
@@ -270,12 +270,12 @@ export default {
           <p v-else-if="userListEmpty" class="gl-mx-5 gl-my-4">
             {{ __('No Matching Results') }}
           </p>
-          <gl-loading-icon v-else />
+          <gl-loading-icon v-else size="sm" />
         </div>
       </gl-dropdown>
     </div>
 
-    <gl-loading-icon v-if="isUpdating" :inline="true" />
+    <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
     <div
       v-else-if="!isDropdownShowing"
       class="hide-collapsed value gl-m-0"
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
index ce90a759cee7a057a2ac96670d08008d4cec8594..eaa5fc5af0460370c2577cb30a1b5f13476e5e6c 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
@@ -81,7 +81,7 @@ export default {
     <template v-if="sidebarCollapsed">
       <div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">
         <gl-icon name="status" />
-        <gl-loading-icon v-if="isUpdating" />
+        <gl-loading-icon v-if="isUpdating" size="sm" />
       </div>
       <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
         <gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
@@ -120,7 +120,7 @@ export default {
         @handle-updating="handleUpdating"
       />
 
-      <gl-loading-icon v-if="isUpdating" :inline="true" />
+      <gl-loading-icon v-if="isUpdating" size="sm" :inline="true" />
       <p
         v-else-if="!isDropdownShowing"
         class="value gl-m-0"
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
index b3edd05b0ee92abf1bb53a26266dd1dcf23f970a..b786f7752dfa7bc19daee7efd49e7cd034238ab1 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue
@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div class="nothing-here-block">
-    <gl-loading-icon v-if="is($options.STATE_LOADING)" />
+    <gl-loading-icon v-if="is($options.STATE_LOADING)" size="sm" />
     <template v-else>
       <gl-alert
         v-show="is($options.STATE_ERRORED)"
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index a1c7c4dd1421a85cdb8f8a2c70a6130af5710edb..a512eb687b7bcc50f5fff71cac7976bc01e7d403 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -36,7 +36,7 @@ export default {
     data-toggle="dropdown"
     aria-expanded="false"
   >
-    <gl-loading-icon v-show="isLoading" :inline="true" />
+    <gl-loading-icon v-show="isLoading" size="sm" :inline="true" />
     <slot v-if="$slots.default"></slot>
     <span v-else class="dropdown-toggle-text"> {{ toggleText }} </span>
     <gl-icon
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 4244cab902a2c56c590ea65d2f98b0e45e3e22ce..2e7c10636a22c476f4f6591dfded1456fc29e3a9 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -85,7 +85,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-loading-icon v-if="loading" :inline="true" />
+    <gl-loading-icon v-if="loading" size="sm" :inline="true" />
     <gl-icon v-else-if="isSymlink" name="symlink" :size="size" use-deprecated-sizes />
     <svg v-else-if="!folder" :key="spriteHref" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index 1fc845dfd79c9e83b9633afbb72ab91a73cdc229..a4804525a538dbafa14830904f5ed7bb6720849c 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -189,7 +189,7 @@ export default {
         name="suggestions-list"
         :suggestions="preloadedSuggestions"
       ></slot>
-      <gl-loading-icon v-if="suggestionsLoading" />
+      <gl-loading-icon v-if="suggestionsLoading" size="sm" />
       <template v-else>
         <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
       </template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
index 694dcd95b5e618bd3b87787edd3ee93d06d090a2..5859fd10688b85fa6b8b03510ba0a272e9309647 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/branch_token.vue
@@ -97,7 +97,7 @@ export default {
         {{ branch.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultBranches.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="branch in branches"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
index 9ba7f3d1a1dc1ebda6c1394b9f895e132a455d6c..d186f46866ced46560a8417920ccaff266be86b6 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue
@@ -101,7 +101,7 @@ export default {
         {{ emoji.value }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultEmojis.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="emoji in emojis"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
index 5b05187955c80d761a1541e9fb84252746bf8f44..aa234cf86d9ad313888100dcfbc7e9097ce3fd5b 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
@@ -134,7 +134,7 @@ export default {
         {{ epic.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultEpics.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="epic in epics" :key="epic.id" :value="getValue(epic)">
           {{ epic.title }}
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
index 1526076332961286aa8437c069a9abb3ecdec10d..ba8b2421726111c7f75dc8fefc77e71a08c9a7fd 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
@@ -103,7 +103,7 @@ export default {
         {{ iteration.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultIterations.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="iteration in iterations"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
index 16738ae52c5a8018423d480c74cb40b3e16acbdb..66ad5ef5b4eec945daa2901e290f1bbf684a22a4 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue
@@ -102,7 +102,7 @@ export default {
         {{ milestone.text }}
       </gl-filtered-search-suggestion>
       <gl-dropdown-divider v-if="defaultMilestones.length" />
-      <gl-loading-icon v-if="loading" />
+      <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="milestone in milestones"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 5a5522acee85bcb8f49260f9f025cfe77e80c5eb..065d9b1b5dd1a6e17a64c747afe8a11c5b1d67e9 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -111,7 +111,7 @@ export default {
     </div>
     <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div>
     <div v-else-if="isApplying" class="d-flex align-items-center text-secondary">
-      <gl-loading-icon class="d-flex-center mr-2" />
+      <gl-loading-icon size="sm" class="d-flex-center mr-2" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
     <div v-else-if="canApply && isBatched" class="d-flex align-items-center">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 7393a8791b74e621ccdcfc308cf4e58a04e7b986..7112295fa57ee92eb13b6f92f3a309bb3286f007 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -82,7 +82,7 @@ export default {
         <span class="attaching-file-message"></span>
         <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>
-        <gl-loading-icon inline />
+        <gl-loading-icon size="sm" inline />
       </span>
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
index 580e1668f413a7ef096b6582d015f3703823e8f8..d55c93fd146b73b3f6fa35525bacf36702f33cda 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
@@ -194,7 +194,7 @@ export default {
       <template v-if="selectedPlatform">
         <h5>
           {{ $options.i18n.architecture }}
-          <gl-loading-icon v-if="$apollo.loading" inline />
+          <gl-loading-icon v-if="$apollo.loading" size="sm" inline />
         </h5>
 
         <gl-dropdown class="gl-mb-3" :text="selectedArchitectureName">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue b/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue
index bbc7e6e7a6e486d62aef6ccb4cb05cf36887225d..de125e92003af1f9c7a46ddc55f1f2c2151ae9d7 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue
@@ -81,7 +81,7 @@ export default {
         {{ templateText }}
       </span>
 
-      <gl-loading-icon v-if="isLoading" inline :label="loadingIconLabel" />
+      <gl-loading-icon v-if="isLoading" size="sm" inline :label="loadingIconLabel" />
       <clipboard-button v-else size="small" v-bind="clipboardProps" />
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 075681de3201d13655e528f457644099b315e3b8..4531fafbf7220c6d0e4a9cb19859322b839eec4e 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -104,7 +104,7 @@ export default {
     <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
     <div class="title">
       {{ label }}
-      <gl-loading-icon v-if="isLoading" :inline="true" />
+      <gl-loading-icon v-if="isLoading" size="sm" :inline="true" />
       <div class="float-right">
         <button
           v-if="editable && !editing"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue b/app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue
index 320e2048f1ccf78dd9cd195f551ad905c424d9da..12daaea87585e42d0d4ad1350d0eeeed99e22a01 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/issuable_move_dropdown.vue
@@ -148,7 +148,7 @@ export default {
       @hide="handleDropdownHide"
     >
       <template #button-content
-        ><gl-loading-icon v-if="moveInProgress" class="gl-mr-3" />{{
+        ><gl-loading-icon v-if="moveInProgress" size="sm" class="gl-mr-3" />{{
           dropdownButtonTitle
         }}</template
       >
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
index f8cc981ba3d6d6f64fca62a8ea87d6d9d05eff35..3ec33a653b84e81c9ff257a6b4521af95265428f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
@@ -108,7 +108,7 @@ export default {
         class="float-left d-flex align-items-center"
         @click="handleCreateClick"
       >
-        <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
+        <gl-loading-icon v-show="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
       <gl-button class="float-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
index 813de528c0b906965e999be47b413c036706b7b6..aad754e15b033a81d1b6bd5f99a6c02009c78ab1 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
@@ -26,7 +26,7 @@ export default {
   <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
-      <gl-loading-icon v-show="labelsSelectInProgress" inline />
+      <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
         variant="link"
         class="float-right gl-text-gray-900! gl-hover-text-blue-800! js-sidebar-dropdown-toggle"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
index a7f20fbe8518efdc6118700056c4f79e3b272485..4651e7a15764169b9a837bdf35649fc202ba87e3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
@@ -117,7 +117,7 @@ export default {
         data-testid="create-button"
         @click="createLabel"
       >
-        <gl-loading-icon v-if="labelCreateInProgress" :inline="true" class="mr-1" />
+        <gl-loading-icon v-if="labelCreateInProgress" size="sm" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
       <gl-button
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
index 5d1663bc1fd321f3d336e89b490e536a200c57a4..b6d14965cfae86584443261eaf5239155a57276f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_title.vue
@@ -26,7 +26,7 @@ export default {
   <div class="title hide-collapsed gl-mb-3">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
-      <gl-loading-icon v-show="labelsSelectInProgress" inline />
+      <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
       <gl-button
         variant="link"
         class="float-right js-sidebar-dropdown-toggle"
diff --git a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue
index d5288b4cde00d1b0631eb1ae66477e20b5cf4d7c..c04d8fdcd4a1901ee302b9b54dcd88b4963b0614 100644
--- a/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue
+++ b/ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_add_dropdown.vue
@@ -125,7 +125,7 @@ export default {
         @input="$emit('fetchGroups', $event)"
       />
     </template>
-    <gl-loading-icon v-if="isLoadingGroups" />
+    <gl-loading-icon v-if="isLoadingGroups" size="sm" />
     <template v-else>
       <gl-dropdown-item
         v-for="group in groups"
diff --git a/ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue b/ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue
index 901978ad523a3587c2f73c7d6d1ac627cc55106f..7614f065434789297854e1c1faa922db481a646d 100644
--- a/ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue
+++ b/ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue
@@ -158,7 +158,7 @@ export default {
     </template>
     <template #suggestions>
       <template v-if="suggestionsLoading">
-        <gl-loading-icon />
+        <gl-loading-icon size="sm" />
       </template>
       <template v-else-if="hasSuggestions">
         <gl-filtered-search-suggestion
diff --git a/ee/app/assets/javascripts/boards/components/assignee_select.vue b/ee/app/assets/javascripts/boards/components/assignee_select.vue
index af12175330c40f833f67848ae2f7142b3784bf61..21a40e94e8b598b298552032b9d42e634fe6af68 100644
--- a/ee/app/assets/javascripts/boards/components/assignee_select.vue
+++ b/ee/app/assets/javascripts/boards/components/assignee_select.vue
@@ -165,7 +165,7 @@ export default {
           </div>
           <div class="dropdown-content"></div>
           <div class="dropdown-loading">
-            <gl-loading-icon />
+            <gl-loading-icon size="sm" />
           </div>
         </div>
       </div>
diff --git a/ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue b/ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue
index 886d98402d943318e69837f520c0ad6761e1657a..501e835af78c1157c3e9093c090c71b4886d2e48 100644
--- a/ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue
+++ b/ee/app/assets/javascripts/boards/components/boards_list_selector/list_container.vue
@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div class="dropdown-assignees-list">
-    <div v-if="loading" class="dropdown-loading"><gl-loading-icon /></div>
+    <div v-if="loading" class="dropdown-loading"><gl-loading-icon size="sm" /></div>
     <list-filter @onSearchInput="handleSearch" />
     <list-content
       v-if="!loading"
diff --git a/ee/app/assets/javascripts/boards/components/milestone_select.vue b/ee/app/assets/javascripts/boards/components/milestone_select.vue
index 712956e29ff504453cd4e23f7c686c2b9f718d6d..30671212cdb098271539306348c1a34f1d5299b7 100644
--- a/ee/app/assets/javascripts/boards/components/milestone_select.vue
+++ b/ee/app/assets/javascripts/boards/components/milestone_select.vue
@@ -131,7 +131,7 @@ export default {
             />
           </div>
           <div class="dropdown-content"></div>
-          <div class="dropdown-loading"><gl-loading-icon /></div>
+          <div class="dropdown-loading"><gl-loading-icon size="sm" /></div>
         </div>
       </div>
     </div>
diff --git a/ee/app/assets/javascripts/clusters/components/environments.vue b/ee/app/assets/javascripts/clusters/components/environments.vue
index e5d0f0d74739b06d925f3ccc0ddedd0c9a14f568..18ccfb2feef073620ce6a6531ac39e026abfff1e 100644
--- a/ee/app/assets/javascripts/clusters/components/environments.vue
+++ b/ee/app/assets/javascripts/clusters/components/environments.vue
@@ -127,6 +127,7 @@ export default {
         <!-- Loading Rollout -->
         <gl-loading-icon
           v-if="isLoadingRollout(row.item.rolloutStatus)"
+          size="sm"
           class="d-inline-flex mt-1"
         />
 
diff --git a/ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue b/ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue
index 6a17fcde5c1dd6cb053affa6ec8971276704573a..f33bf6b1fc7f5330bacf8c8b09e1217965711491 100644
--- a/ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue
+++ b/ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue
@@ -158,7 +158,7 @@ export default {
     <collapsed-calendar-icon :text="collapsedText" class="sidebar-collapsed-icon" />
     <div class="title">
       {{ label }}
-      <gl-loading-icon v-if="dateSaveInProgress" :inline="true" />
+      <gl-loading-icon v-if="dateSaveInProgress" size="sm" :inline="true" />
       <div class="float-right d-flex">
         <gl-icon
           ref="epicDatePopover"
diff --git a/ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue b/ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue
index e50c7e28ebc7fbc8bcbcd2e6975a68231cb4855d..b419cb4009066102f6d8e24f9f60351c1b8e365a 100644
--- a/ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue
+++ b/ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue
@@ -80,7 +80,7 @@ export default {
 <template>
   <gl-tab :title="s__('Incident|Metrics')" data-testid="metrics-tab">
     <div v-if="isLoadingMetricImages">
-      <gl-loading-icon class="gl-p-5" />
+      <gl-loading-icon class="gl-p-5" size="sm" />
     </div>
     <gl-modal
       modal-id="upload-metric-modal"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
index 83005af197cd347a6416cef00c432bebb8de9fc7..37fd1736a2470d9802d300b50aebf550c581a754 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
@@ -88,7 +88,7 @@ export default {
 
 <template>
   <div class="list-section">
-    <gl-loading-icon v-if="loading" />
+    <gl-loading-icon v-if="loading" size="sm" />
     <div v-else-if="rotations.length === 0 && !loading" class="gl-clearfix">
       <span
         class="details-cell gl-display-flex gl-justify-content-space-between gl-align-items-center gl-pl-3"
diff --git a/ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue b/ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue
index 013f5ee7e80137a75904ebacbfabc887b1b584ae..8059e0c49d691086ab5a1ede94460443611620f5 100644
--- a/ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue
+++ b/ee/app/assets/javascripts/related_feature_flags/components/related_feature_flags.vue
@@ -93,7 +93,7 @@ export default {
         <span class="h5">{{ numberOfFeatureFlags }}</span>
       </h3>
     </div>
-    <gl-loading-icon v-if="loading" class="gl-my-3" />
+    <gl-loading-icon v-if="loading" size="sm" class="gl-my-3" />
     <ul v-else class="content-list related-items-list">
       <li
         v-for="flag in featureFlags"
diff --git a/ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue b/ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue
index b51aa3428733b9e6be719da1f8fdfb9e1b4dc4a8..387d6c8bd829010fc2362091bbf4945540f9b6e4 100644
--- a/ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue
+++ b/ee/app/assets/javascripts/sidebar/components/ancestors_tree/ancestors_tree.vue
@@ -90,6 +90,6 @@ export default {
       <span class="no-value">{{ __('None') }}</span>
     </div>
 
-    <gl-loading-icon v-if="isFetching" />
+    <gl-loading-icon v-if="isFetching" size="sm" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue b/ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
index 2f40f453429b7c27659258e94c74c7caffb2ee1b..d621a039f1a63c605b0957f0e87e327a0bb7b234 100644
--- a/ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
+++ b/ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
@@ -121,7 +121,7 @@ export default {
       {{ $options.noIteration.title }}
     </gl-dropdown-item>
     <gl-dropdown-divider />
-    <gl-loading-icon v-if="$apollo.queries.iterations.loading" />
+    <gl-loading-icon v-if="$apollo.queries.iterations.loading" size="sm" />
     <template v-else-if="!glFeatures.iterationCadences">
       <gl-dropdown-item
         v-for="iterationItem in iterations"
diff --git a/ee/app/assets/javascripts/sidebar/components/status/status.vue b/ee/app/assets/javascripts/sidebar/components/status/status.vue
index bbc1a1df10eb201426510db0e721c8e52b2a6f4f..4a7aa6e530bdd9437955934ce6ec25aaf198282f 100644
--- a/ee/app/assets/javascripts/sidebar/components/status/status.vue
+++ b/ee/app/assets/javascripts/sidebar/components/status/status.vue
@@ -148,7 +148,7 @@ export default {
     <div ref="status" v-gl-tooltip.left.viewport="statusTooltip" class="sidebar-collapsed-icon">
       <gl-icon name="status-health" :size="14" />
 
-      <gl-loading-icon v-if="isFetching" />
+      <gl-loading-icon v-if="isFetching" size="sm" />
       <p v-else class="collapse-truncated-title gl-px-2">{{ statusText }}</p>
     </div>
 
@@ -211,7 +211,7 @@ export default {
         </gl-dropdown>
       </div>
 
-      <gl-loading-icon v-if="isFetching" :inline="true" />
+      <gl-loading-icon v-if="isFetching" size="sm" :inline="true" />
       <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !status }">
         <span v-if="status" class="text-plain gl-font-weight-bold">{{ statusText }}</span>
         <span v-else>{{ $options.i18n.noneText }}</span>
diff --git a/ee/app/assets/javascripts/sidebar/components/weight/weight.vue b/ee/app/assets/javascripts/sidebar/components/weight/weight.vue
index a05182fcc2a13de99ad4a5eb3af4cafcfd813029..5ae0b92dd43fd116b2bc22a7be08028224cb7715 100644
--- a/ee/app/assets/javascripts/sidebar/components/weight/weight.vue
+++ b/ee/app/assets/javascripts/sidebar/components/weight/weight.vue
@@ -146,7 +146,7 @@ export default {
       @click="onCollapsedClick"
     >
       <gl-icon :size="16" name="weight" />
-      <gl-loading-icon v-if="fetching" class="js-weight-collapsed-loading-icon" />
+      <gl-loading-icon v-if="fetching" size="sm" class="js-weight-collapsed-loading-icon" />
       <span v-else class="js-weight-collapsed-weight-label">
         {{ collapsedWeightLabel
         }}<template v-if="weight > $options.maxDisplayWeight">&hellip;</template>
@@ -154,7 +154,12 @@ export default {
     </div>
     <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900">
       {{ s__('Sidebar|Weight') }}
-      <gl-loading-icon v-if="fetching || loading" :inline="true" class="js-weight-loading-icon" />
+      <gl-loading-icon
+        v-if="fetching || loading"
+        size="sm"
+        :inline="true"
+        class="js-weight-loading-icon"
+      />
       <a
         v-if="editable"
         class="float-right edit-link js-weight-edit-link"
diff --git a/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue b/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue
index 128746744e4245708e8b1664ad3db303af05ba90..a212c21a84f327ed33197f71b8b7d3b2f754e864 100644
--- a/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue
+++ b/ee/app/assets/javascripts/test_case_show/components/test_case_sidebar.vue
@@ -181,7 +181,7 @@ export default {
           class="btn-blank sidebar-collapsed-icon"
           @click="handleTodoButtonClick"
         >
-          <gl-loading-icon v-if="todoUpdateInProgress" />
+          <gl-loading-icon v-if="todoUpdateInProgress" size="sm" />
           <gl-icon v-else :name="todoIcon" :class="{ 'todo-undone': isTodoPending }" />
         </button>
       </div>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
index ed94547c400ceede4fc90db2a97b89f6fcd05445..8dd887a3be2dd8ac6b525e16fe184717f8f76283 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_auth.vue
@@ -86,7 +86,7 @@ export default {
     <template #modal-cancel>{{ s__('Cancel') }}</template>
 
     <template #modal-ok>
-      <gl-loading-icon v-if="isApproving" inline />
+      <gl-loading-icon v-if="isApproving" size="sm" inline />
       {{ s__('Approve') }}
     </template>
   </gl-modal>
diff --git a/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue b/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue
index 94b587d9c5040513384658539cb45cda1a559feb..8df746b4712e3b02db1117d792eae55a20527f68 100644
--- a/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue
@@ -223,7 +223,7 @@ export default {
       >
         <span>
           {{ __('Epic')
-          }}<gl-loading-icon v-if="epicSelectInProgress" class="gl-ml-2" :inline="true"
+          }}<gl-loading-icon v-if="epicSelectInProgress" size="sm" class="gl-ml-2" :inline="true"
         /></span>
 
         <gl-link
@@ -278,7 +278,7 @@ export default {
         <p v-else-if="epicListNotValid" class="gl-mx-5 gl-my-4">
           {{ $options.i18n.noMatch }}
         </p>
-        <gl-loading-icon v-else />
+        <gl-loading-icon v-else size="sm" />
       </gl-dropdown>
     </div>
 
diff --git a/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue b/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
index 04d6ebd9ee1186b97c369f1871c422c4295e823e..602b6073bd57bef9842e2d5cc5a6407bbb3c8ef1 100644
--- a/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
@@ -86,7 +86,11 @@ export default {
     <span class="js-license-name">{{ license.name }}</span>
     <div class="float-right">
       <div class="d-flex">
-        <gl-loading-icon v-if="loading" class="js-loading-icon d-flex align-items-center mr-2" />
+        <gl-loading-icon
+          v-if="loading"
+          size="sm"
+          class="js-loading-icon d-flex align-items-center mr-2"
+        />
         <gl-dropdown
           :text="dropdownText"
           :disabled="loading"
diff --git a/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue b/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
index 39a00deffc0be8ad10d9aec7770c80f0fe88113d..3f56f017bb41af7fe312ca8c763cee139d2b092f 100644
--- a/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
+++ b/ee/app/assets/javascripts/vue_shared/license_compliance/license_management.vue
@@ -76,7 +76,7 @@ export default {
 };
 </script>
 <template>
-  <gl-loading-icon v-if="showLoadingSpinner" />
+  <gl-loading-icon v-if="showLoadingSpinner" size="sm" />
   <div v-else class="license-management">
     <delete-confirmation-modal v-if="isAdmin" />
 
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/header.vue b/ee/app/assets/javascripts/vulnerabilities/components/header.vue
index 5677750ea21a6f5ee9d02c363b2868897aad3acf..a809efebcf91b95c08cb61098c42058d9af707cf 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/header.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/header.vue
@@ -265,7 +265,7 @@ export default {
         class="detail-page-header-body align-items-center"
         data-testid="vulnerability-detail-body"
       >
-        <gl-loading-icon v-if="isLoadingVulnerability" class="mr-2" />
+        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="mr-2" />
         <gl-badge v-else class="gl-mr-4 text-capitalize" :variant="stateVariant">
           {{ vulnerability.state }}
         </gl-badge>
@@ -281,7 +281,7 @@ export default {
 
       <div class="detail-page-header-actions align-items-center">
         <label class="mb-0 mx-2">{{ __('Status') }}</label>
-        <gl-loading-icon v-if="isLoadingVulnerability" class="d-inline" />
+        <gl-loading-icon v-if="isLoadingVulnerability" size="sm" class="d-inline" />
         <vulnerability-state-dropdown
           v-else
           :initial-state="vulnerability.state"
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
index ada41352278356f98d11fab01dcfcdeccbb26db3..2b9348d1ce763be52b90fbd786c9e80b12ec08a4 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue
@@ -171,7 +171,7 @@ export default {
     class="m-3"
   >
     <div v-safe-html="noteHtml" class="md">
-      <gl-loading-icon />
+      <gl-loading-icon size="sm" />
     </div>
 
     <template #right-content>
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/related_jira_issues.vue b/ee/app/assets/javascripts/vulnerabilities/components/related_jira_issues.vue
index 3c034811665f4dd83b6f5583b5cd57b32168887f..0fc57b11aafcfc99e39d28b674f1e7d597b6bc75 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/related_jira_issues.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/related_jira_issues.vue
@@ -191,6 +191,7 @@ export default {
           <gl-loading-icon
             v-if="isFetchingRelatedIssues"
             ref="loadingIcon"
+            size="sm"
             :label="$options.i18n.loadingStateLabel"
             class="gl-my-3"
           />
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue b/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue
index d5b402dd63de167e0f53aeefe8038649b04ecde2..8b813210b8830ec4cf03ba723ae4faef52738a0a 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/status_description.vue
@@ -95,7 +95,7 @@ export default {
         <time-ago-tooltip ref="timeAgo" :time="time" />
       </template>
       <template #user>
-        <gl-loading-icon v-if="isLoadingUser" class="d-inline ml-1" />
+        <gl-loading-icon v-if="isLoadingUser" class="d-inline ml-1" size="sm" />
         <user-avatar-link
           v-else-if="user"
           :link-href="user.user_path"