Fixed different sizes

app/assets/javascripts/pipelines/components/stage.vue

@@ -122,6 +122,10 @@ export default {
     triggerButtonClass() {
       return `ci-status-icon-${this.stage.status.group}`;
     },
+
+    borderlessIcon() {
+      return `${this.stage.status.icon}_borderless`;
+    }
   },
 };
 </script>
@@ -145,7 +149,7 @@ export default {
         aria-hidden="true"
         :aria-label="stage.title">
         <icon
-          :name="stage.status.icon"/>
+          :name="borderlessIcon"/>
       </span>
 
       <i

app/assets/stylesheets/pages/pipelines.scss

@@ -474,6 +474,14 @@
         height: 18px;
       }
 
+      &.play {
+        svg {
+          width: #{$ci-action-icon-size - 8};
+          height: #{$ci-action-icon-size - 8};
+          left: 8px;
+        }
+      }
+
       &:hover svg {
         fill: $gl-text-color;
       }
@@ -738,19 +746,34 @@ button.mini-pipeline-graph-dropdown-toggle {
       &.icon-action-retry,
       &.icon-action-play {
         svg {
-          width: calc($ci-action-icon-size-6);
-          height: calc($ci-action-icon-size-6);
+          width: #{$ci-action-icon-size - 6};
+          height: #{$ci-action-icon-size - 6};
           left: 8px;
         }
       }
 
-      svg.icon-action-play,
-      svg.icon-action-stop {
+      svg.icon-action-stop,
+      svg.icon-action-cancel {
         width: 12px;
         height: 12px;
         top: 1px;
-        left: 0;
+        left: -1px;
+      }
+
+      svg.icon-action-play {
+        width: 11px;
+        height: 11px;
+        top: 1px;
+        left: 1px;
+      }
+
+      svg.icon-action-retry {
+        width: 16px;
+        height: 16px;
+        top: 0px;
+        left: -3px;
       }
+
     }
 
     // link to the build