diff --git a/app/assets/javascripts/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql b/app/assets/javascripts/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql
index 5737f9f8e8d3f6f64d7331cb83d71472f8ce7d79..b09e7c57697c1c046e244aa9760c5b42ed836db6 100644
--- a/app/assets/javascripts/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql
+++ b/app/assets/javascripts/ci/artifacts/graphql/queries/get_job_artifacts.query.graphql
@@ -1,3 +1,4 @@
+#import "~/graphql_shared/fragments/ci_icon.fragment.graphql"
 #import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
 query getJobArtifacts(
@@ -21,10 +22,7 @@ query getJobArtifacts(
         name
         webPath
         detailedStatus {
-          id
-          group
-          icon
-          label
+          ...CiIcon
         }
         pipeline {
           id
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 36f27d1781e63926821d8f54b7a60b3ef86a4b22..a07e410d8d21f3828c06e7829f3e584f2818e1b8 100644
--- a/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/ci/artifacts/components/job_artifacts_table_spec.js
@@ -205,7 +205,8 @@ describe('JobArtifactsTable component', () => {
     it('shows the job status as an icon for a successful job', () => {
       expect(findCiIcon().props()).toMatchObject({
         status: {
-          group: 'success',
+          text: 'Passed',
+          icon: 'status_success',
         },
         showStatusText: false,
       });