1 files changed, 5 insertions, 8 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
index 8a01e1fe3f5..7d13ee582c6 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
@@ -1,5 +1,5 @@
 <script>
-import iconTimerSvg from 'icons/_icon_timer.svg';
+import { GlIcon } from '@gitlab/ui';
 import '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -8,6 +8,7 @@ export default {
   directives: {
     tooltip,
   },
+  components: { GlIcon },
   mixins: [timeagoMixin],
   props: {
     finishedTime: {
@@ -19,11 +20,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      iconTimerSvg,
-    };
-  },
   computed: {
     hasDuration() {
       return this.duration > 0;
@@ -59,11 +55,12 @@ export default {
     <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div>
     <div class="table-mobile-content">
       <p v-if="hasDuration" class="duration">
-        <span v-html="iconTimerSvg"> </span> {{ durationFormatted }}
+        <gl-icon name="timer" class="gl-vertical-align-baseline!" aria-hidden="true" />
+        {{ durationFormatted }}
       </p>
 
       <p v-if="hasFinishedTime" class="finished-at d-none d-sm-none d-md-block">
-        <i class="fa fa-calendar" aria-hidden="true"> </i>
+        <gl-icon name="calendar" class="gl-vertical-align-baseline!" aria-hidden="true" />
 
         <time
           v-tooltip