diff --git a/app/common/components/status-icon.js b/app/common/components/status-icon.js
new file mode 100644
index 0000000..d756326
--- /dev/null
+++ b/app/common/components/status-icon.js
@@ -0,0 +1,42 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * statusIcon Component
+   *
+   * To use:
+   * The <status-icon> component expects a 'status' attribute
+   * with a status value (on, off, warn, error)
+   *
+   */
+
+  /**
+   * statusIcon Component template
+   */
+  const template = `<icon ng-if="$ctrl.status === 'on'"
+                          file="icon-on.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'off'"
+                          file="icon-off.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'warn'"
+                          file="icon-warning.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'error'"
+                          file="icon-critical.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>`
+
+  /**
+   * Register statusIcon component
+   */
+  angular.module('app.common.components')
+      .component('statusIcon', {template, bindings: {status: '@'}})
+})(window.angular);
\ No newline at end of file