diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js
index 075623588..4eaec00f8 100644
--- a/ui/app/components/client-node-row.js
+++ b/ui/app/components/client-node-row.js
@@ -54,6 +54,8 @@ export default Component.extend(WithVisibilityDetection, {
       return 'status-text is-info';
     } else if (compositeStatus === 'ineligible') {
       return 'status-text is-warning';
+    } else if (compositeStatus === 'down') {
+      return 'status-text is-danger';
     } else {
       return '';
     }
diff --git a/ui/app/models/node.js b/ui/app/models/node.js
index e685d4e54..e8e30a8c4 100644
--- a/ui/app/models/node.js
+++ b/ui/app/models/node.js
@@ -91,6 +91,17 @@ export default Model.extend({
     }
   }),
 
+  compositeStatusIcon: computed('isDraining', 'isEligible', 'status', function() {
+    if (this.isDraining || !this.isEligible) {
+      return 'alert-circle-fill';
+    } else if (this.status === 'down') {
+      return 'cancel-circle-fill';
+    } else if (this.status === 'initializing') {
+      return 'node-init-circle-fill';
+    }
+    return 'check-circle-fill';
+  }),
+
   setEligible() {
     if (this.isEligible) return RSVP.resolve();
     // Optimistically update schedulingEligibility for immediate feedback
diff --git a/ui/app/styles/components/node-status-light.scss b/ui/app/styles/components/node-status-light.scss
index d7583a184..2608b771a 100644
--- a/ui/app/styles/components/node-status-light.scss
+++ b/ui/app/styles/components/node-status-light.scss
@@ -1,34 +1,52 @@
-$size: 1.3rem;
+$size: 1.6rem;
 
 .node-status-light {
-  display: inline-block;
+  display: inline-flex;
   height: $size;
   width: $size;
   border-radius: $size / 2;
   vertical-align: middle;
+  align-items: center;
+  justify-content: center;
 
-  background: $black;
+  // Compensate for the padding within the SVG
+  // (between the circle paths and the viewBox)
+  margin-left: -1px;
+  margin-right: -1px;
 
   &.ready {
-    background: $primary;
+    color: $primary;
   }
 
   &.down {
-    background: $danger;
+    color: $danger;
   }
 
   &.initializing {
-    background: repeating-linear-gradient(
-      -45deg,
-      $grey-lighter,
-      $grey-lighter 3px,
-      darken($grey-lighter, 25%) 3px,
-      darken($grey-lighter, 25%) 6px
-    );
+    color: $grey-light;
+
+    .blinking {
+      animation: node-status-light-initializing 0.7s infinite alternate ease-in-out;
+    }
   }
 
   &.ineligible,
   &.draining {
-    background: $warning;
+    color: $warning;
+  }
+
+  .icon {
+    width: $size;
+    height: $size;
+  }
+}
+
+@keyframes node-status-light-initializing {
+  0% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 0.7;
   }
 }
diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index db2abd338..e6a0d0f96 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -81,7 +81,9 @@
   <div class="toolbar">
     <div class="toolbar-item is-top-aligned is-minimum">
       <span class="title">
-        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}"></span>
+        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}">
+          {{x-icon model.compositeStatusIcon}}
+        </span>
       </span>
     </div>
     <div class="toolbar-item">
diff --git a/ui/public/images/icons/node-init-circle-fill.svg b/ui/public/images/icons/node-init-circle-fill.svg
new file mode 100644
index 000000000..775a63f20
--- /dev/null
+++ b/ui/public/images/icons/node-init-circle-fill.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="10" cy="10" r="10" fill="currentColor" transform="translate(2 2)"/>
+    <path fill="#FFF" d="M18 13v4H6v-4h12zM8 14a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+    <path class="blinking" fill="#FFF" d="M18 7v4H6V7h12zM8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" opacity=".502"/>
+  </g>
+</svg>