diff --git a/src/elm/Pages/Build/Graph/View.elm b/src/elm/Pages/Build/Graph/View.elm
index df9650ce0..88a86b50e 100644
--- a/src/elm/Pages/Build/Graph/View.elm
+++ b/src/elm/Pages/Build/Graph/View.elm
@@ -152,6 +152,10 @@ view model msgs org repo buildNumber =
                     [ buildVizLegendNode [ Svg.Attributes.class "-failure" ]
                     , text "- failed"
                     ]
+                , li []
+                    [ buildVizLegendNode [ Svg.Attributes.class "-canceled" ]
+                    , text "- canceled"
+                    ]
                 , li []
                     [ buildVizLegendNode [ Svg.Attributes.class "-killed" ]
                     , text "- skipped"
diff --git a/src/scss/_graph.scss b/src/scss/_graph.scss
index 79b1074b3..985cb48b6 100644
--- a/src/scss/_graph.scss
+++ b/src/scss/_graph.scss
@@ -119,6 +119,11 @@
     stroke-dasharray: 3 3;
   }
 
+  .-canceled {
+    stroke: var(--color-cyan-dark);
+    stroke-dasharray: 3 3;
+  }
+
   .-killed,
   .-skipped {
     stroke: var(--color-lavender);
@@ -227,7 +232,6 @@
     stroke: var(--color-green);
   }
 
-  &.-canceled,
   &.-failure,
   &.-error {
     stroke-dasharray: 4 3;
@@ -235,6 +239,12 @@
     stroke: var(--color-red);
   }
 
+  &.-canceled {
+    stroke-dasharray: 4 3;
+
+    stroke: var(--color-cyan-dark);
+  }
+
   &.-killed,
   &.-skipped {
     stroke-dasharray: 5;
@@ -275,7 +285,7 @@
   }
 
   &.-canceled {
-    fill: var(--color-red);
+    fill: var(--color-cyan-dark);
   }
 
   &.-killed,
@@ -310,7 +320,7 @@
   }
 
   &.-canceled {
-    fill: var(--color-red);
+    fill: var(--color-cyan-dark);
   }
 
   &.-killed,
@@ -320,6 +330,7 @@
 
   &.-error {
     fill: var(--color-red);
+    stroke-width: 3;
   }
 }
 
@@ -416,12 +427,15 @@
     stroke: var(--color-green);
   }
 
-  &.-canceled,
   &.-failure,
   &.-error {
     stroke: var(--color-red);
   }
 
+  &.-canceled {
+    stroke: var(--color-cyan-dark);
+  }
+
   &.-killed,
   &.-skipped {
     stroke: var(--color-lavender);
diff --git a/src/static/graph.ts b/src/static/graph.ts
index 1a47286ad..fa328b695 100644
--- a/src/static/graph.ts
+++ b/src/static/graph.ts
@@ -296,7 +296,7 @@ function drawNodes(opts, buildGraphElement, nodeSelector, edges) {
         }
 
         if (step.status === 'canceled') {
-          stepIcon.append('path').attr('d', 'M8 8l12 12M20 8L8 20');
+          stepIcon.append('path').attr('d', 'M8 8l12 12');
         }
 
         if (step.status === 'killed') {
@@ -326,7 +326,8 @@ function drawNodes(opts, buildGraphElement, nodeSelector, edges) {
         }
 
         if (step.status === 'error') {
-          stepIcon.append('path').attr('d', 'M8 8l12 12M20 8L8 20');
+          stepIcon.append('path').attr('d', 'M14 8v7');
+          stepIcon.append('path').attr('d', 'M14 18v2');
         }
 
         // apply step connector to every step after the first