diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 538dc471f4f1caa3f1af75721178d23fb86063b1..8c271885779cf96a0ce1ab9edf663d51a38340f8 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -157,21 +157,19 @@ const initForkInfo = () => {
 
 initForkInfo();
 
-const CommitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
-const legacyStatusBadge = document.querySelector('.js-ci-status-badge-legacy');
+const commitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
 
-if (legacyStatusBadge) {
-  legacyStatusBadge.remove();
+if (commitPipelineStatusEl) {
   // eslint-disable-next-line no-new
   new Vue({
-    el: CommitPipelineStatusEl,
+    el: commitPipelineStatusEl,
     components: {
       CommitPipelineStatus,
     },
     render(createElement) {
       return createElement('commit-pipeline-status', {
         props: {
-          endpoint: CommitPipelineStatusEl.dataset.endpoint,
+          endpoint: commitPipelineStatusEl.dataset.endpoint,
         },
       });
     },
diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js
index 079f74dc8a2263485901f85b79ad1b5aeb247527..868c204eee6a25a11cc60b05ef790bbf2629ba9b 100644
--- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js
+++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_status.js
@@ -9,7 +9,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export default (selector = '.js-commit-pipeline-status') => {
+export default (selector = '.js-commit-box-pipeline-status') => {
   const el = document.querySelector(selector);
 
   if (!el) {
diff --git a/app/helpers/ci/status_helper.rb b/app/helpers/ci/status_helper.rb
index b5e772fb8ac001ca31fc92f75c9ded6fe85daf8b..f50d08e3b305ebe057b6195eba4680be107acd55 100644
--- a/app/helpers/ci/status_helper.rb
+++ b/app/helpers/ci/status_helper.rb
@@ -77,7 +77,7 @@ def render_ci_icon(
       title = "#{_('Pipeline')}: #{ci_label_for_status(status)}"
       data = { toggle: 'tooltip', placement: tooltip_placement, container: container, testid: 'ci-icon' }
 
-      icon_wrapper_class = "js-ci-status-badge-legacy ci-icon-gl-icon-wrapper"
+      icon_wrapper_class = "ci-icon-gl-icon-wrapper"
 
       content_tag(content_tag_variant, href: path, class: badge_classes, title: title, data: data) do
         if show_status_text
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index dead92038155bccddd7e54982021aa58c3540f45..a82ed54537507234cd929448430025c831f1dd15 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -10,7 +10,7 @@
 .info-well.gl-hidden.sm:gl-block
   .well-segment
     %ul.blob-commit-info
-      = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref
+      = render 'projects/commits/commit', commit: @last_commit, project: @project, ref: @ref, show_legacy_ci_icon: false
 
   - if project.licensed_feature_available?(:code_owners)
     #js-code-owners{ data: { blob_path: blob.path, project_path: @project.full_path, branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 4a7af15b10bcf3dc5b957e43f622a95fc3399771..0fe2005fb98595510e1f79baccf11af9f8327957 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -55,7 +55,7 @@
   - if can?(current_user, :read_pipeline, @last_pipeline)
     - status = @last_pipeline.detailed_status(current_user)
     .well-segment.pipeline-info
-      .js-commit-pipeline-status{ data: { full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
+      .js-commit-box-pipeline-status{ data: { full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
       #{ _('Pipeline') }
       = link_to "##{@last_pipeline.id}", project_pipeline_path(@project, @last_pipeline.id)
       = status&.label
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index f866a2d7eb5e2b9e157f310222328e3b13620461..99a767364f27f2aef221b4d0984d11a03771219b 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -15,6 +15,7 @@
 - ref               = local_assigns.fetch(:ref) { merge_request&.source_branch }
 - commit            = commit.present(current_user: current_user)
 - commit_status     = commit.detailed_status_for(ref)
+- show_legacy_ci_icon = local_assigns.fetch(:show_legacy_ci_icon, true)
 - tags              = commit.tags_for_display
 - collapsible       = local_assigns.fetch(:collapsible, true)
 - link_data_attrs   = local_assigns.fetch(:link_data_attrs, {})
@@ -71,7 +72,7 @@
       - else
         = render partial: 'projects/commit/ajax_signature', locals: { commit: commit }
 
-      - if commit_status
+      - if show_legacy_ci_icon && commit_status
         = render_commit_status(commit, commit_status, ref: ref)
 
       .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id, ref: ref) } }