diff --git a/awx/ui_next/src/components/Sparkline/HostStatusIcon.jsx b/awx/ui_next/src/components/Sparkline/HostStatusIcon.jsx
new file mode 100644
index 0000000000..5558016bf2
--- /dev/null
+++ b/awx/ui_next/src/components/Sparkline/HostStatusIcon.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { string } from 'prop-types';
+import {
+  ChangedBottom,
+  ChangedTop,
+  FailedBottom,
+  FailedTop,
+  FinishedJob,
+  SkippedBottom,
+  SkippedTop,
+  SuccessfulBottom,
+  SuccessfulTop,
+  UnreachableBottom,
+  UnreachableTop,
+} from './shared/StatusIcon';
+
+const HostStatusIcon = ({ status }) => {
+  return (
+    <div>
+      {status === 'changed' && (
+        <FinishedJob>
+          <ChangedTop />
+          <ChangedBottom />
+        </FinishedJob>
+      )}
+      {status === 'failed' && (
+        <FinishedJob>
+          <FailedTop />
+          <FailedBottom />
+        </FinishedJob>
+      )}
+      {status === 'skipped' && (
+        <FinishedJob>
+          <SkippedTop />
+          <SkippedBottom />
+        </FinishedJob>
+      )}
+      {status === 'ok' && (
+        <FinishedJob>
+          <SuccessfulTop />
+          <SuccessfulBottom />
+        </FinishedJob>
+      )}
+      {status === 'unreachable' && (
+        <FinishedJob>
+          <UnreachableTop />
+          <UnreachableBottom />
+        </FinishedJob>
+      )}
+    </div>
+  );
+};
+
+HostStatusIcon.propTypes = {
+  status: string.isRequired,
+};
+
+export default HostStatusIcon;
diff --git a/awx/ui_next/src/components/Sparkline/JobStatusIcon.jsx b/awx/ui_next/src/components/Sparkline/JobStatusIcon.jsx
index 8a462f72ed..0167793fa8 100644
--- a/awx/ui_next/src/components/Sparkline/JobStatusIcon.jsx
+++ b/awx/ui_next/src/components/Sparkline/JobStatusIcon.jsx
@@ -1,60 +1,14 @@
 import React from 'react';
 import { string } from 'prop-types';
-import styled, { keyframes } from 'styled-components';
-
-const Pulse = keyframes`
-  from {
-    -webkit-transform:scale(1);
-  }
-  to {
-    -webkit-transform:scale(0);
-  }
-`;
-
-const Wrapper = styled.div`
-  width: 14px;
-  height: 14px;
-`;
-
-const RunningJob = styled(Wrapper)`
-  background-color: #5cb85c;
-  padding-right: 0px;
-  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
-    1px 1px 0 #ffffff;
-  animation: ${Pulse} 1.5s linear infinite alternate;
-`;
-
-const WaitingJob = styled(Wrapper)`
-  border: 1px solid #d7d7d7;
-`;
-
-const FinishedJob = styled(Wrapper)`
-  flex: 0 1 auto;
-  > * {
-    width: 14px;
-    height: 7px;
-  }
-`;
-
-const SuccessfulTop = styled.div`
-  background-color: #5cb85c;
-`;
-
-const SuccessfulBottom = styled.div`
-  border: 1px solid #b7b7b7;
-  border-top: 0;
-  background: #ffffff;
-`;
-
-const FailedTop = styled.div`
-  border: 1px solid #b7b7b7;
-  border-bottom: 0;
-  background: #ffffff;
-`;
-
-const FailedBottom = styled.div`
-  background-color: #d9534f;
-`;
+import {
+  RunningJob,
+  WaitingJob,
+  FinishedJob,
+  SuccessfulTop,
+  SuccessfulBottom,
+  FailedBottom,
+  FailedTop,
+} from './shared/StatusIcon';
 
 const JobStatusIcon = ({ status, ...props }) => {
   return (
diff --git a/awx/ui_next/src/components/Sparkline/index.js b/awx/ui_next/src/components/Sparkline/index.js
index f33b83ae6c..2b299b651e 100644
--- a/awx/ui_next/src/components/Sparkline/index.js
+++ b/awx/ui_next/src/components/Sparkline/index.js
@@ -1,2 +1,3 @@
 export { default as Sparkline } from './Sparkline';
 export { default as JobStatusIcon } from './JobStatusIcon';
+export { default as HostStatusIcon } from './HostStatusIcon';
diff --git a/awx/ui_next/src/components/Sparkline/shared/StatusIcon.jsx b/awx/ui_next/src/components/Sparkline/shared/StatusIcon.jsx
new file mode 100644
index 0000000000..c02af801b1
--- /dev/null
+++ b/awx/ui_next/src/components/Sparkline/shared/StatusIcon.jsx
@@ -0,0 +1,72 @@
+import styled, { keyframes } from 'styled-components';
+
+const Pulse = keyframes`
+  from {
+    -webkit-transform:scale(1);
+  }
+  to {
+    -webkit-transform:scale(0);
+  }
+`;
+
+const Wrapper = styled.div`
+  width: 14px;
+  height: 14px;
+`;
+
+const WhiteTop = styled.div`
+  border: 1px solid #b7b7b7;
+  border-bottom: 0;
+  background: #ffffff;
+`;
+
+const WhiteBottom = styled.div`
+  border: 1px solid #b7b7b7;
+  border-top: 0;
+  background: #ffffff;
+`;
+
+export const RunningJob = styled(Wrapper)`
+  background-color: #5cb85c;
+  padding-right: 0px;
+  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
+    1px 1px 0 #ffffff;
+  animation: ${Pulse} 1.5s linear infinite alternate;
+`;
+
+export const WaitingJob = styled(Wrapper)`
+  border: 1px solid #d7d7d7;
+`;
+
+export const FinishedJob = styled(Wrapper)`
+  flex: 0 1 auto;
+  > * {
+    width: 14px;
+    height: 7px;
+  }
+`;
+
+export const SuccessfulTop = styled.div`
+  background-color: #5cb85c;
+`;
+export const SuccessfulBottom = styled(WhiteBottom)``;
+
+export const FailedTop = styled(WhiteTop)``;
+export const FailedBottom = styled.div`
+  background-color: #d9534f;
+`;
+
+export const UnreachableTop = styled(WhiteTop)``;
+export const UnreachableBottom = styled.div`
+  background-color: #ff0000;
+`;
+
+export const ChangedTop = styled(WhiteTop)``;
+export const ChangedBottom = styled.div`
+  background-color: #ff9900;
+`;
+
+export const SkippedTop = styled(WhiteTop)``;
+export const SkippedBottom = styled.div`
+  background-color: #2dbaba;
+`;