diff --git a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
index d8f9eb65236fd9075b4bec4dcd27c52a19b7436d..de37aa431e6079c3348adb6830083f5b796f2bb0 100644
--- a/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
+++ b/app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue
@@ -10,7 +10,7 @@ import {
   GlFormCheckbox,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -68,7 +68,7 @@ export default {
     GlPagination,
     GlFormCheckbox,
     TimeAgo,
-    CiBadgeLink,
+    CiIcon,
     JobCheckbox,
     ArtifactsBulkDelete,
     BulkDeleteModal,
@@ -442,7 +442,7 @@ export default {
       <template #cell(job)="{ item }">
         <div class="gl-display-inline-flex gl-align-items-center gl-mb-3 gl-gap-3">
           <span data-testid="job-artifacts-job-status">
-            <ci-badge-link :status="item.detailedStatus" size="sm" :show-text="false" />
+            <ci-icon :status="item.detailedStatus" />
           </span>
           <gl-link :href="item.webPath">
             {{ item.name }}
diff --git a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
index 6673785ffd2b376218ad68476cc88bd1ce22e227..29009c14e1bbba1fc0a5685b6f5ad421df357df9 100644
--- a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
+++ b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
@@ -2,13 +2,13 @@
 import { GlAvatar, GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isNumeric } from '~/lib/utils/number_utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CiResourceAbout from './ci_resource_about.vue';
 import CiResourceHeaderSkeletonLoader from './ci_resource_header_skeleton_loader.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     CiResourceAbout,
     CiResourceHeaderSkeletonLoader,
     GlAvatar,
@@ -102,12 +102,11 @@ export default {
             {{ versionBadgeText }}
           </gl-badge>
         </span>
-        <ci-badge-link
+        <ci-icon
           v-if="hasPipelineStatus"
-          class="gl-mt-2"
           :status="pipelineStatus"
-          size="sm"
-          show-text
+          show-status-text
+          class="gl-mt-2"
         />
       </div>
     </div>
diff --git a/app/assets/javascripts/ci/common/private/job_name_component.vue b/app/assets/javascripts/ci/common/private/job_name_component.vue
index 1c7f5a7476d01cefd18b23f157ce7eb729fe9af5..b4e831d69d4bb0c950de5eda3d83bb8f8f48c968 100644
--- a/app/assets/javascripts/ci/common/private/job_name_component.vue
+++ b/app/assets/javascripts/ci/common/private/job_name_component.vue
@@ -30,7 +30,7 @@ export default {
 </script>
 <template>
   <span class="mw-100 gl-display-flex gl-align-items-center gl-flex-grow-1">
-    <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" />
+    <ci-icon :size="iconSize" :status="status" :show-tooltip="false" class="gl-line-height-0" />
     <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block">
       {{ name }}
     </span>
diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue
index 00d15f870643e54cb3a32cf02708021a0d4b04eb..1aa83a94bc5680fc76dc278197de9716b0508f02 100644
--- a/app/assets/javascripts/ci/job_details/components/job_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_header.vue
@@ -4,12 +4,12 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { glEmojiTag } from '~/emoji';
 import { __, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     TimeagoTooltip,
     GlButton,
     GlAvatarLink,
@@ -113,7 +113,7 @@ export default {
       </div>
     </div>
     <section class="header-main-content gl-display-flex gl-align-items-center gl-mr-3">
-      <ci-badge-link class="gl-mr-3" :status="status" />
+      <ci-icon class="gl-mr-3" :status="status" show-status-text />
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('Started') }}</template>
       <template v-else>{{ __('Created') }}</template>
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
index 8e87f118fa4ac1dbcfa620dba4c41f7397914fb3..4ec9044a21cbd1e7758670cc1550157409cf74a9 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue
@@ -63,11 +63,11 @@ export default {
       <gl-icon
         v-if="isActive"
         name="arrow-right"
+        :show-tooltip="false"
         class="icon-arrow-right gl-absolute gl-display-block"
-        :size="14"
       />
 
-      <ci-icon :status="job.status" class="gl-mr-3" :size="14" />
+      <ci-icon :status="job.status" :show-tooltip="false" class="gl-mr-3" />
 
       <span class="gl-text-truncate gl-w-full">{{ jobName }}</span>
 
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
index 7744395734f6d8b537c967676831c740c9cb5b13..e229abcbe128d8cc948412026b9d9b460f6789b4 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLink, GlDisclosureDropdown, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { Mousetrap } from '~/lib/mousetrap';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -14,7 +14,7 @@ export default {
     GlDisclosureDropdown,
     GlLink,
     GlSprintf,
-    CiBadgeLink,
+    CiIcon,
   },
   props: {
     pipeline: {
@@ -94,7 +94,10 @@ export default {
 </script>
 <template>
   <div class="dropdown">
-    <div class="gl-display-flex gl-flex-wrap gl-gap-2 js-pipeline-info" data-testid="pipeline-info">
+    <div
+      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-2 js-pipeline-info"
+      data-testid="pipeline-info"
+    >
       <gl-sprintf :message="pipelineInfo">
         <template #bold="{ content }">
           <span class="gl-display-flex gl-font-weight-bold">{{ content }}</span>
@@ -108,9 +111,9 @@ export default {
           >
         </template>
         <template #status>
-          <ci-badge-link
+          <ci-icon
             :status="pipeline.details.status"
-            size="sm"
+            show-status-text
             data-testid="pipeline-status-link"
           />
         </template>
@@ -125,7 +128,7 @@ export default {
         <template #ref>
           <gl-link
             :href="pipeline.ref.path"
-            class="link-commit ref-name gl-mt-1"
+            class="link-commit ref-name"
             data-testid="source-ref-link"
             >{{ pipeline.ref.name }}</gl-link
           ><clipboard-button
diff --git a/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue b/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
index a2b6a4301381a7bd283398b450a19b640e416514..efa74d86bd6e9863b57630ae3dbbfa5126ab5e10 100644
--- a/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
+++ b/app/assets/javascripts/ci/jobs_page/components/job_cells/status_cell.vue
@@ -1,14 +1,14 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   iconSize: 12,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlIcon,
     TimeAgoTooltip,
   },
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link :status="job.detailedStatus" />
+    <ci-icon :status="job.detailedStatus" show-status-text />
     <div class="gl-font-sm gl-text-secondary gl-mt-2 gl-ml-3">
       <div v-if="duration" data-testid="job-duration">
         <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" />
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
index bb36ac8b6aba0eaed2040476ddb553e1588a7a55..ab12e4c05e3045a96ce5231578caa4a401a63068 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
@@ -5,7 +5,7 @@ import delayedJobMixin from '~/ci/mixins/delayed_job_mixin';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ActionComponent from '../../../common/private/job_action_component.vue';
 import JobNameComponent from '../../../common/private/job_name_component.vue';
 import { BRIDGE_KIND, RETRY_ACTION_TITLE, SINGLE_JOB, SKIP_RETRY_MODAL_KEY } from '../constants';
@@ -58,7 +58,7 @@ export default {
   hoverClass: 'gl-shadow-x0-y0-b3-s1-blue-500',
   components: {
     ActionComponent,
-    CiBadgeLink,
+    CiIcon,
     GlBadge,
     GlForm,
     GlFormCheckbox,
@@ -329,7 +329,7 @@ export default {
       @mouseout="hideTooltips"
     >
       <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
-        <ci-badge-link :status="job.status" size="md" :show-text="false" :use-link="false" />
+        <ci-icon :status="job.status" size="md" :use-link="false" />
         <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width">
           <div class="gl-text-truncate gl-pr-9 gl-line-height-normal">{{ job.name }}</div>
           <div
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index 5960eea5b4f4ddd453b2f4141434efbdb32394c7..511eac79fb58a5576227ab3cc64d9fdcfb39c87d 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -13,7 +13,7 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 import CancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import RetryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { reportToSentry } from '~/ci/utils';
 import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from '../constants';
 
@@ -22,7 +22,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlBadge,
     GlButton,
     GlLink,
@@ -242,11 +242,9 @@ export default {
     </gl-tooltip>
     <div class="gl-bg-white gl-border gl-p-3 gl-rounded-lg gl-w-full" :class="cardClasses">
       <div class="gl-display-flex gl-gap-x-3">
-        <ci-badge-link
+        <ci-icon
           v-if="!pipelineIsLoading"
           :status="pipelineStatus"
-          size="md"
-          :show-text="false"
           :use-link="false"
           class="gl-align-self-start"
         />
diff --git a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
index 51a68f6619a4e48f25dff606ef8ac426c79d3d1f..5c1841615ab37b295afd7c6ac2322e076310852c 100644
--- a/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
+++ b/app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue
@@ -17,7 +17,7 @@ import { setUrlFragment, redirectTo } from '~/lib/utils/url_utility'; // eslint-
 import { __, s__, sprintf, formatNumber } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { LOAD_FAILURE, POST_FAILURE, DELETE_FAILURE, DEFAULT } from '../constants';
@@ -38,7 +38,7 @@ export default {
   pipelineRetry: 'pipelineRetry',
   finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'],
   components: {
-    CiBadgeLink,
+    CiIcon,
     ClipboardButton,
     GlAlert,
     GlBadge,
@@ -403,7 +403,12 @@ export default {
           {{ commitTitle }}
         </h3>
         <div>
-          <ci-badge-link :status="detailedStatus" class="gl-display-inline-block gl-mb-3" />
+          <ci-icon
+            :status="detailedStatus"
+            show-status-text
+            :show-link="false"
+            class="gl-display-inline-block gl-mb-3"
+          />
           <div class="gl-ml-2 gl-mb-3 gl-display-inline-block gl-h-6">
             <gl-link
               v-if="user"
diff --git a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
index 4752fbb3e96c81e33b6819380926cadc1b517b4b..287f6e045c6ca4009bfce1fb4438dd644efa7180 100644
--- a/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
+++ b/app/assets/javascripts/ci/pipeline_details/jobs/components/failed_jobs_table.vue
@@ -5,7 +5,7 @@ import { __, s__ } from '~/locale';
 import { createAlert } from '~/alert';
 import Tracking from '~/tracking';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { TRACKING_CATEGORIES } from '~/ci/constants';
 import RetryFailedJobMutation from '../graphql/mutations/retry_failed_job.mutation.graphql';
 import { DEFAULT_FIELDS } from '../../constants';
@@ -14,7 +14,7 @@ export default {
   fields: DEFAULT_FIELDS,
   retry: __('Retry'),
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlButton,
     GlLink,
     GlTableLite,
@@ -80,7 +80,7 @@ export default {
       <div
         class="gl-display-flex gl-align-items-center gl-lg-justify-content-start gl-justify-content-end"
       >
-        <ci-badge-link :status="item.detailedStatus" :show-text="false" class="gl-mr-3" />
+        <ci-icon :status="item.detailedStatus" class="gl-mr-3" />
         <div class="gl-text-truncate">
           <gl-link
             :href="item.detailedStatus.detailsPath"
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
index 44cf11acfe2004b32666140a99c29d42892521f3..7c4a07e3f83a1672e97992b049444997e93f8ddd 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_status.vue
@@ -7,7 +7,7 @@ import getPipelineQuery from '~/ci/pipeline_editor/graphql/queries/pipeline.quer
 import getPipelineEtag from '~/ci/pipeline_editor/graphql/queries/client/pipeline_etag.query.graphql';
 import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import PipelineMiniGraph from '~/ci/pipeline_mini_graph/pipeline_mini_graph.vue';
 import PipelineEditorMiniGraph from './pipeline_editor_mini_graph.vue';
 
@@ -25,7 +25,7 @@ export const i18n = {
 export default {
   i18n,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlButton,
     GlIcon,
     GlLink,
@@ -155,14 +155,7 @@ export default {
     </template>
     <template v-else>
       <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1">
-        <a :href="status.detailsPath" class="gl-mr-auto">
-          <ci-badge-link
-            :status="status"
-            size="md"
-            :show-text="false"
-            data-testid="pipeline-status-icon"
-          />
-        </a>
+        <ci-icon :status="status" data-testid="pipeline-status-icon" />
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="$options.i18n.pipelineInfo">
             <template #id="{ content }">
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
index 34640d49b807e68aaa9fc183a890a2b94fdcabdf..ed78a335453b6062afc1fb49327f6b27d44efd7d 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
@@ -13,7 +13,7 @@
  */
 
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
 import eventHub from '~/ci/event_hub';
 import axios from '~/lib/utils/axios_utils';
@@ -33,7 +33,7 @@ export default {
     positionFixed: true,
   },
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlLoadingIcon,
     GlDropdown,
     LegacyJobItem,
@@ -126,14 +126,7 @@ export default {
     @show="onShowDropdown"
   >
     <template #button-content>
-      <ci-badge-link
-        :status="stage.status"
-        size="md"
-        :show-text="false"
-        :show-tooltip="false"
-        :use-link="false"
-        class="gl-mb-0!"
-      />
+      <ci-icon :status="stage.status" :show-tooltip="false" :use-link="false" class="gl-mb-0!" />
     </template>
     <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state">
       <gl-loading-icon size="sm" class="gl-mr-3" />
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
index cc703d29e23663ed224f9780edbd37c3d712c1b5..4dace6b501aeecf61b1a6414459ae00d3994a181 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/linked_pipelines_mini_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { accessValue } from './accessors/linked_pipelines_accessors';
 /**
  * Renders the upstream/downstream portions of the pipeline mini graph.
@@ -11,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    CiBadgeLink,
+    CiIcon,
   },
   inject: {
     dataMethod: {
@@ -99,13 +99,11 @@ export default {
     }"
     class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
   >
-    <ci-badge-link
+    <ci-icon
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
       v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
       :status="pipelineStatus(pipeline)"
-      size="md"
-      :show-text="false"
       :show-tooltip="false"
       :class="triggerButtonClass(pipeline)"
       class="linked-pipeline-mini-item gl-mb-0!"
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
index 92f461c72d7ada4558cebada90f05efcb1eb270b..d979c0efaf2398875e9822b8ecaa0573f68b920d 100644
--- a/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue
@@ -1,9 +1,9 @@
 <script>
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
   },
   props: {
     schedule: {
@@ -24,9 +24,10 @@ export default {
 
 <template>
   <div data-testid="last-pipeline-status">
-    <ci-badge-link
+    <ci-icon
       v-if="hasPipeline"
       :status="lastPipelineStatus"
+      show-status-text
       class="gl-vertical-align-middle"
     />
     <span v-else data-testid="pipeline-schedule-status-text">
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
index 20e2c7e9dce11bb12c95759548e9244873525e5f..3dcbcf260dc8bd69f52bc57297af8b1bd1a19b51 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_status_badge.vue
@@ -1,12 +1,12 @@
 <script>
 import { TRACKING_CATEGORIES } from '~/ci/constants';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Tracking from '~/tracking';
 import PipelinesTimeago from './time_ago.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     PipelinesTimeago,
   },
   mixins: [Tracking.mixin()],
@@ -31,7 +31,12 @@ export default {
 
 <template>
   <div>
-    <ci-badge-link class="gl-mb-3" :status="pipelineStatus" @ciStatusBadgeClick="trackClick" />
+    <ci-icon
+      class="gl-mb-3"
+      :status="pipelineStatus"
+      show-status-text
+      @ciStatusBadgeClick="trackClick"
+    />
     <pipelines-timeago :pipeline="pipeline" />
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue b/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
index 5d8e9dcdee28173e99ba5dfdfd2597c3b1518cdb..653d9b053304a864f0eb9deac2f42ad1c3a82332 100644
--- a/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_jobs_table.vue
@@ -3,7 +3,7 @@ import { GlTableLite } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { formatTime } from '~/lib/utils/datetime_utility';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import RunnerTags from '~/ci/runner/components/runner_tags.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { tableField } from '../utils';
@@ -11,7 +11,7 @@ import LinkCell from './cells/link_cell.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlTableLite,
     LinkCell,
     RunnerTags,
@@ -80,7 +80,7 @@ export default {
     fixed
   >
     <template #cell(status)="{ item = {} }">
-      <ci-badge-link v-if="item.detailedStatus" :status="item.detailedStatus" />
+      <ci-icon v-if="item.detailedStatus" :status="item.detailedStatus" show-status-text />
     </template>
 
     <template #cell(job)="{ item = {} }">
diff --git a/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql b/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
index b6d6996a8577f720eaf362da751fa07930055c09..611de43b99517eddc8439e5dc2869758d131c607 100644
--- a/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
+++ b/app/assets/javascripts/ci/runner/graphql/show/runner_jobs.query.graphql
@@ -8,7 +8,7 @@ query getRunnerJobs($id: CiRunnerID!, $first: Int, $last: Int, $before: String,
       nodes {
         id
         detailedStatus {
-          # fields for `<ci-badge-link>`
+          # fields for `<ci-icon>`
           id
           detailsPath
           group
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 08a1eacec7ac549f4e911b5ba183e73a4760265e..47edec8dcb0d9a8d0baaf953c9e9d389afe433ff 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -752,7 +752,7 @@ export default {
             :title="upcomingDeploymentTooltipText"
             data-testid="upcoming-deployment-status-link"
           >
-            <ci-icon class="gl-mr-2" :status="upcomingDeployment.deployable.status" />
+            <ci-icon :status="upcomingDeployment.deployable.status" class="gl-mr-2" />
           </gl-link>
         </div>
         <span
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 76b284b61854b04b87dfb69bc5fb76ad625a55e9..984dc9edaf15861165bb0b1d50b0cd541aac7fbe 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -88,7 +88,6 @@ export default {
           @click="openRightPane($options.rightSidebarViews.pipelines)"
         >
           <ci-icon
-            v-gl-tooltip
             :status="latestPipeline.details.status"
             :title="latestPipeline.details.status.text"
           />
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue
index f0c5b29e210b5cad6a9e8036906d16d424b96a3c..f5840661c172948ae8d3117a2590647490ed6259 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/description.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue
@@ -25,9 +25,7 @@ export default {
 <template>
   <div class="d-flex align-items-center">
     <ci-icon
-      is-borderless
       :status="job.status"
-      :size="24"
       class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1"
     />
     <span class="gl-ml-3">
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 6bf51ed06a613d2eb4a6bb1d89d5d17f6f2576ce..0e07cc34dd8d5fa223dbb46aaafe283ab96f4174 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -63,7 +63,7 @@ export default {
     </div>
     <template v-else-if="hasLoadedPipeline">
       <header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
-        <ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
+        <ci-icon :status="latestPipeline.details.status" />
         <span class="gl-ml-3">
           <strong> {{ __('Pipeline') }} </strong>
           <a
diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index 71bd301162ea52ed91eb01ad6fc48c8da8808f22..76518cc3adfbced3c5a098887aae523cded09d7d 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -193,7 +193,7 @@ export default {
           >
             <span v-if="hasPipeline" class="mr-ci-status order-md-last">
               <a :href="pipelineStatus.details_path">
-                <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
+                <ci-icon :status="pipelineStatus" :title="pipelineStatusTooltip" />
               </a>
             </span>
 
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
index 0feaf8db82bb0ffc81016aa4bf21e5d5cf407e13..a4851b4fe4b22a8335c0a05ec4520e50715f9769 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { createAlert } from '~/alert';
 import { getQueryHeaders, toggleQueryPollingByVisibility } from '~/ci/pipeline_details/graph/utils';
 import getLatestPipelineStatusQuery from '../graphql/queries/get_latest_pipeline_status.query.graphql';
@@ -9,7 +9,7 @@ import { COMMIT_BOX_POLL_INTERVAL, PIPELINE_STATUS_FETCH_ERROR } from '../consta
 export default {
   PIPELINE_STATUS_FETCH_ERROR,
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlLoadingIcon,
   },
   inject: {
@@ -63,12 +63,6 @@ export default {
 <template>
   <div class="gl-display-inline-block gl-vertical-align-middle gl-mr-2">
     <gl-loading-icon v-if="loading" />
-    <ci-badge-link
-      v-else
-      :status="pipelineStatus"
-      :details-path="pipelineStatus.detailsPath"
-      size="md"
-      :show-text="false"
-    />
+    <ci-icon v-else :status="pipelineStatus" />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
index 16d688de3a034b9fc685b216233300c174eacf08..074cddac42221e1856c04e1c1b1422537c148505 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status.vue
@@ -94,14 +94,7 @@ export default {
   <div class="gl-ml-5">
     <gl-loading-icon v-if="isLoading" size="lg" label="Loading pipeline status" />
     <a v-else :href="ciStatus.details_path">
-      <ci-icon
-        v-gl-tooltip
-        :title="statusTitle"
-        :aria-label="statusTitle"
-        :status="ciStatus"
-        :size="24"
-        data-container="body"
-      />
+      <ci-icon :status="ciStatus" :title="statusTitle" :aria-label="statusTitle" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index d6fa879976ef20e3bc93b85e6806684e02e0d2b5..d77da83fe6e91d3eace2b0b914332d91a50dac2e 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -3,7 +3,7 @@ import { GlTooltipDirective, GlButton, GlButtonGroup, GlLoadingIcon } from '@git
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { sprintf, s__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import SignatureBadge from '~/commit/components/signature_badge.vue';
 import getRefMixin from '../mixins/get_ref';
@@ -17,7 +17,7 @@ export default {
     CommitInfo,
     ClipboardButton,
     SignatureBadge,
-    CiBadgeLink,
+    CiIcon,
     GlButtonGroup,
     GlButton,
     GlLoadingIcon,
@@ -116,11 +116,9 @@ export default {
     >
       <signature-badge v-if="commit.signature" :signature="commit.signature" />
       <div v-if="commit.pipeline" class="gl-ml-5">
-        <ci-badge-link
+        <ci-icon
           :status="commit.pipeline.detailedStatus"
-          :details-path="commit.pipeline.detailedStatus.detailsPath"
           :aria-label="statusTitle"
-          :show-text="false"
           class="js-commit-pipeline"
         />
       </div>
diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
index c88c528a632e4b779d2f0e1321b7e170fe8f7466..273cd5993088d24218ac9dde7eb646cc090dc0ef 100644
--- a/app/assets/javascripts/terraform/components/states_table.vue
+++ b/app/assets/javascripts/terraform/components/states_table.vue
@@ -11,14 +11,14 @@ import {
 } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import StateActions from './states_table_actions.vue';
 
 export default {
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlAlert,
     GlBadge,
     GlLink,
@@ -198,10 +198,10 @@ export default {
           :id="`terraformJobStatusContainer${item.name}`"
           class="gl-my-2"
         >
-          <ci-badge-link
+          <ci-icon
             :id="`terraformJobStatus${item.name}`"
             :status="pipelineDetailedStatus(item)"
-            class="gl-py-1"
+            show-status-text
           />
 
           <gl-tooltip
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index 2e104f2b93b54748152c5855dde7721c28ef9ab9..ac037b69dd71c0f4fc2200d995c257d763cb5431 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__, n__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { keepLatestDownstreamPipelines } from '~/ci/pipeline_details/utils/parsing_utils';
 import PipelineArtifacts from '~/ci/pipelines_page/components/pipelines_artifacts.vue';
 import LegacyPipelineMiniGraph from '~/ci/pipeline_mini_graph/legacy_pipeline_mini_graph.vue';
@@ -21,7 +21,7 @@ import { MT_MERGE_STRATEGY } from '../constants';
 export default {
   name: 'MRWidgetPipeline',
   components: {
-    CiBadgeLink,
+    CiIcon,
     GlLink,
     GlLoadingIcon,
     GlIcon,
@@ -194,13 +194,7 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <ci-badge-link
-        :status="status"
-        :href="status.details_path"
-        size="md"
-        :show-text="false"
-        class="gl-align-self-start gl-mt-2 gl-mr-3"
-      />
+      <ci-icon :status="status" class="gl-align-self-start gl-mt-2 gl-mr-3" />
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">
           <div class="media-body">
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
deleted file mode 100644
index abbeac0e0983b1e68bc66b2f8125205718dbd5b7..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script>
-import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
-import CiIcon from './ci_icon.vue';
-
-/**
- * Renders CI Badge link with CI icon and status text based on
- * API response shared between all places where it is used.
- *
- * Receives status object containing:
- * status: {
- *   details_path or detailsPath: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
- *   group:"running" // used for CSS class
- *   icon: "icon_status_running" // used to render the icon
- *   label:"running" // used for potential tooltip
- *   text:"running" // text rendered
- * }
- *
- * Used in:
- * - Pipelines table - first column
- * - Jobs table - first column
- * - Pipeline show view - header
- * - Job show view - header
- * - MR widget
- * - Terraform table
- * - On-demand scans list
- */
-
-const badgeSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-};
-
-export default {
-  components: {
-    CiIcon,
-    GlBadge,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    status: {
-      type: Object,
-      required: true,
-    },
-    showText: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    size: {
-      type: String,
-      required: false,
-      default: badgeSizeOptions.md,
-      validator(value) {
-        return badgeSizeOptions[value] !== undefined;
-      },
-    },
-    showTooltip: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    useLink: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-  },
-  computed: {
-    isNotLargeBadgeSize() {
-      return this.size !== badgeSizeOptions.lg;
-    },
-    title() {
-      return this.showTooltip && !this.showText ? this.status?.text : '';
-    },
-    detailsPath() {
-      // For now, this can either come from graphQL with camelCase or REST API in snake_case
-      if (!this.useLink) {
-        return null;
-      }
-      return this.status.detailsPath || this.status.details_path;
-    },
-    badgeStyles() {
-      switch (this.status.icon) {
-        case 'status_success':
-          return {
-            textColor: 'gl-text-green-700',
-            variant: 'success',
-          };
-        case 'status_warning':
-          return {
-            textColor: 'gl-text-orange-700',
-            variant: 'warning',
-          };
-        case 'status_failed':
-          return {
-            textColor: 'gl-text-red-700',
-            variant: 'danger',
-          };
-        case 'status_running':
-          return {
-            textColor: 'gl-text-blue-700',
-            variant: 'info',
-          };
-        case 'status_pending':
-          return {
-            textColor: 'gl-text-orange-700',
-            variant: 'warning',
-          };
-        case 'status_canceled':
-          return {
-            textColor: 'gl-text-gray-700',
-            variant: 'neutral',
-          };
-        case 'status_manual':
-          return {
-            textColor: 'gl-text-gray-700',
-            variant: 'neutral',
-          };
-        // default covers the styles for the remainder of CI
-        // statuses that are not explicitly stated here
-        default:
-          return {
-            textColor: 'gl-text-gray-600',
-            variant: 'muted',
-          };
-      }
-    },
-  },
-};
-</script>
-<template>
-  <gl-badge
-    v-gl-tooltip
-    :class="{ 'gl-px-2': !showText && isNotLargeBadgeSize }"
-    :title="title"
-    :href="detailsPath"
-    :size="size"
-    :variant="badgeStyles.variant"
-    data-testid="ci-badge-link"
-    @click="$emit('ciStatusBadgeClick')"
-  >
-    <ci-icon :status="status" />
-
-    <template v-if="showText">
-      <span
-        class="gl-ml-2 gl-white-space-nowrap"
-        :class="badgeStyles.textColor"
-        data-testid="ci-badge-text"
-      >
-        {{ status.text }}
-      </span>
-    </template>
-  </gl-badge>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 6670b93141678a6fe0199814683126c5855adc07..9f4cfa6f690e0d624aca0623d6b87e1ae5515013 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 /**
  * Renders CI icon based on API response shared between all places where it is used.
@@ -22,16 +22,14 @@ import { GlIcon } from '@gitlab/ui';
  * - Pipelines table Badge
  */
 
-/*
- * These sizes are defined in gitlab-ui/src/scss/variables.scss
- * under '$gl-icon-sizes'
- */
-const validSizes = [8, 12, 14, 16, 24, 32, 48, 72];
-
 export default {
   components: {
+    GlBadge,
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     status: {
       type: Object,
@@ -46,54 +44,117 @@ export default {
         );
       },
     },
-    size: {
-      type: Number,
-      required: false,
-      default: 16,
-      validator(value) {
-        return validSizes.includes(value);
-      },
-    },
-    isActive: {
+    showStatusText: {
       type: Boolean,
       required: false,
       default: false,
     },
-    isBorderless: {
+    showTooltip: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
-    isInteractive: {
+    useLink: {
       type: Boolean,
+      default: true,
       required: false,
-      default: false,
-    },
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
     },
   },
   computed: {
+    title() {
+      return this.showTooltip && !this.showStatusText ? this.status?.text : '';
+    },
+    detailsPath() {
+      // For now, this can either come from graphQL with camelCase or REST API in snake_case
+      if (!this.useLink) {
+        return null;
+      }
+      return this.status.detailsPath || this.status.details_path;
+    },
     wrapperStyleClasses() {
       const status = this.status.group;
       return `ci-status-icon ci-status-icon-${status} gl-rounded-full gl-justify-content-center gl-line-height-0`;
     },
     icon() {
-      return this.isBorderless ? `${this.status.icon}_borderless` : this.status.icon;
+      return this.status.icon;
+    },
+    badgeStyles() {
+      switch (this.status.icon) {
+        case 'status_success':
+          return {
+            textColor: 'gl-text-green-700',
+            variant: 'success',
+          };
+        case 'status_warning':
+          return {
+            textColor: 'gl-text-orange-700',
+            variant: 'warning',
+          };
+        case 'status_failed':
+          return {
+            textColor: 'gl-text-red-700',
+            variant: 'danger',
+          };
+        case 'status_running':
+          return {
+            textColor: 'gl-text-blue-700',
+            variant: 'info',
+          };
+        case 'status_pending':
+          return {
+            textColor: 'gl-text-orange-700',
+            variant: 'warning',
+          };
+        case 'status_canceled':
+          return {
+            textColor: 'gl-text-gray-700',
+            variant: 'neutral',
+          };
+        case 'status_manual':
+          return {
+            textColor: 'gl-text-gray-700',
+            variant: 'neutral',
+          };
+        // default covers the styles for the remainder of CI
+        // statuses that are not explicitly stated here
+        default:
+          return {
+            textColor: 'gl-text-gray-600',
+            variant: 'muted',
+          };
+      }
     },
   },
 };
 </script>
 <template>
-  <span
-    :class="[
-      wrapperStyleClasses,
-      { interactive: isInteractive, active: isActive, borderless: isBorderless },
-    ]"
-    :style="{ height: `${size}px`, width: `${size}px` }"
+  <gl-badge
+    v-gl-tooltip
+    class="ci-icon gl-p-2"
+    :title="title"
+    :aria-label="title"
+    :href="detailsPath"
+    size="md"
+    :variant="badgeStyles.variant"
+    data-testid="ci-icon"
+    @click="$emit('ciStatusBadgeClick')"
   >
-    <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" />
-  </span>
+    <span
+      class="ci-icon-wrapper"
+      :class="[
+        wrapperStyleClasses,
+        {
+          'gl-display-inline-block gl-vertical-align-top': showStatusText,
+        },
+      ]"
+    >
+      <gl-icon :name="icon" :aria-label="status.icon" /> </span
+    ><span
+      v-if="showStatusText"
+      class="gl-mx-2 gl-white-space-nowrap"
+      :class="badgeStyles.textColor"
+      data-testid="ci-icon-text"
+      >{{ status.text }}</span
+    >
+  </gl-badge>
 </template>
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 16fc0e7ebae1f99eb10002b9fbee8ee62481c6ea..6165ee6e8b4e5c3d6c23452046776db4dc3802a8 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -48,14 +48,6 @@
     border: 1px solid var(--border-color, $border-color);
     padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
-
-    svg {
-      position: relative;
-      top: 3px;
-      margin-right: 5px;
-      width: 22px;
-      height: 22px;
-    }
   }
 
   .build-loader-animation {
diff --git a/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue b/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
index ce444ff4ff8011a85f10547bfd7b9955cfd39088..14ebb746623b12a4f9bb66e6dab5b39e1807e52d 100644
--- a/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
+++ b/ee/app/assets/javascripts/ci/runner/components/runner_job_failure.vue
@@ -2,7 +2,7 @@
 import { GlLink } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { s__ } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { getTypeFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_CI_BUILD } from '~/graphql_shared/constants';
@@ -14,7 +14,7 @@ export default {
   components: {
     GlLink,
     TimeAgo,
-    CiBadgeLink,
+    CiIcon,
     RunnerFullName,
   },
   directives: {
@@ -43,7 +43,7 @@ export default {
   <div>
     <time-ago v-if="job.finishedAt" :time="job.finishedAt" class="gl-text-secondary gl-font-sm" />
     <div class="gl-mt-1 gl-mb-3">
-      <ci-badge-link v-if="job.detailedStatus" :status="job.detailedStatus" size="sm" />
+      <ci-icon v-if="job.detailedStatus" :status="job.detailedStatus" show-status-text />
       <gl-link v-if="runner" :href="runner.adminUrl" data-testid="runner-link">
         <runner-full-name :runner="runner" />
       </gl-link>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index e1f637a46b67b77f2356baa7f9c275e3d05a8922..3126b998be84aa649c4817e46d8734fb92964882 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -9,7 +9,7 @@ import {
   GlSkeletonLoader,
   GlTruncate,
 } from '@gitlab/ui';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { DAST_SHORT_NAME } from '~/security_configuration/components/constants';
 import { __, s__ } from '~/locale';
@@ -45,7 +45,7 @@ export default {
     GlAlert,
     GlSkeletonLoader,
     GlTruncate,
-    CiBadgeLink,
+    CiIcon,
     TimeAgoTooltip,
     Actions,
     EmptyState,
@@ -262,7 +262,7 @@ export default {
 
         <template #cell(status)="{ value }">
           <div class="gl-my-3">
-            <ci-badge-link :status="value" />
+            <ci-icon :status="value" show-status-text />
           </div>
         </template>
 
diff --git a/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue b/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
index 1bc9bdfc2621f9133dc45254c7918c63a0a0e556..f462c367ec1b90a5042f12ec453d5d7f21be87a6 100644
--- a/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
+++ b/ee/app/assets/javascripts/vue_shared/dashboards/components/project_pipeline.vue
@@ -1,12 +1,10 @@
 <script>
 import { GlLink, GlTooltip, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {
-    CiBadgeLink,
     CiIcon,
     GlIcon,
     GlLink,
@@ -76,10 +74,7 @@ export default {
         :href="upstreamPipeline.details.status.details_path"
         class="d-inline-block align-middle"
       >
-        <ci-icon
-          class="d-flex js-upstream-pipeline-status"
-          :status="upstreamPipeline.details.status"
-        />
+        <ci-icon :status="upstreamPipeline.details.status" class="js-upstream-pipeline-status" />
       </gl-link>
       <gl-tooltip :target="() => $refs.upstreamStatus">
         <div class="bold">{{ $options.relations.upstream }}</div>
@@ -90,11 +85,11 @@ export default {
       <gl-icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
     </template>
 
-    <ci-badge-link
+    <ci-icon
       ref="status"
-      class="d-inline-block align-middle py-0"
       :status="lastPipeline.details.status"
-      :show-text="true"
+      show-status-text
+      class="gl-display-inline-block align-middle"
     />
     <gl-tooltip :target="() => $refs.status">
       <div class="bold">{{ $options.relations.current }}</div>
@@ -115,7 +110,7 @@ export default {
           :href="pipeline.details.status.details_path"
           class="d-inline-block align-middle"
         >
-          <ci-icon class="d-flex js-downstream-pipeline-status" :status="pipeline.details.status" />
+          <ci-icon :status="pipeline.details.status" class="js-downstream-pipeline-status" />
         </gl-link>
         <gl-tooltip :target="() => $refs.downstreamStatus[index]">
           <div class="bold">{{ $options.relations.downstream }}</div>
diff --git a/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js b/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
index a61e2acb0cc7aeae0c085ebfed956ee227626edf..b5f9f8c4b304d3a31b6518b542af1c5b00922501 100644
--- a/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
+++ b/ee/spec/frontend/ci/runner/components/runner_job_failure_spec.js
@@ -1,5 +1,5 @@
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import RunnerJobFailure from 'ee/ci/runner/components/runner_job_failure.vue';
@@ -16,7 +16,7 @@ describe('RunnerJobFailure', () => {
   let wrapper;
 
   const findTimeAgo = () => wrapper.findComponent(TimeAgo);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findRunnerLink = () => wrapper.findByTestId('runner-link');
   const findLog = () => wrapper.find('pre');
 
@@ -52,8 +52,7 @@ describe('RunnerJobFailure', () => {
     it('shows status badge', () => {
       createComponent();
 
-      expect(findCiBadgeLink().props('status')).toBe(mockFailedJob.detailedStatus);
-      expect(findCiBadgeLink().props('size')).toBe('sm');
+      expect(findCiIcon().props('status')).toBe(mockFailedJob.detailedStatus);
     });
 
     it('when data is not present, shows no status badge', () => {
@@ -61,7 +60,7 @@ describe('RunnerJobFailure', () => {
         job: { detailedStatus: null },
       });
 
-      expect(findCiBadgeLink().exists()).toBe(false);
+      expect(findCiIcon().exists()).toBe(false);
     });
   });
 
diff --git a/qa/qa/ee/page/operations_dashboard.rb b/qa/qa/ee/page/operations_dashboard.rb
index b063c0a30968e95669c3ac1f27b3e3421e1fa1f4..fa9dc2cd71d020d00a50b9c2d9380dcab4157d1b 100644
--- a/qa/qa/ee/page/operations_dashboard.rb
+++ b/qa/qa/ee/page/operations_dashboard.rb
@@ -5,7 +5,7 @@ module EE
     module Page
       class OperationsDashboard < QA::Page::Base
         include QA::Page::Component::ProjectSelector
-        include QA::Page::Component::CiBadgeLink
+        include QA::Page::Component::CiIcon
 
         view 'ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue' do
           element 'add-projects-button'
@@ -43,7 +43,7 @@ def find_project_card_by_name(name)
 
         def pipeline_status(project_card)
           within(project_card) do
-            find_element('ci-badge-text')
+            find_element('ci-icon-text')
           end.text
         end
 
diff --git a/qa/qa/page/component/ci_badge_link.rb b/qa/qa/page/component/ci_icon.rb
similarity index 86%
rename from qa/qa/page/component/ci_badge_link.rb
rename to qa/qa/page/component/ci_icon.rb
index d0a40b4bfbe9aa3f0dec4f951dcb4f8e481e07a4..1ddcc810f95547de02c5aca168509399573c6800 100644
--- a/qa/qa/page/component/ci_badge_link.rb
+++ b/qa/qa/page/component/ci_icon.rb
@@ -3,10 +3,12 @@
 module QA
   module Page
     module Component
-      module CiBadgeLink
+      module CiIcon
         extend QA::Page::PageConcern
 
+        # rubocop:disable Layout/LineLength
         COMPLETED_STATUSES = %w[Passed Failed Canceled Blocked Skipped Manual].freeze # excludes Created, Pending, Running
+        # rubocop:enable Layout/LineLength
         INCOMPLETE_STATUSES = %w[Pending Created Running].freeze
 
         # e.g. def passed?(timeout: nil); status_badge == 'Passed'; end
@@ -31,14 +33,14 @@ module CiBadgeLink
         def self.included(base)
           super
 
-          base.view 'app/assets/javascripts/vue_shared/components/ci_badge_link.vue' do
-            element 'ci-badge-text'
+          base.view 'app/assets/javascripts/vue_shared/components/ci_icon.vue' do
+            element 'ci-icon-text'
           end
         end
 
         def status_badge
           # There are more than 1 on job details page
-          all_elements('ci-badge-text', minimum: 1).first.text
+          all_elements('ci-icon-text', minimum: 1).first.text
         end
 
         def completed?(timeout: 60)
diff --git a/qa/qa/page/project/job/show.rb b/qa/qa/page/project/job/show.rb
index a1ad3a50be7be95de753e8e16c115d99231627ac..1d253a62ceb94dd8d90b4611491760517f1da93b 100644
--- a/qa/qa/page/project/job/show.rb
+++ b/qa/qa/page/project/job/show.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Job
         class Show < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/job_details/components/log/log.vue' do
             element 'job-log-content'
diff --git a/qa/qa/page/project/pipeline/index.rb b/qa/qa/page/project/pipeline/index.rb
index 5a050eaa8bb28cc1c9c87dac428ca5d2dc801842..bd5d934cc5060d402d785b65b23913d121c21c16 100644
--- a/qa/qa/page/project/pipeline/index.rb
+++ b/qa/qa/page/project/pipeline/index.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Pipeline
         class Index < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/pipelines_page/components/pipeline_url.vue' do
             element 'pipeline-url-link'
@@ -25,7 +25,7 @@ def latest_pipeline
 
           def latest_pipeline_status
             within(latest_pipeline) do
-              find_element('ci-badge-text')
+              find_element('ci-icon-text')
             end.text
           end
 
diff --git a/qa/qa/page/project/pipeline/show.rb b/qa/qa/page/project/pipeline/show.rb
index 0caf373fffd83434acd4c7773ac4d398ffe46861..16b931c1a568670f025b4a60072cd62bc878fd91 100644
--- a/qa/qa/page/project/pipeline/show.rb
+++ b/qa/qa/page/project/pipeline/show.rb
@@ -5,7 +5,7 @@ module Page
     module Project
       module Pipeline
         class Show < QA::Page::Base
-          include Component::CiBadgeLink
+          include Component::CiIcon
 
           view 'app/assets/javascripts/ci/pipeline_details/header/pipeline_details_header.vue' do
             element 'pipeline-details-header', required: true
diff --git a/spec/features/admin/admin_jobs_spec.rb b/spec/features/admin/admin_jobs_spec.rb
index b125974532beb26f91b81de9f343ac6c62ed59f2..b3e21d023544561646396a527588b9f475252821 100644
--- a/spec/features/admin/admin_jobs_spec.rb
+++ b/spec/features/admin/admin_jobs_spec.rb
@@ -132,7 +132,7 @@
 
         within_testid('jobs-table') do
           expect(page).to have_selector('[data-testid="jobs-table-row"]', count: 1)
-          expect(find_by_testid('ci-badge-text')).to have_content('Failed')
+          expect(find_by_testid('ci-icon-text')).to have_content('Failed')
         end
       end
     end
diff --git a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
index 69eb6b0dc17551fad4dc5ee455a66fb0d9d85037..5e683ddf7baf6c774edb0ed588e3c4faf893b86b 100644
--- a/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
+++ b/spec/features/merge_request/user_sees_merge_request_pipelines_spec.rb
@@ -86,7 +86,7 @@ def mr_widget_title
 
       it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Created', count: 2)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Created', count: 2)
           expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{detached_merge_request_pipeline.id}")
         end
       end
@@ -122,7 +122,7 @@ def mr_widget_title
 
         it 'sees branch pipelines and detached merge request pipelines in correct order' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
 
             expect(all('[data-testid="pipeline-url-link"]')[0])
               .to have_content("##{detached_merge_request_pipeline_2.id}")
@@ -220,7 +220,7 @@ def mr_widget_title
 
         it 'sees a branch pipeline in pipeline tab' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Created', count: 1)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Created', count: 1)
             expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{push_pipeline.id}")
           end
         end
@@ -273,7 +273,7 @@ def mr_widget_title
 
       it 'sees branch pipelines and detached merge request pipelines in correct order' do
         page.within('.ci-table') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 2)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 2)
           expect(first('[data-testid="pipeline-url-link"]')).to have_content("##{detached_merge_request_pipeline.id}")
         end
       end
@@ -289,7 +289,7 @@ def mr_widget_title
       it 'sees pipeline list in forked project' do
         visit project_pipelines_path(forked_project)
 
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 2)
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 2)
       end
 
       context 'when a user updated a merge request from a forked project to the parent project' do
@@ -315,7 +315,7 @@ def mr_widget_title
 
         it 'sees branch pipelines and detached merge request pipelines in correct order' do
           page.within('.ci-table') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
 
             expect(all('[data-testid="pipeline-url-link"]')[0])
               .to have_content("##{detached_merge_request_pipeline_2.id}")
@@ -358,7 +358,7 @@ def mr_widget_title
         it 'sees pipeline list in forked project' do
           visit project_pipelines_path(forked_project)
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending', count: 4)
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending', count: 4)
         end
       end
 
diff --git a/spec/features/merge_request/user_sees_pipelines_spec.rb b/spec/features/merge_request/user_sees_pipelines_spec.rb
index a68b3c444fe6988eea6dadae6d6aa2eab44433d3..c21c9043f01b2446ed82765ea96eb3b2508d0dc0 100644
--- a/spec/features/merge_request/user_sees_pipelines_spec.rb
+++ b/spec/features/merge_request/user_sees_pipelines_spec.rb
@@ -49,7 +49,7 @@
           wait_for_requests
 
           page.within(find('[data-testid="pipeline-table-row"]', match: :first)) do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
             expect(page).to have_content(pipeline.id)
             expect(page).to have_content('API')
             expect(page).to have_css('[data-testid="pipeline-mini-graph"]')
diff --git a/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb b/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
index 00cb5474ea06c383e448f0ca64d2c5869eec040b..56a3a252f3e96fc3a68f08388c599da4fd40bd38 100644
--- a/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
+++ b/spec/features/projects/commit/user_sees_pipelines_tab_spec.rb
@@ -36,7 +36,7 @@
       wait_for_requests
 
       page.within('[data-testid="pipeline-table-row"]') do
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
         expect(page).to have_content(pipeline.id)
         expect(page).to have_content('API')
         expect(page).to have_css('[data-testid="pipeline-mini-graph"]')
diff --git a/spec/features/projects/jobs/user_browses_jobs_spec.rb b/spec/features/projects/jobs/user_browses_jobs_spec.rb
index fc67d7dedcc118a72456838e3e1dfbd024924691..115b3dda5b27123664dabf18bc373084bdf3c148 100644
--- a/spec/features/projects/jobs/user_browses_jobs_spec.rb
+++ b/spec/features/projects/jobs/user_browses_jobs_spec.rb
@@ -72,7 +72,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
           expect(page).not_to have_selector('[data-testid="jobs-table-error-alert"]')
         end
       end
@@ -93,7 +93,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
       end
 
@@ -133,7 +133,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
 
         it 'unschedules a job successfully' do
@@ -141,7 +141,7 @@ def visit_jobs_page
 
           wait_for_requests
 
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Manual')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Manual')
         end
       end
 
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 12ed2558712d1b368fdd7812b51fbe5cd6552560..050ed4e0e4cd629cd62660ce0e71bcba57b8ce47 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -66,7 +66,7 @@
 
         wait_for_requests
 
-        expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Passed')
+        expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Passed')
       end
 
       it 'shows commit`s data', :js do
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index f042a12884c774b9654e39c62412baaeab40b2b1..ae0b02dac07d92f40f10df63d1f16ecb746a0595 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -224,7 +224,7 @@
 
           expect(page).not_to have_content('Retry job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -278,7 +278,7 @@
 
           expect(page).not_to have_content('Retry job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
 
@@ -312,7 +312,7 @@
 
           expect(page).not_to have_content('Play job')
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -537,7 +537,7 @@
 
         it 'shows running status in pipeline header', :sidekiq_might_not_need_inline do
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -900,7 +900,7 @@
         subject
 
         within('[data-testid="pipeline-details-header"]') do
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Pending')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Pending')
         end
 
         within('.js-pipeline-graph') do
@@ -925,7 +925,7 @@
           subject
 
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
 
           within('.js-pipeline-graph') do
@@ -954,7 +954,7 @@
           subject
 
           within('[data-testid="pipeline-details-header"]') do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Waiting')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Waiting')
           end
 
           within('.js-pipeline-graph') do
@@ -974,7 +974,7 @@
             subject
 
             within('[data-testid="pipeline-details-header"]') do
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
             end
 
             within('.js-pipeline-graph') do
@@ -1002,7 +1002,7 @@
             subject
 
             within('[data-testid="pipeline-details-header"]') do
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Waiting')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Waiting')
             end
 
             within('.js-pipeline-graph') do
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index fcbe8060fc304fd268bdd80c6d604de74399f70a..91f926af0222dac00038b57384c6fb99c4402987 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -115,7 +115,7 @@
 
         it 'indicates that pipeline can be canceled' do
           expect(page).to have_selector('.js-pipelines-cancel-button')
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
         end
 
         context 'when canceling' do
@@ -127,7 +127,7 @@
 
           it 'indicated that pipelines was canceled', :sidekiq_might_not_need_inline do
             expect(page).not_to have_selector('.js-pipelines-cancel-button')
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
           end
         end
       end
@@ -144,7 +144,7 @@
 
         it 'indicates that pipeline can be retried' do
           expect(page).to have_selector('.js-pipelines-retry-button')
-          expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Failed')
+          expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Failed')
         end
 
         context 'when retrying' do
@@ -155,7 +155,7 @@
 
           it 'shows running pipeline that is not retryable' do
             expect(page).not_to have_selector('.js-pipelines-retry-button')
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
         end
       end
@@ -396,7 +396,7 @@
           end
 
           it 'shows the pipeline as preparing' do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Preparing')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Preparing')
           end
         end
 
@@ -417,7 +417,7 @@
           end
 
           it 'has pipeline running' do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Running')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Running')
           end
 
           context 'when canceling' do
@@ -428,7 +428,7 @@
 
             it 'indicates that pipeline was canceled', :sidekiq_might_not_need_inline do
               expect(page).not_to have_selector('.js-pipelines-cancel-button')
-              expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Canceled')
+              expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Canceled')
             end
           end
         end
@@ -450,7 +450,7 @@
           end
 
           it 'has failed pipeline', :sidekiq_might_not_need_inline do
-            expect(page).to have_selector('[data-testid="ci-badge-link"]', text: 'Failed')
+            expect(page).to have_selector('[data-testid="ci-icon"]', text: 'Failed')
           end
         end
       end
diff --git a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
index 3628af31aa10f3669649151a8783ad19892f6aac..ba77d90f4e2cf3c904347c78a5ec1fd1094145e6 100644
--- a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
@@ -2,7 +2,7 @@ import { GlLoadingIcon, GlTable, GlLink, GlPagination, GlModal, GlFormCheckbox }
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import getJobArtifactsResponse from 'test_fixtures/graphql/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import JobArtifactsTable from '~/ci/artifacts/components/job_artifacts_table.vue';
 import ArtifactsTableRowDetails from '~/ci/artifacts/components/artifacts_table_row_details.vue';
@@ -51,7 +51,7 @@ describe('JobArtifactsTable component', () => {
 
   const findStatuses = () => wrapper.findAllByTestId('job-artifacts-job-status');
   const findSuccessfulJobStatus = () => findStatuses().at(0);
-  const findCiBadgeLink = () => findSuccessfulJobStatus().findComponent(CiBadgeLink);
+  const findCiIcon = () => findSuccessfulJobStatus().findComponent(CiIcon);
 
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findJobLink = () => findLinks().at(0);
@@ -201,12 +201,11 @@ describe('JobArtifactsTable component', () => {
     });
 
     it('shows the job status as an icon for a successful job', () => {
-      expect(findCiBadgeLink().props()).toMatchObject({
+      expect(findCiIcon().props()).toMatchObject({
         status: {
           group: 'success',
         },
-        size: 'sm',
-        showText: false,
+        showStatusText: false,
       });
     });
 
diff --git a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
index 6ab9520508d977dc65b01996628117212606b2de..c061332ba136811487a1e03d759087da5bb810dd 100644
--- a/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
+++ b/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
@@ -2,8 +2,8 @@ import { GlAvatar, GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CiResourceHeader from '~/ci/catalog/components/details/ci_resource_header.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import CiResourceAbout from '~/ci/catalog/components/details/ci_resource_about.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { catalogSharedDataMock, catalogAdditionalDetailsMock } from '../../mock';
 
 describe('CiResourceHeader', () => {
@@ -24,7 +24,7 @@ describe('CiResourceHeader', () => {
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
   const findVersionBadge = () => wrapper.findComponent(GlBadge);
-  const findPipelineStatusBadge = () => wrapper.findComponent(CiBadgeLink);
+  const findPipelineStatusBadge = () => wrapper.findComponent(CiIcon);
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMountExtended(CiResourceHeader, {
@@ -126,8 +126,7 @@ describe('CiResourceHeader', () => {
         expect(findPipelineStatusBadge().exists()).toBe(hasPipelineBadge);
         if (hasPipelineBadge) {
           expect(findPipelineStatusBadge().props()).toEqual({
-            showText: true,
-            size: 'sm',
+            showStatusText: true,
             status: pipelineStatus,
             showTooltip: true,
             useLink: true,
diff --git a/spec/frontend/ci/common/pipelines_table_spec.js b/spec/frontend/ci/common/pipelines_table_spec.js
index 6cf391d72ca096cdca97758bb53ce0b5ca46387c..f6d3121109fdf02451cea052dcd1ee24d2b6f4f9 100644
--- a/spec/frontend/ci/common/pipelines_table_spec.js
+++ b/spec/frontend/ci/common/pipelines_table_spec.js
@@ -16,7 +16,7 @@ import {
   TRACKING_CATEGORIES,
 } from '~/ci/constants';
 
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('Pipelines Table', () => {
   let wrapper;
@@ -58,7 +58,7 @@ describe('Pipelines Table', () => {
   };
 
   const findGlTableLite = () => wrapper.findComponent(GlTableLite);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findPipelineInfo = () => wrapper.findComponent(PipelineUrl);
   const findTriggerer = () => wrapper.findComponent(PipelineTriggerer);
   const findLegacyPipelineMiniGraph = () => wrapper.findComponent(LegacyPipelineMiniGraph);
@@ -96,7 +96,7 @@ describe('Pipelines Table', () => {
 
     describe('status cell', () => {
       it('should render a status badge', () => {
-        expect(findCiBadgeLink().exists()).toBe(true);
+        expect(findCiIcon().exists()).toBe(true);
       });
     });
 
@@ -265,7 +265,7 @@ describe('Pipelines Table', () => {
     });
 
     it('tracks status badge click', () => {
-      findCiBadgeLink().vm.$emit('ciStatusBadgeClick');
+      findCiIcon().vm.$emit('ciStatusBadgeClick');
 
       expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_ci_status_badge', {
         label: TRACKING_CATEGORIES.table,
diff --git a/spec/frontend/ci/job_details/components/job_header_spec.js b/spec/frontend/ci/job_details/components/job_header_spec.js
index 609369316f553bc5e48636cad8a8319d61cf9356..d12267807acc63277600bdf1f88924c2de7df683 100644
--- a/spec/frontend/ci/job_details/components/job_header_spec.js
+++ b/spec/frontend/ci/job_details/components/job_header_spec.js
@@ -1,7 +1,7 @@
 import { GlButton, GlAvatarLink, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import JobHeader from '~/ci/job_details/components/job_header.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -29,7 +29,7 @@ describe('Header CI Component', () => {
     shouldRenderTriggeredLabel: true,
   };
 
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip);
   const findUserLink = () => wrapper.findComponent(GlAvatarLink);
   const findSidebarToggleBtn = () => wrapper.findComponent(GlButton);
@@ -57,7 +57,7 @@ describe('Header CI Component', () => {
     });
 
     it('should render status badge', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
     });
 
     it('should render timeago date', () => {
diff --git a/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js b/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
index e007896c81eef23e59661bc4cfb4f4a420d371f2..54c5a73f757143a26b8621f1dc9e59aab34cd5c8 100644
--- a/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
+++ b/spec/frontend/ci/job_details/components/sidebar/stages_dropdown_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { Mousetrap } from '~/lib/mousetrap';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import StagesDropdown from '~/ci/job_details/components/sidebar/stages_dropdown.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import * as copyToClipboard from '~/behaviors/copy_to_clipboard';
 import {
   mockPipelineWithoutRef,
@@ -15,7 +15,7 @@ import {
 describe('Stages Dropdown', () => {
   let wrapper;
 
-  const findStatus = () => wrapper.findComponent(CiBadgeLink);
+  const findStatus = () => wrapper.findComponent(CiIcon);
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findSelectedStageText = () => findDropdown().props('toggleText');
 
@@ -47,7 +47,6 @@ describe('Stages Dropdown', () => {
 
     it('renders pipeline status', () => {
       expect(findStatus().props('status')).toBe(mockPipelineWithoutMR.details.status);
-      expect(findStatus().props('size')).toBe('sm');
     });
 
     it('renders dropdown with stages', () => {
diff --git a/spec/frontend/ci/jobs_page/components/jobs_table_spec.js b/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
index d4e0ce92bc25576a8672b637d3ee92674a9cb142..d14afe7dd3e62d3d3a48e36f079f62bd01538188 100644
--- a/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
+++ b/spec/frontend/ci/jobs_page/components/jobs_table_spec.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import JobsTable from '~/ci/jobs_page/components/jobs_table.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { DEFAULT_FIELDS_ADMIN } from '~/ci/admin/jobs_table/constants';
 import ProjectCell from '~/ci/admin/jobs_table/components/cells/project_cell.vue';
 import RunnerCell from '~/ci/admin/jobs_table/components/cells/runner_cell.vue';
@@ -13,7 +13,7 @@ describe('Jobs Table', () => {
   let wrapper;
 
   const findTable = () => wrapper.findComponent(GlTable);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findTableRows = () => wrapper.findAllByTestId('jobs-table-row');
   const findJobStage = () => wrapper.findByTestId('job-stage-name');
   const findJobName = () => wrapper.findByTestId('job-name');
@@ -45,7 +45,7 @@ describe('Jobs Table', () => {
     });
 
     it('displays job status', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
     });
 
     it('displays the job stage, id and name', () => {
diff --git a/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js b/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
index de9ee8a16bf404f16ca3381acece6445cc5f3f50..cda84a9e4d31781e3cc007a1522e5ede678bcbad 100644
--- a/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
+++ b/spec/frontend/ci/pipeline_details/graph/components/job_item_spec.js
@@ -5,7 +5,7 @@ import JobItem from '~/ci/pipeline_details/graph/components/job_item.vue';
 import axios from '~/lib/utils/axios_utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import ActionComponent from '~/ci/common/private/job_action_component.vue';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
@@ -31,7 +31,7 @@ describe('pipeline graph job item', () => {
   const findActionComponent = () => wrapper.findByTestId('ci-action-button');
   const findBadge = () => wrapper.findByTestId('job-bridge-badge');
   const findJobLink = () => wrapper.findByTestId('job-with-link');
-  const findJobCiBadge = () => wrapper.findComponent(CiBadgeLink);
+  const findJobCiIcon = () => wrapper.findComponent(CiIcon);
   const findModal = () => wrapper.findComponent(GlModal);
 
   const clickOnModalPrimaryBtn = () => findModal().vm.$emit('primary');
@@ -60,7 +60,7 @@ describe('pipeline graph job item', () => {
         ...mocks,
       },
       stubs: {
-        CiBadgeLink,
+        CiIcon,
       },
     });
   };
@@ -86,8 +86,8 @@ describe('pipeline graph job item', () => {
 
       expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
 
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().find('.ci-status-icon-success').exists()).toBe(true);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().find('.ci-status-icon-success').exists()).toBe(true);
 
       expect(wrapper.text()).toBe(mockJob.name);
     });
@@ -105,8 +105,8 @@ describe('pipeline graph job item', () => {
     });
 
     it('should render status and name', () => {
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().find('.ci-status-icon-success').exists()).toBe(true);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().find('.ci-status-icon-success').exists()).toBe(true);
       expect(findJobLink().exists()).toBe(false);
 
       expect(wrapper.text()).toBe(mockJobWithoutDetails.name);
@@ -117,12 +117,12 @@ describe('pipeline graph job item', () => {
     });
   });
 
-  describe('CiBadgeLink', () => {
+  describe('CiIcon', () => {
     it('should not render a link', () => {
       createWrapper();
 
-      expect(findJobCiBadge().exists()).toBe(true);
-      expect(findJobCiBadge().props('useLink')).toBe(false);
+      expect(findJobCiIcon().exists()).toBe(true);
+      expect(findJobCiIcon().props('useLink')).toBe(false);
     });
   });
 
diff --git a/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js b/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
index 6e13658a7735ce69f990b0f1f001bef4b7ab3c2c..6b8a525a15aca735fb4385666d6736a186f062c5 100644
--- a/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
+++ b/spec/frontend/ci/pipeline_details/header/pipeline_details_header_spec.js
@@ -7,7 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import PipelineDetailsHeader from '~/ci/pipeline_details/header/pipeline_details_header.vue';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/ci/constants';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import cancelPipelineMutation from '~/ci/pipeline_details/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/ci/pipeline_details/graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '~/ci/pipeline_details/graphql/mutations/retry_pipeline.mutation.graphql';
@@ -56,7 +56,7 @@ describe('Pipeline details header', () => {
     .mockResolvedValue(pipelineDeleteMutationResponseFailed);
 
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findStatus = () => wrapper.findComponent(CiBadgeLink);
+  const findStatus = () => wrapper.findComponent(CiIcon);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllBadges = () => wrapper.findAllComponents(GlBadge);
   const findDeleteModal = () => wrapper.findComponent(GlModal);
diff --git a/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js b/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
index 4b357a9fc7c988181fae34c3130c359456f735f0..87df7676bf1f603f959cdbb930d2141ee9e87d68 100644
--- a/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
+++ b/spec/frontend/ci/pipeline_mini_graph/legacy_pipeline_stage_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import LegacyPipelineStage from '~/ci/pipeline_mini_graph/legacy_pipeline_stage.vue';
@@ -52,7 +52,7 @@ describe('Pipelines stage component', () => {
   });
 
   const findCiActionBtn = () => wrapper.find('.js-ci-action');
-  const findCiIcon = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
   const findDropdownMenu = () =>
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
index ae069145292a2b65791f270cce8ed071cd584011..b79e7c6e251e77be3c7cc92953b2e9db0e6fabc6 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
@@ -1,5 +1,5 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import PipelineScheduleLastPipeline from '~/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue';
 import { mockPipelineScheduleNodes } from '../../../mock_data';
 
@@ -18,16 +18,14 @@ describe('Pipeline schedule last pipeline', () => {
     });
   };
 
-  const findCIBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
   const findStatusText = () => wrapper.findByTestId('pipeline-schedule-status-text');
 
   it('displays pipeline status', () => {
     createComponent();
 
-    expect(findCIBadgeLink().exists()).toBe(true);
-    expect(findCIBadgeLink().props('status')).toBe(
-      defaultProps.schedule.lastPipeline.detailedStatus,
-    );
+    expect(findCiIcon().exists()).toBe(true);
+    expect(findCiIcon().props('status')).toBe(defaultProps.schedule.lastPipeline.detailedStatus);
     expect(findStatusText().exists()).toBe(false);
   });
 
@@ -35,6 +33,6 @@ describe('Pipeline schedule last pipeline', () => {
     createComponent({ schedule: mockPipelineScheduleNodes[0] });
 
     expect(findStatusText().text()).toBe('None');
-    expect(findCIBadgeLink().exists()).toBe(false);
+    expect(findCiIcon().exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
index 844a2d81832648da8d86faff1a85daef5cf71fb8..008a1b2c068485126b68024aa711aa2a4668825f 100644
--- a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
+++ b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
@@ -5,7 +5,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitBoxPipelineStatus from '~/projects/commit_box/info/components/commit_box_pipeline_status.vue';
 import {
   COMMIT_BOX_POLL_INTERVAL,
@@ -32,7 +32,7 @@ describe('Commit box pipeline status', () => {
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findCiBadgeLink = () => wrapper.findComponent(CiBadgeLink);
+  const findCiIcon = () => wrapper.findComponent(CiIcon);
 
   const advanceToNextFetch = () => {
     jest.advanceTimersByTime(COMMIT_BOX_POLL_INTERVAL);
@@ -50,7 +50,7 @@ describe('Commit box pipeline status', () => {
         ...mockProvide,
       },
       stubs: {
-        CiBadgeLink,
+        CiIcon,
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -61,7 +61,7 @@ describe('Commit box pipeline status', () => {
       createComponent();
 
       expect(findLoadingIcon().exists()).toBe(true);
-      expect(findCiBadgeLink().exists()).toBe(false);
+      expect(findCiIcon().exists()).toBe(false);
     });
   });
 
@@ -73,7 +73,7 @@ describe('Commit box pipeline status', () => {
     });
 
     it('should display pipeline status after the query is resolved successfully', () => {
-      expect(findCiBadgeLink().exists()).toBe(true);
+      expect(findCiIcon().exists()).toBe(true);
 
       expect(findLoadingIcon().exists()).toBe(false);
       expect(createAlert).toHaveBeenCalledTimes(0);
@@ -90,7 +90,7 @@ describe('Commit box pipeline status', () => {
         },
       } = mockPipelineStatusResponse;
 
-      expect(findCiBadgeLink().attributes('href')).toBe(detailsPath);
+      expect(findCiIcon().attributes('href')).toBe(detailsPath);
     });
   });
 
diff --git a/spec/frontend/ide/components/jobs/detail/description_spec.js b/spec/frontend/ide/components/jobs/detail/description_spec.js
index 2bb0f3fccf48d4d8397aaf558ad53af41094d290..5465615bf383718228cea711b9807a5bc26e0a0d 100644
--- a/spec/frontend/ide/components/jobs/detail/description_spec.js
+++ b/spec/frontend/ide/components/jobs/detail/description_spec.js
@@ -23,10 +23,6 @@ describe('IDE job description', () => {
     expect(wrapper.find('.ci-status-icon').findComponent(GlIcon).exists()).toBe(true);
   });
 
-  it('renders a borderless CI icon', () => {
-    expect(wrapper.find('.borderless').findComponent(GlIcon).exists()).toBe(true);
-  });
-
   it('renders bridge job details without the job link', () => {
     wrapper = mount(Description, {
       propsData: {
diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js
index ab442a2781763addd33d65affcc6b84c1a011ccd..dc0f732d11e1e6be5d07a1ffdfcb196a23b14e00 100644
--- a/spec/frontend/ide/components/jobs/item_spec.js
+++ b/spec/frontend/ide/components/jobs/item_spec.js
@@ -18,7 +18,7 @@ describe('IDE jobs item', () => {
   });
 
   it('renders CI icon', () => {
-    expect(wrapper.find('[data-testid="status_success_borderless-icon"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="status_success-icon"]').exists()).toBe(true);
   });
 
   it('does not render view logs button if not started', async () => {
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 44b9b44fc77a174b69151d364ced55a4140b527b..99cfc4f418fc0961152fe786adacd6c8859628eb 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -10,12 +10,10 @@ exports[`Repository last commit component renders commit widget 1`] = `
     <div
       class="gl-ml-5"
     >
-      <ci-badge-link-stub
+      <ci-icon-stub
         aria-label="Pipeline: failed"
         class="js-commit-pipeline"
-        details-path="https://test.com/pipeline"
         showtooltip="true"
-        size="md"
         status="[object Object]"
         uselink="true"
       />
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
deleted file mode 100644
index e1660225a5c3d98d23f4ef4fee6e15efe399b758..0000000000000000000000000000000000000000
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import { GlBadge } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
-
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-}));
-
-describe('CI Badge Link Component', () => {
-  let wrapper;
-
-  const statuses = {
-    canceled: {
-      text: 'canceled',
-      label: 'canceled',
-      group: 'canceled',
-      icon: 'status_canceled',
-      details_path: 'status/canceled',
-    },
-    created: {
-      text: 'created',
-      label: 'created',
-      group: 'created',
-      icon: 'status_created',
-      details_path: 'status/created',
-    },
-    failed: {
-      text: 'failed',
-      label: 'failed',
-      group: 'failed',
-      icon: 'status_failed',
-      details_path: 'status/failed',
-    },
-    manual: {
-      text: 'manual',
-      label: 'manual action',
-      group: 'manual',
-      icon: 'status_manual',
-      details_path: 'status/manual',
-    },
-    pending: {
-      text: 'pending',
-      label: 'pending',
-      group: 'pending',
-      icon: 'status_pending',
-      details_path: 'status/pending',
-    },
-    preparing: {
-      text: 'preparing',
-      label: 'preparing',
-      group: 'preparing',
-      icon: 'status_preparing',
-      details_path: 'status/preparing',
-    },
-    running: {
-      text: 'running',
-      label: 'running',
-      group: 'running',
-      icon: 'status_running',
-      details_path: 'status/running',
-    },
-    scheduled: {
-      text: 'scheduled',
-      label: 'scheduled',
-      group: 'scheduled',
-      icon: 'status_scheduled',
-      details_path: 'status/scheduled',
-    },
-    skipped: {
-      text: 'skipped',
-      label: 'skipped',
-      group: 'skipped',
-      icon: 'status_skipped',
-      details_path: 'status/skipped',
-    },
-    success_warining: {
-      text: 'warning',
-      label: 'passed with warnings',
-      group: 'success-with-warnings',
-      icon: 'status_warning',
-      details_path: 'status/warning',
-    },
-    success: {
-      text: 'passed',
-      label: 'passed',
-      group: 'passed',
-      icon: 'status_success',
-      details_path: 'status/passed',
-    },
-  };
-
-  const findIcon = () => wrapper.findComponent(CiIcon);
-  const findBadge = () => wrapper.findComponent(GlBadge);
-  const findBadgeText = () => wrapper.find('[data-testid="ci-badge-text"');
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(CiBadgeLink, { propsData });
-  };
-
-  it.each(Object.keys(statuses))('should render badge for status: %s', (status) => {
-    createComponent({ status: statuses[status] });
-
-    expect(wrapper.attributes('href')).toBe(statuses[status].details_path);
-    expect(wrapper.text()).toBe(statuses[status].text);
-    expect(findBadge().props('size')).toBe('md');
-    expect(findIcon().exists()).toBe(true);
-  });
-
-  it.each`
-    status                       | textColor               | variant
-    ${statuses.success}          | ${'gl-text-green-700'}  | ${'success'}
-    ${statuses.success_warining} | ${'gl-text-orange-700'} | ${'warning'}
-    ${statuses.failed}           | ${'gl-text-red-700'}    | ${'danger'}
-    ${statuses.running}          | ${'gl-text-blue-700'}   | ${'info'}
-    ${statuses.pending}          | ${'gl-text-orange-700'} | ${'warning'}
-    ${statuses.preparing}        | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.canceled}         | ${'gl-text-gray-700'}   | ${'neutral'}
-    ${statuses.scheduled}        | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.skipped}          | ${'gl-text-gray-600'}   | ${'muted'}
-    ${statuses.manual}           | ${'gl-text-gray-700'}   | ${'neutral'}
-    ${statuses.created}          | ${'gl-text-gray-600'}   | ${'muted'}
-  `(
-    'should contain correct badge class and variant for status: $status.text',
-    ({ status, textColor, variant }) => {
-      createComponent({ status });
-
-      expect(findBadgeText().classes()).toContain(textColor);
-      expect(findBadge().props('variant')).toBe(variant);
-    },
-  );
-
-  it('should not render label', () => {
-    createComponent({ status: statuses.canceled, showText: false });
-
-    expect(wrapper.text()).toBe('');
-  });
-
-  it('should emit ciStatusBadgeClick event', () => {
-    createComponent({ status: statuses.success });
-
-    findBadge().vm.$emit('click');
-
-    expect(wrapper.emitted('ciStatusBadgeClick')).toEqual([[]]);
-  });
-
-  it('should render dynamic badge size', () => {
-    createComponent({ status: statuses.success, size: 'lg' });
-
-    expect(findBadge().props('size')).toBe('lg');
-  });
-
-  it('should have class `gl-px-2` when `showText` is false', () => {
-    createComponent({ status: statuses.success, size: 'md', showText: false });
-
-    expect(findBadge().classes()).toContain('gl-px-2');
-  });
-});
diff --git a/spec/frontend/vue_shared/components/ci_icon_spec.js b/spec/frontend/vue_shared/components/ci_icon_spec.js
index c907b776b9147f532a9e024eb1b5cf365bcf0572..1dc46538ec495782df955a0e23e7d789062a3e2e 100644
--- a/spec/frontend/vue_shared/components/ci_icon_spec.js
+++ b/spec/frontend/vue_shared/components/ci_icon_spec.js
@@ -25,46 +25,6 @@ describe('CI Icon component', () => {
     expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
   });
 
-  describe.each`
-    isActive
-    ${true}
-    ${false}
-  `('when isActive is $isActive', ({ isActive }) => {
-    it(`"active" class is ${isActive ? 'not ' : ''}added`, () => {
-      wrapper = shallowMount(CiIcon, {
-        propsData: {
-          status: {
-            group: 'success',
-            icon: 'status_success',
-          },
-          isActive,
-        },
-      });
-
-      expect(wrapper.classes('active')).toBe(isActive);
-    });
-  });
-
-  describe.each`
-    isInteractive
-    ${true}
-    ${false}
-  `('when isInteractive is $isInteractive', ({ isInteractive }) => {
-    it(`"interactive" class is ${isInteractive ? 'not ' : ''}added`, () => {
-      wrapper = shallowMount(CiIcon, {
-        propsData: {
-          status: {
-            group: 'success',
-            icon: 'status_success',
-          },
-          isInteractive,
-        },
-      });
-
-      expect(wrapper.classes('interactive')).toBe(isInteractive);
-    });
-  });
-
   describe('rendering a status', () => {
     it.each`
       icon                 | group         | cssClass
@@ -87,7 +47,7 @@ describe('CI Icon component', () => {
         },
       });
 
-      expect(wrapper.classes()).toContain(cssClass);
+      expect(wrapper.find('.ci-icon-wrapper').classes()).toContain(cssClass);
     });
   });
 });