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 e33ce66ca66b42e72c10db4f027b6cbac518c5d1..44cf11acfe2004b32666140a99c29d42892521f3 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
@@ -158,7 +158,7 @@ export default {
         <a :href="status.detailsPath" class="gl-mr-auto">
           <ci-badge-link
             :status="status"
-            badge-size="md"
+            size="md"
             :show-text="false"
             data-testid="pipeline-status-icon"
           />
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 bbe0f1fbefc9cabf6b2a57c9aaf165276710dc1c..34640d49b807e68aaa9fc183a890a2b94fdcabdf 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 CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.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: {
-    CiIcon,
+    CiBadgeLink,
     GlLoadingIcon,
     GlDropdown,
     LegacyJobItem,
@@ -126,14 +126,13 @@ export default {
     @show="onShowDropdown"
   >
     <template #button-content>
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :is-active="isDropdownOpen"
-        :size="24"
+      <ci-badge-link
         :status="stage.status"
-        class="gl-display-inline-flex gl-align-items-center gl-border gl-z-index-1"
+        size="md"
+        :show-text="false"
+        :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">
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 8567654a89ec00c36abcad7a8e87291ec63206a9..cc703d29e23663ed224f9780edbd37c3d712c1b5 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 CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.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: {
-    CiIcon,
+    CiBadgeLink,
   },
   inject: {
     dataMethod: {
@@ -99,24 +99,18 @@ export default {
     }"
     class="linked-pipeline-mini-list gl-display-inline gl-vertical-align-middle"
   >
-    <a
+    <ci-badge-link
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
       v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
-      :href="pipeline.path"
+      :status="pipelineStatus(pipeline)"
+      size="md"
+      :show-text="false"
+      :show-tooltip="false"
       :class="triggerButtonClass(pipeline)"
-      class="linked-pipeline-mini-item gl-display-inline-flex gl-mr-2 gl-my-2 gl-rounded-full gl-vertical-align-middle"
+      class="linked-pipeline-mini-item gl-mb-0!"
       data-testid="linked-pipeline-mini-item"
-    >
-      <ci-icon
-        is-borderless
-        is-interactive
-        css-classes="gl-rounded-full"
-        :size="24"
-        :status="pipelineStatus(pipeline)"
-        class="gl-align-items-center gl-border gl-display-inline-flex"
-      />
-    </a>
+    />
 
     <a
       v-if="shouldRenderCounter"
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 8072116e2f54453c28e51781249e49135479742c..0feaf8db82bb0ffc81016aa4bf21e5d5cf407e13 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
@@ -67,7 +67,7 @@ export default {
       v-else
       :status="pipelineStatus"
       :details-path="pipelineStatus.detailsPath"
-      badge-size="md"
+      size="md"
       :show-text="false"
     />
   </div>
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 bfcd46103796a835e22a49fb26990f788b3cc347..8eec961f8375edb884dc19f347b47a3863e2f995 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 CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.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: {
-    CiIcon,
+    CiBadgeLink,
     GlLink,
     GlLoadingIcon,
     GlIcon,
@@ -194,9 +194,13 @@ export default {
       </p>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="gl-align-self-start gl-mt-2 gl-mr-3">
-        <ci-icon :status="status" :size="24" class="gl-display-flex" />
-      </a>
+      <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"
+      />
       <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
index 036c03a9a1e8bd200d490ecf697d7c4e7fb8eae3..3cd00972e1789411bc5dbaf7b6c753f0ce42d8ae 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -57,17 +57,27 @@ export default {
         return badgeSizeOptions[value] !== undefined;
       },
     },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    useLink: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
   },
   computed: {
     isNotLargeBadgeSize() {
-      return this.badgeSize !== badgeSizeOptions.lg;
+      return this.size !== badgeSizeOptions.lg;
     },
     title() {
-      return !this.showText ? this.status?.text : '';
+      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
-      return this.status.detailsPath || this.status.details_path;
+      return this.useLink && (this.status.detailsPath || this.status.details_path);
     },
     badgeStyles() {
       switch (this.status.icon) {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 4f8df5b78fd10f98b1d162ed40169faa1dc3da2f..a915e0b8bd93c7c626886f3b570a2959b78d4727 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -257,8 +257,8 @@ export default {
     />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"
-      data-testid="pipeline-container"
       :mr="mr"
+      data-testid="pipeline-container"
     />
     <mr-widget-approvals v-if="shouldRenderApprovals" :mr="mr" :service="service" />
     <report-widget-container>
diff --git a/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js b/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
index 25d1dd816784fee1b3679719423281de5e8e5dc9..46c6aa905920a081b2ae9178e80c210bb7e2e595 100644
--- a/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
+++ b/ee/spec/frontend/ci/catalog/components/details/ci_resource_header_spec.js
@@ -94,6 +94,8 @@ describe('CiResourceHeader', () => {
             showText: true,
             size: 'sm',
             status: pipelineStatus,
+            showTooltip: true,
+            useLink: true,
           });
         }
       });
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 30a0b868c5f45f49c127c1143116832d74593511..4b357a9fc7c988181fae34c3130c359456f735f0 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 CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.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(CiIcon);
+  const findCiIcon = () => wrapper.findComponent(CiBadgeLink);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggle = () => wrapper.find('button.dropdown-toggle');
   const findDropdownMenu = () =>
@@ -106,17 +106,6 @@ describe('Pipelines stage component', () => {
       expect(findDropdownToggle().exists()).toBe(true);
       expect(findCiIcon().exists()).toBe(true);
     });
-
-    it('renders a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('renders a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
   });
 
   describe('when user opens dropdown and stage request is successful', () => {
diff --git a/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js b/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
index 0396029cdafa079542d49588dca3d99aebcea1dc..3c9d235bfccdc2f72a2738259dfc2865981fa472 100644
--- a/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
+++ b/spec/frontend/ci/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
@@ -50,19 +50,6 @@ describe('Linked pipeline mini list', () => {
       expect(findCiIcon().exists()).toBe(true);
     });
 
-    it('should render a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('should render a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
-
     it('should render the correct ci status icon', () => {
       expect(findCiIcon().classes('ci-status-icon-running')).toBe(true);
     });
@@ -124,19 +111,6 @@ describe('Linked pipeline mini list', () => {
       expect(findLinkedPipelineMiniList().classes('is-downstream')).toBe(true);
     });
 
-    it('should render a borderless ci-icon', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().props('isBorderless')).toBe(true);
-      expect(findCiIcon().classes('borderless')).toBe(true);
-    });
-
-    it('should render a ci-icon with a custom border class', () => {
-      expect(findCiIcon().exists()).toBe(true);
-
-      expect(findCiIcon().classes('gl-border')).toBe(true);
-    });
-
     it('should render the pipeline counter', () => {
       expect(findLinkedPipelineCounter().exists()).toBe(true);
     });
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 208af4ba24a7494273c8a1105fd8ed5930abc688..1a5301c5525d627549aa1476489596461836c29a 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -14,8 +14,10 @@ exports[`Repository last commit component renders commit widget 1`] = `
         aria-label="Pipeline: failed"
         class="js-commit-pipeline"
         details-path="https://test.com/pipeline"
+        showtooltip="true"
         size="md"
         status="[object Object]"
+        uselink="true"
       />
     </div>
     <gl-button-group-stub
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
index 46fe5a0a74e757a0bb54eace1f957ee1a26d9932..e1660225a5c3d98d23f4ef4fee6e15efe399b758 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -151,7 +151,7 @@ describe('CI Badge Link Component', () => {
   });
 
   it('should have class `gl-px-2` when `showText` is false', () => {
-    createComponent({ status: statuses.success, size: 'lg', showText: false });
+    createComponent({ status: statuses.success, size: 'md', showText: false });
 
     expect(findBadge().classes()).toContain('gl-px-2');
   });