diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a3b72ec9574fd841797760d1f5c943eebc0ffb76..8d411bd658b153daaf4e5124a7969c25f72e9c6f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -123,6 +123,15 @@
       right: 1px;
     }
   }
+  
+  .stage-cell {
+
+    svg {
+      height: 13px;
+      width: 13px;
+      margin-left: 3px;
+    }
+  }
 
   .duration,
   .finished-at {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index ea9f7cf054050abea65ec987b99fc9d0bb891818..5572999d19cd173f8f9b9e78b306a98d67a67213 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -536,6 +536,13 @@ pre.light-well {
 
   .ci-status {
     margin-right: $gl-padding;
+
+    &.ci-running {
+
+      svg {
+        margin-right: 3px;
+      }
+    }
   }
 
   .commit-row-message {
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index c6b053150be4cc3c92ee33ba241349816b6bb26a..8f3d9362a0a3e6679174472f3c35f12fe9bd1f0e 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -41,6 +41,14 @@
       color: $blue-normal;
       border-color: $blue-normal;
     }
+
+    svg {
+      width: 13px;
+      height: 13px;
+      position: relative;
+      top: 1px;
+      margin-left: 3px;
+    }
   }
 
   .ci-status-icon-success {
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index e6c99c9959e159ed78089c022ce869246f9b397c..5219a0ff47bfd24ae81a76fb858db3c68f03a13f 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -32,12 +32,12 @@ module CiStatusHelper
       when 'pending'
         'clock-o'
       when 'running'
-        'spinner'
+        'icon_running'
       else
         'circle'
       end
 
-    icon(icon_name + ' fw')
+    status == 'running' ? custom_icon(icon_name) : icon(icon_name + ' fw')
   end
 
   def render_commit_status(commit, tooltip_placement: 'auto left', cssclass: '')
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index 7ae699832f64c59ef7447d8c45d7ef3f25d616a1..26c4ffd2bd48dff97cf6f69f360e53f455c0bd10 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -35,7 +35,7 @@
 
     - stages_status = pipeline.statuses.latest.stages_status
     - stages.each do |stage|
-      %td
+      %td.stage-cell
         - status = stages_status[stage]
         - tooltip = "#{stage.titleize}: #{status || 'not found'}"
         - if status
diff --git a/app/views/shared/icons/_icon_running.svg b/app/views/shared/icons/_icon_running.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b6a29958e646ac779a1be6b328ce63976c560fa
--- /dev/null
+++ b/app/views/shared/icons/_icon_running.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use stroke="#2D9FD8" stroke-width="4" mask="url(#b)" xlink:href="#a"/>
+    <path fill="#2D9FD8" d="M7,3.00800862 C9.09023405,3.13960661 10.7448145,4.87657932 10.7448145,7 C10.7448145,9.209139 8.95395346,11 6.74481446,11 C5.4560962,11 4.30972054,10.3905589 3.57817301,9.44416214 L7,7 L7,3.00800862 Z"/>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_cancel.svg b/app/views/shared/icons/_icon_status_cancel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a0bc1490c4fd67f6a92609077ee1612fe030642
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_cancel.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use stroke="#5C5C5C" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
+    <rect width="10" height="1" x="2" y="6.5" fill="#5C5C5C" transform="rotate(45 7 7)" rx=".3"/>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_failed.svg b/app/views/shared/icons/_icon_status_failed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c41ca18cae751e4817f57528c30c09512b285c12
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_failed.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use stroke="#D22852" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
+    <path fill="#D22852" d="M7.5,6.5 L7.5,4.30578971 C7.5,4.12531853 7.36809219,4 7.20537567,4 L6.79462433,4 C6.63904572,4 6.5,4.13690672 6.5,4.30578971 L6.5,6.5 L4.30578971,6.5 C4.12531853,6.5 4,6.63190781 4,6.79462433 L4,7.20537567 C4,7.36095428 4.13690672,7.5 4.30578971,7.5 L6.5,7.5 L6.5,9.69421029 C6.5,9.87468147 6.63190781,10 6.79462433,10 L7.20537567,10 C7.36095428,10 7.5,9.86309328 7.5,9.69421029 L7.5,7.5 L9.69421029,7.5 C9.87468147,7.5 10,7.36809219 10,7.20537567 L10,6.79462433 C10,6.63904572 9.86309328,6.5 9.69421029,6.5 L7.5,6.5 Z" transform="rotate(45 7 7)"/>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_passed.svg b/app/views/shared/icons/_icon_status_passed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..260eab013a3662c757ae9735e86e8f7a702cbc45
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_passed.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use stroke="#31AF64" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
+    <g fill="#31AF64" transform="rotate(45 -.13 10.953)">
+      <rect width="1" height="5" x="2" rx=".3"/>
+      <rect width="3" height="1" y="4" rx=".3"/>
+    </g>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_pending.svg b/app/views/shared/icons/_icon_status_pending.svg
new file mode 100644
index 0000000000000000000000000000000000000000..035cd8b4cccda9483f5c463504c0a8fb6d2b166e
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_pending.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use stroke="#E75E40" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
+    <rect width="1" height="4" x="5" y="5" fill="#E75E40" rx=".3"/>
+    <rect width="1" height="4" x="8" y="5" fill="#E75E40" rx=".3"/>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_warning.svg b/app/views/shared/icons/_icon_status_warning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d47e7a1c93f20bfc8193998f265d88000d5cfb80
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_warning.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="7" cy="7" r="7"/>
+    <mask id="b" width="14" height="14" x="0" y="0" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#FF8A24" transform="translate(6 3)">
+      <rect width="2" height="5" rx=".5"/>
+      <rect width="2" height="2" y="6" rx=".5"/>
+    </g>
+    <use stroke="#FF8A24" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
+  </g>
+</svg>