diff --git a/frontend/__tests__/components/operator-lifecycle-manager/clusterserviceversion.spec.tsx b/frontend/__tests__/components/operator-lifecycle-manager/clusterserviceversion.spec.tsx
index 7fb903a0b7d..86136c745de 100644
--- a/frontend/__tests__/components/operator-lifecycle-manager/clusterserviceversion.spec.tsx
+++ b/frontend/__tests__/components/operator-lifecycle-manager/clusterserviceversion.spec.tsx
@@ -94,8 +94,9 @@ describe(ClusterServiceVersionTableRow.displayName, () => {
 
   it('renders column for app status', () => {
     const col = wrapper.find(TableRow).childAt(3);
-
-    expect(col.childAt(0).text()).toContain(CSVConditionReason.CSVReasonInstallSuccessful);
+    const statusComponent = col.childAt(0).find('SuccessStatus');
+    expect(statusComponent.exists()).toBeTruthy();
+    expect(statusComponent.prop('title')).toEqual(CSVConditionReason.CSVReasonInstallSuccessful);
   });
 
   it('renders "disabling" status if CSV has `deletionTimestamp`', () => {
diff --git a/frontend/__tests__/components/route-pages.spec.tsx b/frontend/__tests__/components/route-pages.spec.tsx
index 0dfae95ca9d..7b32105a525 100644
--- a/frontend/__tests__/components/route-pages.spec.tsx
+++ b/frontend/__tests__/components/route-pages.spec.tsx
@@ -196,8 +196,9 @@ describe(RouteStatus.displayName, () => {
     };
 
     const wrapper = mount(<RouteStatus obj={route} />);
-    expect(wrapper.find('.co-icon-and-text__icon').exists()).toBe(true);
-    expect(wrapper.text()).toEqual('Accepted');
+    const statusComponent = wrapper.find('SuccessStatus');
+    expect(statusComponent.exists()).toBeTruthy();
+    expect(statusComponent.prop('title')).toEqual('Accepted');
   });
 
   it('renders Rejected status', () => {
@@ -223,8 +224,9 @@ describe(RouteStatus.displayName, () => {
     };
 
     const wrapper = mount(<RouteStatus obj={route} />);
-    expect(wrapper.find('.co-icon-and-text__icon').exists()).toBe(true);
-    expect(wrapper.text()).toEqual('Rejected');
+    const statusComponent = wrapper.find('ErrorStatus');
+    expect(statusComponent.exists()).toBeTruthy();
+    expect(statusComponent.prop('title')).toEqual('Rejected');
   });
 
   it('renders Pending status', () => {
@@ -237,7 +239,9 @@ describe(RouteStatus.displayName, () => {
     };
 
     const wrapper = mount(<RouteStatus obj={route} />);
-    expect(wrapper.find('.co-icon-and-text__icon').exists()).toBe(true);
-    expect(wrapper.text()).toEqual('Pending');
+    const statusComponent = wrapper.find('StatusIconAndText');
+    const icon = wrapper.find('HourglassHalfIcon');
+    expect(icon.exists()).toBeTruthy();
+    expect(statusComponent.prop('title')).toEqual('Pending');
   });
 });
diff --git a/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/data-resiliency/data-resiliency.tsx b/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/data-resiliency/data-resiliency.tsx
index d5a8fadc958..a29505a9ffb 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/data-resiliency/data-resiliency.tsx
+++ b/frontend/packages/ceph-storage-plugin/src/components/dashboard-page/storage-dashboard/data-resiliency/data-resiliency.tsx
@@ -4,6 +4,7 @@ import { Progress } from '@patternfly/react-core';
 
 import './data-resiliency.scss';
 
+import { GreenCheckCircleIcon, RedExclamationCircleIcon } from '@console/shared';
 import { DashboardCard } from '@console/internal/components/dashboard/dashboard-card/card';
 import { DashboardCardBody } from '@console/internal/components/dashboard/dashboard-card/card-body';
 import { DashboardCardHeader } from '@console/internal/components/dashboard/dashboard-card/card-header';
@@ -12,10 +13,6 @@ import {
   withDashboardResources,
   DashboardItemProps,
 } from '@console/internal/components/dashboards-page/with-dashboard-resources';
-import {
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@console/internal/components/utils/status-icon';
 
 import { DATA_RESILIENCY_QUERIES } from '../../../../constants/queries';
 
diff --git a/frontend/packages/console-shared/src/components/index.ts b/frontend/packages/console-shared/src/components/index.ts
index 42951b9d9e3..acff32325df 100644
--- a/frontend/packages/console-shared/src/components/index.ts
+++ b/frontend/packages/console-shared/src/components/index.ts
@@ -1 +1,2 @@
 export { default as TechPreviewBadge } from './TechPreviewBadge';
+export * from './status';
diff --git a/frontend/packages/console-shared/src/components/status/ErrorStatus.tsx b/frontend/packages/console-shared/src/components/status/ErrorStatus.tsx
new file mode 100644
index 00000000000..080fae14a6b
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/ErrorStatus.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import PopoverStatus from './PopoverStatus';
+import StatusIconAndText from './StatusIconAndText';
+import { RedExclamationCircleIcon } from './Icons';
+
+type ErrorStatusProps = {
+  title?: string;
+  iconOnly?: boolean;
+};
+
+const ErrorStatus: React.FC<ErrorStatusProps> = ({ title, iconOnly, children }) => {
+  const icon = <RedExclamationCircleIcon />;
+  return children ? (
+    <PopoverStatus icon={icon} title={title} iconOnly={iconOnly}>
+      {children}
+    </PopoverStatus>
+  ) : (
+    <StatusIconAndText icon={icon} title={title} iconOnly={iconOnly} />
+  );
+};
+
+export default ErrorStatus;
diff --git a/frontend/packages/console-shared/src/components/status/Icons.tsx b/frontend/packages/console-shared/src/components/status/Icons.tsx
new file mode 100644
index 00000000000..86adaf7c8f6
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/Icons.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from '@patternfly/react-icons';
+import {
+  global_success_color_100 as successColor,
+  global_warning_color_100 as warningColor,
+  global_danger_color_100 as dangerColor,
+} from '@patternfly/react-tokens';
+
+export type ColoredIconProps = {
+  className?: string;
+};
+
+export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className }) => {
+  return <CheckCircleIcon color={successColor.value} className={className} />;
+};
+
+export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({ className }) => {
+  return <ExclamationCircleIcon color={dangerColor.value} className={className} />;
+};
+
+export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({ className }) => {
+  return <ExclamationTriangleIcon color={warningColor.value} className={className} />;
+};
diff --git a/frontend/packages/console-shared/src/components/status/InfoStatus.tsx b/frontend/packages/console-shared/src/components/status/InfoStatus.tsx
new file mode 100644
index 00000000000..7e2feaa4a4d
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/InfoStatus.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+
+import PopoverStatus from './PopoverStatus';
+import StatusIconAndText from './StatusIconAndText';
+
+type InfoStatusProps = {
+  title?: string;
+  iconOnly?: boolean;
+};
+
+const InfoStatus: React.FC<InfoStatusProps> = ({ title, iconOnly, children }) => {
+  const icon = <InfoCircleIcon />;
+  return children ? (
+    <PopoverStatus icon={icon} title={title} iconOnly={iconOnly}>
+      {children}
+    </PopoverStatus>
+  ) : (
+    <StatusIconAndText icon={icon} title={title} iconOnly={iconOnly} />
+  );
+};
+
+export default InfoStatus;
diff --git a/frontend/packages/console-shared/src/components/status/LinkStatus.tsx b/frontend/packages/console-shared/src/components/status/LinkStatus.tsx
new file mode 100644
index 00000000000..45925fa76e9
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/LinkStatus.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as History from 'history';
+import { Link } from 'react-router-dom';
+
+import StatusIconAndText from './StatusIconAndText';
+
+type LinkStatusProps = React.ComponentProps<typeof StatusIconAndText> & {
+  linkTitle?: string;
+  linkTo?: History.LocationDescriptor;
+};
+
+const LinkStatus: React.FC<LinkStatusProps> = ({
+  icon,
+  title,
+  spin,
+  linkTitle,
+  linkTo,
+  iconOnly,
+}) =>
+  linkTo ? (
+    <Link to={linkTo} title={linkTitle}>
+      <StatusIconAndText icon={icon} title={title} spin={spin} iconOnly={iconOnly} />
+    </Link>
+  ) : (
+    <StatusIconAndText icon={icon} title={title} spin={spin} iconOnly={iconOnly} />
+  );
+
+export default LinkStatus;
diff --git a/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx b/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx
new file mode 100644
index 00000000000..b3c2612244e
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/PopoverStatus.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Popover, PopoverPosition } from '@patternfly/react-core';
+import { Button } from 'patternfly-react';
+
+import StatusIconAndText from './StatusIconAndText';
+
+const PopoverStatus: React.FC<React.ComponentProps<typeof StatusIconAndText>> = ({
+  icon,
+  title,
+  spin,
+  children,
+  iconOnly,
+}) => (
+  <Popover position={PopoverPosition.right} headerContent={title} bodyContent={children}>
+    <Button bsStyle="link">
+      <StatusIconAndText icon={icon} title={title} spin={spin} iconOnly={iconOnly} />
+    </Button>
+  </Popover>
+);
+
+export default PopoverStatus;
diff --git a/frontend/packages/console-shared/src/components/status/ProgressStatus.tsx b/frontend/packages/console-shared/src/components/status/ProgressStatus.tsx
new file mode 100644
index 00000000000..ba482a6b617
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/ProgressStatus.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { InProgressIcon } from '@patternfly/react-icons';
+
+import StatusIconAndText from './StatusIconAndText';
+
+type ProgressStatusProps = {
+  title?: string;
+  iconOnly?: boolean;
+};
+
+const ProgressStatus: React.FC<ProgressStatusProps> = ({ title, iconOnly }) => (
+  <StatusIconAndText icon={<InProgressIcon />} title={title} iconOnly={iconOnly} />
+);
+
+export default ProgressStatus;
diff --git a/frontend/packages/console-shared/src/components/status/Status.tsx b/frontend/packages/console-shared/src/components/status/Status.tsx
new file mode 100644
index 00000000000..430d02ae904
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/Status.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  HourglassStartIcon,
+  HourglassHalfIcon,
+  SyncAltIcon,
+  BanIcon,
+  ExclamationTriangleIcon,
+  UnknownIcon,
+} from '@patternfly/react-icons';
+
+import StatusIconAndText from './StatusIconAndText';
+import ProgressStatus from './ProgressStatus';
+import ErrorStatus from './ErrorStatus';
+import SuccessStatus from './SuccessStatus';
+import InfoStatus from './InfoStatus';
+import { DASH } from '../../constants';
+
+export type StatusProps = {
+  status?: string;
+  title?: string;
+  iconOnly?: boolean;
+};
+
+const Status: React.FC<StatusProps> = ({ status, title, children, iconOnly }) => {
+  const statusProps = { title: title || status, iconOnly };
+  switch (status) {
+    case 'New':
+      return <StatusIconAndText {...statusProps} icon={<HourglassStartIcon />} />;
+
+    case 'Pending':
+      return <StatusIconAndText {...statusProps} icon={<HourglassHalfIcon />} />;
+
+    case 'ContainerCreating':
+      return <ProgressStatus {...statusProps} />;
+
+    case 'In Progress':
+    case 'Running':
+    case 'Updating':
+    case 'Upgrading':
+      return <StatusIconAndText {...statusProps} icon={<SyncAltIcon />} />;
+
+    case 'Cancelled':
+    case 'Expired':
+    case 'Not Ready':
+    case 'Terminating':
+      return <StatusIconAndText {...statusProps} icon={<BanIcon />} />;
+
+    case 'Warning':
+      return <StatusIconAndText {...statusProps} icon={<ExclamationTriangleIcon />} />;
+
+    case 'ContainerCannotRun':
+    case 'CrashLoopBackOff':
+    case 'Critical':
+    case 'Error':
+    case 'Failed':
+    case 'InstallCheckFailed':
+    case 'Lost':
+    case 'Rejected':
+      return <ErrorStatus {...statusProps}>{children}</ErrorStatus>;
+
+    case 'Accepted':
+    case 'Active':
+    case 'Bound':
+    case 'Complete':
+    case 'Completed':
+    case 'Enabled':
+    case 'Ready':
+    case 'Up to date':
+      return <SuccessStatus {...statusProps} />;
+
+    case 'Info':
+      return <InfoStatus {...statusProps}>{children}</InfoStatus>;
+
+    case 'Unknown':
+      return <StatusIconAndText {...statusProps} icon={<UnknownIcon />} />;
+
+    default:
+      return <>{DASH}</>;
+  }
+};
+
+export default Status;
diff --git a/frontend/packages/console-shared/src/components/status/StatusIcon.tsx b/frontend/packages/console-shared/src/components/status/StatusIcon.tsx
new file mode 100644
index 00000000000..116b1580a82
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/StatusIcon.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Status from './Status';
+
+const StatusIcon = ({ status }) => <Status status={status} iconOnly />;
+
+export default StatusIcon;
diff --git a/frontend/packages/console-shared/src/components/status/StatusIconAndText.tsx b/frontend/packages/console-shared/src/components/status/StatusIconAndText.tsx
new file mode 100644
index 00000000000..17224aafd55
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/StatusIconAndText.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { CamelCaseWrap } from '@console/internal/components/utils';
+import { DASH } from '../../constants';
+
+type StatusIconAndTextProps = {
+  icon?: React.ReactElement;
+  title?: string;
+  spin?: boolean;
+  iconOnly?: boolean;
+};
+
+const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({ icon, title, spin, iconOnly }) => {
+  if (!title) {
+    return <>{DASH}</>;
+  }
+
+  return (
+    <span className="co-icon-and-text" title={title}>
+      {icon &&
+        React.cloneElement(icon, {
+          className: classNames(
+            spin && 'fa-spin',
+            icon.props.className,
+            !iconOnly && 'co-icon-and-text__icon',
+          ),
+        })}
+      {!iconOnly && <CamelCaseWrap value={title} />}
+    </span>
+  );
+};
+
+export default StatusIconAndText;
diff --git a/frontend/packages/console-shared/src/components/status/SuccessStatus.tsx b/frontend/packages/console-shared/src/components/status/SuccessStatus.tsx
new file mode 100644
index 00000000000..d0afffb4743
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/SuccessStatus.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { GreenCheckCircleIcon } from './Icons';
+import StatusIconAndText from './StatusIconAndText';
+
+type SuccessStatusProps = {
+  title?: string;
+  iconOnly?: boolean;
+};
+
+const SuccessStatus: React.FC<SuccessStatusProps> = ({ title, iconOnly }) => (
+  <StatusIconAndText icon={<GreenCheckCircleIcon />} title={title} iconOnly={iconOnly} />
+);
+
+export default SuccessStatus;
diff --git a/frontend/packages/console-shared/src/components/status/index.ts b/frontend/packages/console-shared/src/components/status/index.ts
new file mode 100644
index 00000000000..1ec174834f0
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/status/index.ts
@@ -0,0 +1,10 @@
+export { default as Status } from './Status';
+export { default as StatusIcon } from './StatusIcon';
+export { default as StatusIconAndText } from './StatusIconAndText';
+export { default as PopoverStatus } from './PopoverStatus';
+export { default as LinkStatus } from './LinkStatus';
+export { default as SuccessStatus } from './SuccessStatus';
+export { default as ErrorStatus } from './ErrorStatus';
+export { default as InfoStatus } from './InfoStatus';
+export { default as ProgressStatus } from './ProgressStatus';
+export * from './Icons';
diff --git a/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunRow.tsx b/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunRow.tsx
index 0bb58073bae..6d604725d65 100644
--- a/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunRow.tsx
+++ b/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunRow.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
+
+import { Status } from '@console/shared';
 import { TableRow, TableData } from '@console/internal/components/factory';
-import {
-  Kebab,
-  ResourceLink,
-  Timestamp,
-  ResourceKebab,
-  StatusIconAndText,
-} from '@console/internal/components/utils';
+import { Kebab, ResourceLink, Timestamp, ResourceKebab } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { pipelineRunFilterReducer } from '../../utils/pipeline-filter-reducer';
 import { reRunPipelineRun, stopPipelineRun } from '../../utils/pipeline-actions';
@@ -40,7 +36,7 @@ const PipelineRunRow: React.FC<PipelineRunRowProps> = ({ obj, index, key, style
         <Timestamp timestamp={obj.status && obj.status.startTime} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={pipelineRunFilterReducer(obj)} />
+        <Status status={pipelineRunFilterReducer(obj)} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         <PipelineTaskStatus pipelinerun={obj} />
diff --git a/frontend/packages/dev-console/src/components/pipelines/PipelineRow.tsx b/frontend/packages/dev-console/src/components/pipelines/PipelineRow.tsx
index 9f677a3f8af..a6c124ccb9e 100644
--- a/frontend/packages/dev-console/src/components/pipelines/PipelineRow.tsx
+++ b/frontend/packages/dev-console/src/components/pipelines/PipelineRow.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
+
+import { Status } from '@console/shared';
 import { TableRow, TableData } from '@console/internal/components/factory';
-import {
-  Kebab,
-  ResourceLink,
-  Timestamp,
-  ResourceKebab,
-  StatusIconAndText,
-} from '@console/internal/components/utils';
+import { Kebab, ResourceLink, Timestamp, ResourceKebab } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { pipelineFilterReducer } from '../../utils/pipeline-filter-reducer';
 import { Pipeline } from '../../utils/pipeline-augment';
@@ -53,7 +49,7 @@ const PipelineRow: React.FC<PipelineRowProps> = ({ obj, index, key, style }) =>
         )}
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={pipelineFilterReducer(obj)} />
+        <Status status={pipelineFilterReducer(obj)} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         {(obj.latestRun && <PipelineTaskStatus pipeline={obj} pipelinerun={obj.latestRun} />) ||
diff --git a/frontend/packages/metal3-plugin/src/components/host-detail.tsx b/frontend/packages/metal3-plugin/src/components/host-detail.tsx
index d97eb5a5186..6fc5aa8f3a9 100644
--- a/frontend/packages/metal3-plugin/src/components/host-detail.tsx
+++ b/frontend/packages/metal3-plugin/src/components/host-detail.tsx
@@ -17,7 +17,6 @@ import {
   SectionHeading,
   Timestamp,
   humanizeDecimalBytes,
-  StatusIconAndText,
   ResourceLink,
   FirehoseResource,
 } from '@console/internal/components/utils';
@@ -28,6 +27,7 @@ import {
   getMachineNodeName,
   getNamespace,
   getMachineRole,
+  StatusIconAndText,
 } from '@console/shared';
 import { ResourceEventStream } from '@console/internal/components/events';
 
@@ -148,7 +148,7 @@ const BaremetalHostDetails: React.FC<BaremetalHostDetailsProps> = ({
             <dt>Power Status</dt>
             <dd>
               <StatusIconAndText
-                status={hostPoweredOn ? 'Running' : 'Powered Off'}
+                title={hostPoweredOn ? 'Running' : 'Powered Off'}
                 icon={hostPoweredOn ? <OnRunningIcon /> : <OffIcon />}
               />
             </dd>
diff --git a/frontend/packages/metal3-plugin/src/components/host-status.tsx b/frontend/packages/metal3-plugin/src/components/host-status.tsx
index 4381a33dc6b..cb2eb940e5f 100644
--- a/frontend/packages/metal3-plugin/src/components/host-status.tsx
+++ b/frontend/packages/metal3-plugin/src/components/host-status.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Button } from 'patternfly-react';
-import { AddCircleOIcon, SyncAltIcon, UnknownIcon, MaintenanceIcon } from '@patternfly/react-icons';
+import { AddCircleOIcon, MaintenanceIcon } from '@patternfly/react-icons';
 
-import { K8sResourceKind } from '@console/internal/module/k8s';
 import {
+  ProgressStatus,
+  SuccessStatus,
+  ErrorStatus,
+  Status,
   StatusIconAndText,
-  GreenCheckCircleIcon,
-  RedExclamationCircleIcon,
-} from '@console/internal/components/utils/status-icon';
+} from '@console/shared';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 import { RequireCreatePermission } from '@console/internal/components/utils';
 import { HostMultiStatus } from '../utils/host-status';
 
@@ -32,7 +34,7 @@ export const AddDiscoveredHostButton: React.FC<{ host: K8sResourceKind }> = (
   return (
     <RequireCreatePermission model={BaremetalHostModel} namespace={namespace}>
       <Button bsStyle="link">
-        <StatusIconAndText status="Add host" icon={<AddCircleOIcon />} />
+        <StatusIconAndText icon={<AddCircleOIcon />} title="Add host" />
       </Button>
     </RequireCreatePermission>
   );
@@ -43,22 +45,25 @@ type BaremetalHostStatusProps = {
   status: HostMultiStatus;
 };
 
-const BaremetalHostStatus = ({ host, status: { status, title } }: BaremetalHostStatusProps) => {
+const BaremetalHostStatus = ({
+  host,
+  status: { status, title, errorMessage },
+}: BaremetalHostStatusProps) => {
   const statusTitle = title || status;
 
   switch (true) {
     case status === HOST_STATUS_DISCOVERED:
       return <AddDiscoveredHostButton host={host} />;
     case status === HOST_STATUS_UNDER_MAINTENANCE:
-      return <StatusIconAndText status={statusTitle} icon={<MaintenanceIcon />} />;
+      return <StatusIconAndText icon={<MaintenanceIcon />} title={statusTitle} />;
     case HOST_PROGRESS_STATES.includes(status):
-      return <StatusIconAndText status={statusTitle} icon={<SyncAltIcon />} />;
+      return <ProgressStatus title={statusTitle} />;
     case HOST_SUCCESS_STATES.includes(status):
-      return <StatusIconAndText status={statusTitle} icon={<GreenCheckCircleIcon />} />;
+      return <SuccessStatus title={statusTitle} />;
     case HOST_ERROR_STATES.includes(status):
-      return <StatusIconAndText status={statusTitle} icon={<RedExclamationCircleIcon />} />;
+      return <ErrorStatus title={statusTitle}>{errorMessage}</ErrorStatus>;
     default:
-      return <StatusIconAndText status={statusTitle} icon={<UnknownIcon />} />;
+      return <Status status={status} title={statusTitle} />;
   }
 };
 
diff --git a/frontend/packages/metal3-plugin/src/components/machine-cell.tsx b/frontend/packages/metal3-plugin/src/components/machine-cell.tsx
index f7de99f88e7..2cf26b9e9e1 100644
--- a/frontend/packages/metal3-plugin/src/components/machine-cell.tsx
+++ b/frontend/packages/metal3-plugin/src/components/machine-cell.tsx
@@ -2,13 +2,9 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { AddCircleOIcon } from '@patternfly/react-icons';
 
-import { DASH } from '@console/shared';
+import { DASH, StatusIconAndText } from '@console/shared';
 import { MachineModel } from '@console/internal/models';
-import {
-  ResourceLink,
-  RequireCreatePermission,
-  StatusIconAndText,
-} from '@console/internal/components/utils';
+import { ResourceLink, RequireCreatePermission } from '@console/internal/components/utils';
 import { referenceForModel, K8sResourceKind } from '@console/internal/module/k8s';
 
 import { getHostMachineName } from '../selectors';
@@ -42,7 +38,7 @@ const MachineCell: React.FC<MachineCellProps> = ({ host, status }) => {
     return (
       <RequireCreatePermission model={MachineModel} namespace={ns}>
         <Link to={href}>
-          <StatusIconAndText status="Add machine" icon={<AddCircleOIcon />} />
+          <StatusIconAndText icon={<AddCircleOIcon />} title="Add machine" />
         </Link>
       </RequireCreatePermission>
     );
diff --git a/frontend/public/components/build.tsx b/frontend/public/components/build.tsx
index 9c6e823146c..5ed338f83ac 100644
--- a/frontend/public/components/build.tsx
+++ b/frontend/public/components/build.tsx
@@ -3,6 +3,8 @@ import * as _ from 'lodash-es';
 import { Link } from 'react-router-dom';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+
+import { Status } from '@console/shared';
 import { K8sResourceKindReference, referenceFor, K8sResourceKind, k8sPatch, K8sKind } from '../module/k8s';
 import { cloneBuild, formatBuildDuration, getBuildNumber } from '../module/k8s/builds';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
@@ -23,7 +25,6 @@ import {
   resourcePath,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
   Timestamp,
 } from './utils';
 import { BuildPipeline, BuildPipelineLogLink } from './build-pipeline';
@@ -172,7 +173,7 @@ export const BuildsDetails: React.SFC<BuildsDetailsProps> = ({ obj: build }) =>
         <div className="col-sm-6">
           <BuildStrategy resource={build}>
             <dt>Status</dt>
-            <dd><StatusIconAndText status={build.status.phase} /></dd>
+            <dd><Status status={build.status.phase} /></dd>
             {logSnippet && <dt>Log Snippet</dt>}
             {logSnippet && <dd><pre>{logSnippet}</pre></dd>}
             {message && <dt>Reason</dt>}
@@ -286,7 +287,7 @@ const BuildsTableRow: React.FC<BuildsTableRowProps> = ({obj, index, key, style})
         <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={obj.status.phase} />
+        <Status status={obj.status.phase} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         {fromNow(obj.metadata.creationTimestamp)}
diff --git a/frontend/public/components/container.tsx b/frontend/public/components/container.tsx
index b095f2cdf42..02b06d57180 100644
--- a/frontend/public/components/container.tsx
+++ b/frontend/public/components/container.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 
+import { Status } from '@console/shared';
 import {
   ContainerLifecycle,
   ContainerLifecycleStage,
@@ -28,7 +29,6 @@ import {
   ResourceLink,
   ScrollToTopOnMount,
   SectionHeading,
-  StatusIconAndText,
   Timestamp,
 } from './utils';
 import { resourcePath } from './utils/resource-link';
@@ -190,7 +190,7 @@ const ContainerDetails: React.FC<ContainerDetailsProps> = (props) => {
         <SectionHeading text="Container Overview" />
         <dl className="co-m-pane__details">
           <dt>State</dt>
-          <dd><StatusIconAndText status={stateValue} /></dd>
+          <dd><Status status={stateValue} /></dd>
           <dt>ID</dt>
           <dd className="co-break-all">{status.containerID || '-'}</dd>
           <dt>Restarts</dt>
diff --git a/frontend/public/components/dashboard/events-card/event-item.tsx b/frontend/public/components/dashboard/events-card/event-item.tsx
index 1387840b7e5..7d92e50bb8e 100644
--- a/frontend/public/components/dashboard/events-card/event-item.tsx
+++ b/frontend/public/components/dashboard/events-card/event-item.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { RedExclamationCircleIcon } from '@console/shared';
 import { connectToFlags } from '../../../reducers/features';
 import { FLAGS } from '../../../const';
 import { Timestamp, ResourceLink, resourcePathFromModel } from '../../utils';
 import { NodeModel } from '../../../models';
 import { EventComponentProps } from '../../utils/event-stream';
 import { categoryFilter } from '../../events';
-import { RedExclamationCircleIcon } from '@console/internal/components/utils/status-icon';
 
 const EventItem_: React.FC<EventItemProps> = ({ event, flags }) => {
   const { count, firstTimestamp, lastTimestamp, involvedObject: obj, source, message } = event;
diff --git a/frontend/public/components/dashboard/health-card/alert-item.tsx b/frontend/public/components/dashboard/health-card/alert-item.tsx
index 5ef8c553fac..b22688a6d7b 100644
--- a/frontend/public/components/dashboard/health-card/alert-item.tsx
+++ b/frontend/public/components/dashboard/health-card/alert-item.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 
+import { RedExclamationCircleIcon, YellowExclamationTriangleIcon } from '@console/shared';
 import { getAlertSeverity, getAlertMessage, getAlertDescription } from './';
 import { Alert } from '../../monitoring';
-import { RedExclamationCircleIcon, YellowExclamationTriangleIcon } from '@console/internal/components/utils/status-icon';
 
 const getSeverityIcon = (severity: string) => {
   switch (severity) {
diff --git a/frontend/public/components/dashboard/health-card/health-item.tsx b/frontend/public/components/dashboard/health-card/health-item.tsx
index addd7bd4a20..f3eaad7e042 100644
--- a/frontend/public/components/dashboard/health-card/health-item.tsx
+++ b/frontend/public/components/dashboard/health-card/health-item.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { HealthState } from './states';
 import {
   GreenCheckCircleIcon,
-  LoadingInline,
   RedExclamationCircleIcon,
   YellowExclamationTriangleIcon,
-} from '../../utils';
+} from '@console/shared';
+import { HealthState } from './states';
+import { LoadingInline } from '../../utils';
 
 const HealthItemIcon: React.FC<HealthItemIconProps> = ({ state }) => {
   let icon;
@@ -22,22 +22,20 @@ const HealthItemIcon: React.FC<HealthItemIconProps> = ({ state }) => {
     default:
       icon = <YellowExclamationTriangleIcon />;
   }
-  return (
-    <div className="co-health-card__icon">
-      {icon}
-    </div>
-  );
+  return <div className="co-health-card__icon">{icon}</div>;
 };
 
-export const HealthItem: React.FC<HealthItemProps> = React.memo(({ className, state, message, details }) => (
-  <div className={classNames('co-health-card__item', className)}>
-    {state === HealthState.LOADING ? <LoadingInline /> : <HealthItemIcon state={state} />}
-    <div>
-      {message && <span className="co-health-card__text">{message}</span>}
-      {details && <div className="co-health-card__text co-health-card__subtitle">{details}</div>}
+export const HealthItem: React.FC<HealthItemProps> = React.memo(
+  ({ className, state, message, details }) => (
+    <div className={classNames('co-health-card__item', className)}>
+      {state === HealthState.LOADING ? <LoadingInline /> : <HealthItemIcon state={state} />}
+      <div>
+        {message && <span className="co-health-card__text">{message}</span>}
+        {details && <div className="co-health-card__text co-health-card__subtitle">{details}</div>}
+      </div>
     </div>
-  </div>
-));
+  ),
+);
 
 type HealthItemProps = {
   className?: string;
@@ -48,4 +46,4 @@ type HealthItemProps = {
 
 type HealthItemIconProps = {
   state?: HealthState;
-}
+};
diff --git a/frontend/public/components/dashboard/inventory-card/inventory-item.tsx b/frontend/public/components/dashboard/inventory-card/inventory-item.tsx
index 703063e0a6f..57ebe24efc5 100644
--- a/frontend/public/components/dashboard/inventory-card/inventory-item.tsx
+++ b/frontend/public/components/dashboard/inventory-card/inventory-item.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { InProgressIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 
-import * as plugins from '../../../plugins';
 import {
   GreenCheckCircleIcon,
-  LoadingInline,
   RedExclamationCircleIcon,
   YellowExclamationTriangleIcon,
+} from '@console/shared';
+import * as plugins from '../../../plugins';
+import {
+  LoadingInline,
 } from '../../utils';
 import { K8sResourceKind, K8sKind } from '../../../module/k8s';
 import { InventoryStatusGroup } from './status-group';
diff --git a/frontend/public/components/deployment-config.tsx b/frontend/public/components/deployment-config.tsx
index a63ccf8bcff..88e181ca413 100644
--- a/frontend/public/components/deployment-config.tsx
+++ b/frontend/public/components/deployment-config.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+
+import { Status } from '@console/shared';
 import { k8sCreate, K8sKind, K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { errorModal } from './modals';
 import { DeploymentConfigModel } from '../models';
@@ -25,7 +27,6 @@ import {
   SectionHeading,
   togglePaused,
   WorkloadPausedAlert,
-  StatusIconAndText,
 } from './utils';
 
 import {
@@ -139,8 +140,8 @@ export const DeploymentConfigsDetails: React.FC<{obj: K8sResourceKind}> = ({obj:
               <dt>Status</dt>
               <dd>
                 {dc.status.availableReplicas === dc.status.updatedReplicas && dc.spec.replicas === dc.status.availableReplicas
-                  ? <StatusIconAndText status="Up to date" />
-                  : <StatusIconAndText status="Updating" />}
+                  ? <Status status="Up to date" />
+                  : <Status status="Updating" />}
               </dd>
             </ResourceSummary>
           </div>
diff --git a/frontend/public/components/deployment.tsx b/frontend/public/components/deployment.tsx
index bd20250cf32..340445a6438 100644
--- a/frontend/public/components/deployment.tsx
+++ b/frontend/public/components/deployment.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+
+import { Status } from '@console/shared';
 import { DeploymentModel } from '../models';
 import { K8sKind, K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { configureUpdateStrategyModal, errorModal } from './modals';
@@ -22,7 +24,6 @@ import {
   pluralize,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
   togglePaused,
   WorkloadPausedAlert,
 } from './utils';
@@ -98,8 +99,8 @@ const DeploymentDetails: React.FC<DeploymentDetailsProps> = ({obj: deployment})
               <dt>Status</dt>
               <dd>
                 {deployment.status.availableReplicas === deployment.status.updatedReplicas && deployment.spec.replicas === deployment.status.availableReplicas
-                  ? <StatusIconAndText status="Up to date" />
-                  : <StatusIconAndText status="Updating" />}
+                  ? <Status status="Up to date" />
+                  : <Status status="Updating" />}
               </dd>
             </ResourceSummary>
           </div>
diff --git a/frontend/public/components/job.jsx b/frontend/public/components/job.jsx
index 40c77a2e3bf..8d34b1c4887 100644
--- a/frontend/public/components/job.jsx
+++ b/frontend/public/components/job.jsx
@@ -2,10 +2,12 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+
+import { Status } from '@console/shared';
 import { getJobTypeAndCompletions } from '../module/k8s';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
 import { configureJobParallelismModal } from './modals';
-import { Kebab, ContainerTable, SectionHeading, LabelList, ResourceKebab, ResourceLink, ResourceSummary, Timestamp, navFactory, StatusIconAndText } from './utils';
+import { Kebab, ContainerTable, SectionHeading, LabelList, ResourceKebab, ResourceLink, ResourceSummary, Timestamp, navFactory } from './utils';
 import { ResourceEventStream } from './events';
 
 const ModifyJobParallelism = (kind, obj) => ({
@@ -109,7 +111,7 @@ const Details = ({obj: job}) => <React.Fragment>
         <SectionHeading text="Job Status" />
         <dl className="co-m-pane__details">
           <dt>Status</dt>
-          <dd>{job.status.conditions ? <StatusIconAndText status={job.status.conditions[0].type} /> : <StatusIconAndText status="In Progress" />}</dd>
+          <dd>{job.status.conditions ? <Status status={job.status.conditions[0].type} /> : <Status status="In Progress" />}</dd>
           <dt>Start Time</dt>
           <dd><Timestamp timestamp={job.status.startTime} /></dd>
           <dt>Completion Time</dt>
diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
index 766d04b4d86..635c1d59052 100644
--- a/frontend/public/components/namespace.jsx
+++ b/frontend/public/components/namespace.jsx
@@ -6,12 +6,13 @@ import { connect } from 'react-redux';
 import { Tooltip } from './utils/tooltip';
 import { Link } from 'react-router-dom';
 import * as fuzzy from 'fuzzysearch';
+import { Status } from '@console/shared';
 
 import { NamespaceModel, ProjectModel, SecretModel } from '../models';
 import { k8sGet } from '../module/k8s';
 import * as UIActions from '../actions/ui';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceIcon, ResourceSummary, MsgBox, StatusIconAndText, ExternalLink, humanizeCpuCores, humanizeDecimalBytes, useAccessReview } from './utils';
+import { Kebab, Dropdown, Firehose, LabelList, LoadingInline, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceIcon, ResourceSummary, MsgBox, ExternalLink, humanizeCpuCores, humanizeDecimalBytes, useAccessReview } from './utils';
 import { createNamespaceModal, createProjectModal, deleteNamespaceModal, configureNamespacePullSecretModal } from './modals';
 import { RoleBindingsPage } from './RBAC';
 import { Bar, Area, requirePrometheus } from './graphs';
@@ -85,7 +86,7 @@ const NamespacesTableRow = ({obj: ns, index, key, style}) => {
         <ResourceLink kind="Namespace" name={ns.metadata.name} title={ns.metadata.uid} />
       </TableData>
       <TableData className={classNames(namespacesColumnClasses[1], 'co-break-word')}>
-        <StatusIconAndText status={ns.status.phase} />
+        <Status status={ns.status.phase} />
       </TableData>
       <TableData className={namespacesColumnClasses[2]}>
         <LabelList kind="Namespace" labels={ns.metadata.labels} />
@@ -170,7 +171,7 @@ const ProjectTableRow = ({obj: project, index, key, style, customData = {}}) =>
         )}
       </TableData>
       <TableData className={projectColumnClasses[1]}>
-        <StatusIconAndText status={project.status.phase} />
+        <Status status={project.status.phase} />
       </TableData>
       <TableData className={classNames(projectColumnClasses[2], 'co-break-word')}>
         {requester || <span className="text-muted">No requester</span>}
@@ -302,7 +303,7 @@ export const NamespaceSummary = ({ns}) => {
     <div className="col-sm-6 col-xs-12">
       <dl className="co-m-pane__details">
         <dt>Status</dt>
-        <dd><StatusIconAndText status={ns.status.phase} /></dd>
+        <dd><Status status={ns.status.phase} /></dd>
         {canListSecrets && <React.Fragment>
           <dt>Default Pull Secret</dt>
           <dd><PullSecret namespace={ns} /></dd>
diff --git a/frontend/public/components/node.tsx b/frontend/public/components/node.tsx
index d1c8646dd3d..3168f687129 100644
--- a/frontend/public/components/node.tsx
+++ b/frontend/public/components/node.tsx
@@ -2,12 +2,14 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+
+import { Status } from '@console/shared';
 import { getNodeRoles, nodeStatus, makeNodeSchedulable, K8sResourceKind, referenceForModel } from '../module/k8s';
 import { ResourceEventStream } from './events';
 import { Table, TableRow, TableData, DetailsPage, ListPage } from './factory';
 import { configureUnschedulableModal } from './modals';
 import { PodsPage } from './pod';
-import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, StatusIconAndText, humanizeDecimalBytes, humanizeCpuCores, useAccessReview, humanizeDecimalBytesPerSec } from './utils';
+import { Kebab, navFactory, LabelList, ResourceKebab, SectionHeading, ResourceLink, Timestamp, units, cloudProviderNames, cloudProviderID, pluralize, humanizeDecimalBytes, humanizeCpuCores, useAccessReview, humanizeDecimalBytesPerSec } from './utils';
 import { Area, requirePrometheus } from './graphs';
 import { MachineModel, NodeModel } from '../models';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
@@ -95,7 +97,7 @@ const NodeTableHeader = () => {
 };
 NodeTableHeader.displayName = 'NodeTableHeader';
 
-const NodeStatus = ({node}) => <StatusIconAndText status={nodeStatus(node)} />;
+const NodeStatus = ({node}) => <Status status={nodeStatus(node)} />;
 
 const NodeTableRow: React.FC<NodeTableRowProps> = ({obj: node, index, key, style}) => {
   const machine = getMachine(node);
diff --git a/frontend/public/components/operator-hub/operator-hub-items.tsx b/frontend/public/components/operator-hub/operator-hub-items.tsx
index af7669fa98c..370f7714e22 100644
--- a/frontend/public/components/operator-hub/operator-hub-items.tsx
+++ b/frontend/public/components/operator-hub/operator-hub-items.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import { Modal } from 'patternfly-react';
 import { CatalogTile } from 'patternfly-react-extensions';
 
+import { GreenCheckCircleIcon } from '@console/shared';
 import { history } from '../utils/router';
 import { COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY } from '../../const';
 import { normalizeIconClass } from '../catalog/catalog-item-icon';
@@ -10,7 +11,6 @@ import { TileViewPage } from '../utils/tile-view-page';
 import { OperatorHubItemDetails } from './operator-hub-item-details';
 import { communityOperatorWarningModal } from './operator-hub-community-provider-modal';
 import { OperatorHubItem, InstalledState, ProviderType, CapabilityLevel } from './index';
-import { GreenCheckCircleIcon } from '../utils/status-icon';
 
 const badge = (text: string) => <span key="1" className="pf-c-badge pf-m-read">{text}</span>;
 
diff --git a/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx b/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
index 22055708896..5697e933fb7 100644
--- a/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
@@ -7,6 +7,7 @@ import { sortable } from '@patternfly/react-table';
 import { Helmet } from 'react-helmet';
 import { Alert } from '@patternfly/react-core';
 
+import { SuccessStatus, ErrorStatus } from '@console/shared';
 import { ProvidedAPIsPage, ProvidedAPIPage } from './operand';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from '../factory';
 import { withFallback } from '../utils/error-boundary';
@@ -47,7 +48,6 @@ import {
 } from '../utils';
 import { operatorGroupFor, operatorNamespaceFor } from './operator-group';
 import { SubscriptionDetails } from './subscription';
-import { GreenCheckCircleIcon, RedExclamationCircleIcon } from '@console/internal/components/utils/status-icon';
 
 const tableColumnClasses = [
   classNames('col-lg-3', 'col-md-4', 'col-sm-4', 'col-xs-6'),
@@ -92,9 +92,9 @@ export const ClusterServiceVersionTableRow = withFallback<ClusterServiceVersionT
   const showSuccessIcon = statusString === 'Copied' || statusString === 'InstallSucceeded';
   const installStatus = obj.status && obj.status.phase !== ClusterServiceVersionPhase.CSVPhaseFailed
     ? <span className={classNames(showSuccessIcon && 'co-icon-and-text')}>{showSuccessIcon &&
-        <GreenCheckCircleIcon className="co-icon-and-text__icon" />}{statusString}
+        <SuccessStatus title={statusString} />}
     </span>
-    : <span className="co-error co-icon-and-text"><RedExclamationCircleIcon className="co-icon-and-text__icon" />Failed</span>;
+    : <span className="co-error co-icon-and-text"><ErrorStatus title="Failed" /></span>;
   return (
     <TableRow id={obj.metadata.uid} index={index} trKey={key} style={style}>
       <TableData className={tableColumnClasses[0]}>
diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
index 3e9de48a430..098f510fd34 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 import { Map as ImmutableMap } from 'immutable';
+import { Status, SuccessStatus } from '@console/shared';
 
-import { ResourceLink, StatusIconAndText } from '../../../utils';
+import { ResourceLink } from '../../../utils';
 import { StatusCapability, CapabilityProps, DescriptorProps } from '../types';
 import { Phase } from './phase';
 import { PodStatusChart } from './pods';
 import { Tooltip } from '../../../utils/tooltip';
 import { Conditions } from '../../../conditions';
-import { GreenCheckCircleIcon } from '@console/internal/components/utils/status-icon';
 
 const Invalid: React.SFC<StatusCapabilityProps> = (props) => <span className="text-muted">
   <i className="fa fa-exclamation-triangle text-warning" aria-hidden="true" />&nbsp;&nbsp;The field <code>status.{props.descriptor.path}</code> is invalid
@@ -83,8 +83,8 @@ export const StatusDescriptor: React.SFC<DescriptorProps> = (props) => {
     <dd className="olm-descriptor__value">
       {
         descriptor.displayName === 'Status'
-          ? (<StatusIconAndText status={value} icon={value === 'Running' ? <GreenCheckCircleIcon /> : undefined} />)
-          : (<Capability descriptor={descriptor} capability={capability} value={value} namespace={namespace} />)
+          ? (value === 'Running' ? <SuccessStatus title={value} /> : <Status status={value} />)
+          : <Capability descriptor={descriptor} capability={capability} value={value} namespace={namespace} />
       }
     </dd>
   </dl>;
diff --git a/frontend/public/components/operator-lifecycle-manager/operand.tsx b/frontend/public/components/operator-lifecycle-manager/operand.tsx
index e89ad5e4924..96a25063589 100644
--- a/frontend/public/components/operator-lifecycle-manager/operand.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/operand.tsx
@@ -4,6 +4,8 @@ import * as _ from 'lodash-es';
 import { connect } from 'react-redux';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+
+import { Status, SuccessStatus } from '@console/shared';
 import { ClusterServiceVersionKind, referenceForProvidedAPI } from './index';
 import { StatusDescriptor } from './descriptors/status';
 import { SpecDescriptor } from './descriptors/spec';
@@ -12,13 +14,12 @@ import { StatusCapability, Descriptor } from './descriptors/types';
 import { Resources } from './k8s-resource';
 import { ErrorPage404 } from '../error';
 import { MultiListPage, ListPage, DetailsPage, Table, TableRow, TableData } from '../factory';
-import { ResourceSummary, StatusBox, navFactory, Timestamp, LabelList, ResourceIcon, MsgBox, ResourceKebab, Kebab, KebabAction, LoadingBox, StatusIconAndText } from '../utils';
+import { ResourceSummary, StatusBox, navFactory, Timestamp, LabelList, ResourceIcon, MsgBox, ResourceKebab, Kebab, KebabAction, LoadingBox } from '../utils';
 import { connectToModel } from '../../kinds';
 import { apiVersionForReference, kindForReference, K8sResourceKind, OwnerReference, K8sKind, referenceFor, GroupVersionKind, referenceForModel } from '../../module/k8s';
 import { ClusterServiceVersionModel } from '../../models';
 import { deleteModal } from '../modals';
 import { RootState } from '../../redux';
-import { GreenCheckCircleIcon } from '@console/internal/components/utils/status-icon';
 
 const csvName = () => location.pathname.split('/').find((part, i, allParts) => allParts[i - 1] === referenceForModel(ClusterServiceVersionModel) || allParts[i - 1] === ClusterServiceVersionModel.plural);
 
@@ -113,7 +114,7 @@ export const OperandTableRow: React.FC<OperandTableRowProps> = ({obj, index, key
       <TableData className={tableColumnClasses[3]}>
         {_.isEmpty(status) ?
           <div className="text-muted">Unknown</div> :
-          <StatusIconAndText status={status} icon={status === 'Running' ? <GreenCheckCircleIcon /> : undefined} />
+          <>{status === 'Running' ? <SuccessStatus title={status} /> : <Status status={status} />}</>
         }
       </TableData>
       <TableData className={tableColumnClasses[4]}>
diff --git a/frontend/public/components/overview/build-overview.tsx b/frontend/public/components/overview/build-overview.tsx
index 003447be0f1..f1826aa829d 100644
--- a/frontend/public/components/overview/build-overview.tsx
+++ b/frontend/public/components/overview/build-overview.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import { Button, ListGroup } from 'patternfly-react';
 
+import { Status, StatusIconAndText } from '@console/shared';
 import { BuildNumberLink, BuildLogLink } from '../build';
 import { errorModal } from '../modals/error-modal';
 import { fromNow } from '../utils/datetime';
@@ -13,10 +14,10 @@ import {
 import {
   ResourceLink,
   SidebarSectionHeading,
-  StatusIcon,
 } from '../utils';
 
 import { BuildConfigOverviewItem } from '.';
+import { SyncIcon } from '@patternfly/react-icons';
 
 const conjugateBuildPhase = (phase: BuildPhase): string => {
   switch (phase) {
@@ -50,17 +51,23 @@ const BuildOverviewItem: React.SFC<BuildOverviewListItemProps> = ({build}) => {
     || startTimestamp
     || creationTimestamp;
 
+  const statusTitle = (
+    <>
+      Build
+      &nbsp;
+      <BuildNumberLink build={build} />
+      &nbsp;
+      {conjugateBuildPhase(phase)}
+      {lastUpdated && <span className="text-muted">&nbsp;({fromNow(lastUpdated)})</span>}
+    </>
+  );
+
   return <li className="list-group-item build-overview__item">
     <div className="build-overview__item-title">
       <div>
-        <StatusIcon status={phase} spin={phase === 'Running'} />
-        &nbsp;
-        Build
-        &nbsp;
-        <BuildNumberLink build={build} />
-        &nbsp;
-        {conjugateBuildPhase(phase)}
-        {lastUpdated && <span className="text-muted">&nbsp;({fromNow(lastUpdated)})</span>}
+        {phase === 'Running'
+          ? <><StatusIconAndText icon={<SyncIcon />} title={phase} spin iconOnly /> {statusTitle}</>
+          : <><Status status={phase} iconOnly /> {statusTitle}</>}
       </div>
       <div>
         <BuildLogLink build={build} />
diff --git a/frontend/public/components/overview/project-overview.tsx b/frontend/public/components/overview/project-overview.tsx
index f5ebbfa4abd..cdfc1fa5c8d 100644
--- a/frontend/public/components/overview/project-overview.tsx
+++ b/frontend/public/components/overview/project-overview.tsx
@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { ListView } from 'patternfly-react';
 
+import { Status as TooltipStatus } from '@console/shared';
 import { KEYBOARD_SHORTCUTS } from '../../const';
 import { Tooltip } from '../utils/tooltip';
 import { K8sResourceKind } from '../../module/k8s';
@@ -13,7 +14,6 @@ import {
   pluralize,
   ResourceIcon,
   resourceObjPath,
-  StatusIcon,
   truncateMiddle,
 } from '../utils';
 
@@ -151,7 +151,7 @@ const AlertTooltip = ({alerts, severity, noSeverityLabel=false}) => {
   // Disable the tooltip on mobile since a touch also opens the sidebar, which
   // immediately covers the tooltip content.
   return <Tooltip content={content} styles={overviewTooltipStyles} disableOnMobile>
-    <StatusIcon status={severity} spin={severity === 'Running'} /> {noSeverityLabel ? count : pluralize(count, label)}
+    <TooltipStatus status={severity} title={noSeverityLabel ? String(count) : pluralize(count, label)} />
   </Tooltip>;
 };
 
diff --git a/frontend/public/components/persistent-volume-claim.jsx b/frontend/public/components/persistent-volume-claim.jsx
index cd3290050b5..f07b910fcd5 100644
--- a/frontend/public/components/persistent-volume-claim.jsx
+++ b/frontend/public/components/persistent-volume-claim.jsx
@@ -2,11 +2,13 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+
+import { Status } from '@console/shared';
 import { connectToFlags } from '../reducers/features';
 import { Conditions } from './conditions';
 import { FLAGS } from '../const';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Selector, StatusIconAndText } from './utils';
+import { Kebab, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Selector } from './utils';
 import { ResourceEventStream } from './events';
 
 export const pvcPhase = pvc => pvc.status.phase;
@@ -16,7 +18,7 @@ const menuActions = [ExpandPVC, ...common];
 
 const PVCStatus = ({pvc}) => {
   const phase = pvcPhase(pvc);
-  return <StatusIconAndText status={phase} />;
+  return <Status status={phase} />;
 };
 
 const tableColumnClasses = [
diff --git a/frontend/public/components/persistent-volume.jsx b/frontend/public/components/persistent-volume.jsx
index 618eded8704..8ea153a9f23 100644
--- a/frontend/public/components/persistent-volume.jsx
+++ b/frontend/public/components/persistent-volume.jsx
@@ -2,13 +2,15 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+
+import { Status } from '@console/shared';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, LabelList, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Timestamp, StatusIconAndText } from './utils';
+import { Kebab, LabelList, navFactory, ResourceKebab, SectionHeading, ResourceLink, ResourceSummary, Timestamp } from './utils';
 
 const { common } = Kebab.factory;
 const menuActions = [...common];
 
-const PVStatus = ({pv}) => <StatusIconAndText status={pv.status.phase} />;
+const PVStatus = ({pv}) => <Status status={pv.status.phase} />;
 
 const tableColumnClasses = [
   classNames('col-lg-2', 'col-md-2', 'col-sm-4', 'col-xs-6'),
diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
index 31e1d1a2460..797b2d855b3 100644
--- a/frontend/public/components/pod.tsx
+++ b/frontend/public/components/pod.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
+import { Status, ErrorStatus } from '@console/shared';
 
 import { ContainerSpec, K8sResourceKindReference, PodKind } from '../module/k8s';
 import { getRestartPolicyLabel, podPhase, podPhaseFilterReducer, podReadiness } from '../module/k8s/pods';
@@ -21,7 +22,6 @@ import {
   ScrollToTopOnMount,
   SectionHeading,
   Selector,
-  StatusIconAndText,
   Timestamp,
   navFactory,
   units,
@@ -33,7 +33,6 @@ import { requirePrometheus, Area } from './graphs';
 import { formatDuration } from './utils/datetime';
 import { CamelCaseWrap } from './utils/camel-case-wrap';
 import { VolumesTable } from './volumes-table';
-import { RedExclamationCircleIcon } from '@console/internal/components/utils/status-icon';
 
 export const menuActions = [...Kebab.factory.common];
 const validReadinessStates = new Set(['ContainersNotReady', 'Ready', 'PodCompleted']);
@@ -47,8 +46,7 @@ export const Readiness: React.FC<ReadinessProps> = ({pod}) => {
     return <CamelCaseWrap value={readiness} />;
   }
   return <span className="co-error co-icon-and-text">
-    <RedExclamationCircleIcon className="co-icon-and-text__icon" />
-    <CamelCaseWrap value={readiness} />
+    <ErrorStatus title={readiness} />
   </span>;
 };
 Readiness.displayName = 'Readiness';
@@ -82,7 +80,7 @@ const PodTableRow: React.FC<PodTableRowProps> = ({obj: pod, index, key, style})
         <NodeLink name={pod.spec.nodeName} />
       </TableData>
       <TableData className={tableColumnClasses[4]}>
-        <StatusIconAndText status={phase} />
+        <Status status={phase} />
       </TableData>
       <TableData className={tableColumnClasses[5]}>
         <Readiness pod={pod} />
@@ -150,7 +148,7 @@ export const ContainerRow: React.FC<ContainerRowProps> = ({pod, container}) => {
       <ContainerLink pod={pod} name={container.name} />
     </div>
     <div className="col-lg-2 col-md-3 col-sm-5 col-xs-7 co-truncate co-nowrap co-select-to-copy">{container.image || '-'}</div>
-    <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs"><StatusIconAndText status={cstate.label} /></div>
+    <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs"><Status status={cstate.label} /></div>
     <div className="col-lg-1 col-md-2 hidden-sm hidden-xs">{_.get(cstatus, 'restartCount', '0')}</div>
     <div className="col-lg-2 col-md-2 hidden-sm hidden-xs"><Timestamp timestamp={startedAt} /></div>
     <div className="col-lg-2 hidden-md hidden-sm hidden-xs"><Timestamp timestamp={finishedAt} /></div>
@@ -207,7 +205,7 @@ const PodGraphs = requirePrometheus(({pod}) => <React.Fragment>
   <br />
 </React.Fragment>);
 
-export const PodStatus: React.FC<PodStatusProps> = ({pod}) => <StatusIconAndText status={podPhase(pod)} />;
+export const PodStatus: React.FC<PodStatusProps> = ({pod}) => <Status status={podPhase(pod)} />;
 
 export const PodDetailsList: React.FC<PodDetailsListProps> = ({pod}) => {
   const activeDeadlineSeconds = _.get(pod, 'spec.activeDeadlineSeconds');
diff --git a/frontend/public/components/routes.tsx b/frontend/public/components/routes.tsx
index 8ce679ebced..b15b2fc9987 100644
--- a/frontend/public/components/routes.tsx
+++ b/frontend/public/components/routes.tsx
@@ -4,8 +4,10 @@ import * as classNames from 'classnames';
 import { Popover } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
 import { QuestionCircleIcon } from '@patternfly/react-icons';
+
+import { Status } from '@console/shared';
 import { DetailsPage,ListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, CopyToClipboard, SectionHeading, ResourceKebab, detailsPage, navFactory, ResourceLink, ResourceSummary, StatusIconAndText, ExternalLink } from './utils';
+import { Kebab, CopyToClipboard, SectionHeading, ResourceKebab, detailsPage, navFactory, ResourceLink, ResourceSummary, ExternalLink } from './utils';
 import { MaskedData } from './configmap-and-secret-data';
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { Conditions, conditionProps } from './conditions';
@@ -104,7 +106,7 @@ export const routeStatus = (route) => {
 
 export const RouteStatus: React.SFC<RouteStatusProps> = ({obj: route}) => {
   const status: string = routeStatus(route);
-  return <StatusIconAndText status={status} />;
+  return <Status status={status} />;
 };
 RouteStatus.displayName = 'RouteStatus';
 
diff --git a/frontend/public/components/template-instance.tsx b/frontend/public/components/template-instance.tsx
index eeaee627a9c..635b6ab29d3 100644
--- a/frontend/public/components/template-instance.tsx
+++ b/frontend/public/components/template-instance.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+
+import { Status } from '@console/shared';
 import {
   DetailsPage,
   ListPage,
@@ -19,7 +21,6 @@ import {
   ResourceLink,
   ResourceSummary,
   SectionHeading,
-  StatusIconAndText,
 } from './utils';
 
 const menuActions = Kebab.factory.common;
@@ -62,7 +63,7 @@ const TemplateInstanceTableRow: React.FC<TemplateInstanceTableRowProps> = ({obj,
         <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <StatusIconAndText status={getTemplateInstanceStatus(obj)} />
+        <Status status={getTemplateInstanceStatus(obj)} />
       </TableData>
       <TableData className={tableColumnClasses[3]}>
         <ResourceKebab actions={menuActions} kind="TemplateInstance" resource={obj} />
@@ -120,7 +121,7 @@ const TemplateInstanceDetails: React.SFC<TemplateInstanceDetailsProps> = ({obj})
             <div className="col-sm-6">
               <dl className="co-m-pane__details">
                 <dt>Status</dt>
-                <dd><StatusIconAndText status={status} /></dd>
+                <dd><Status status={status} /></dd>
                 {secretName && (
                   <React.Fragment>
                     <dt>Parameters</dt>
diff --git a/frontend/public/components/utils/index.tsx b/frontend/public/components/utils/index.tsx
index 876579fd90f..149baaef08d 100644
--- a/frontend/public/components/utils/index.tsx
+++ b/frontend/public/components/utils/index.tsx
@@ -48,7 +48,6 @@ export * from './request-size-input';
 export * from './k8s-watcher';
 export * from './workload-pause';
 export * from './list-dropdown';
-export * from './status-icon';
 export * from './list-input';
 export * from './rbac';
 export * from './poll-hook';
diff --git a/frontend/public/components/utils/service-catalog-status.tsx b/frontend/public/components/utils/service-catalog-status.tsx
index 42ce6b4f674..f0c927f2017 100644
--- a/frontend/public/components/utils/service-catalog-status.tsx
+++ b/frontend/public/components/utils/service-catalog-status.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { Status } from '@console/shared';
 
 import { K8sResourceKind, serviceCatalogStatus } from '../../module/k8s';
-import { StatusIconAndText } from '../utils';
 
 export const StatusWithIcon: React.SFC<StatusWithIconProps> = ({obj}) => {
   const objStatus: string = serviceCatalogStatus(obj);
-  return <StatusIconAndText status={objStatus} />;
+  return <Status status={objStatus} />;
 };
 
 export type StatusWithIconProps = {
diff --git a/frontend/public/components/utils/status-icon.tsx b/frontend/public/components/utils/status-icon.tsx
deleted file mode 100644
index 7341c1a20e8..00000000000
--- a/frontend/public/components/utils/status-icon.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import {
-  BanIcon,
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  HourglassHalfIcon,
-  HourglassStartIcon,
-  InfoCircleIcon,
-  InProgressIcon,
-  SyncAltIcon,
-  UnknownIcon,
-} from '@patternfly/react-icons';
-
-import {CamelCaseWrap} from './camel-case-wrap';
-import * as classNames from 'classnames';
-
-export const GreenCheckCircleIcon: React.FunctionComponent<ColoredIconProps> = ({className}) => {
-  return <CheckCircleIcon color="var(--pf-global--success-color--100)" className={className} />;
-};
-
-export const RedExclamationCircleIcon: React.FunctionComponent<ColoredIconProps> = ({className}) => {
-  return <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" className={className} />;
-};
-
-export const YellowExclamationTriangleIcon: React.FunctionComponent<ColoredIconProps> = ({className}) => {
-  return <ExclamationTriangleIcon color="var(--pf-global--warning-color--100)" className={className} />;
-};
-
-export const StatusIcon: React.FunctionComponent<StatusIconProps> = ({status, spin, icon, additionalIconClassName}) => {
-  const className = classNames(spin && 'fa-spin', additionalIconClassName);
-
-  if (icon) {
-    return React.cloneElement(icon, {className});
-  }
-
-  switch (status) {
-    case 'New':
-      return <HourglassStartIcon className={className} />;
-
-    case 'Pending':
-      return <HourglassHalfIcon className={className} />;
-
-    case 'ContainerCreating':
-      return <InProgressIcon className={className} />;
-
-    case 'In Progress':
-    case 'Running':
-    case 'Updating':
-    case 'Upgrading':
-      return <SyncAltIcon className={className} />;
-
-    case 'Cancelled':
-    case 'Expired':
-    case 'Not Ready':
-    case 'Terminating':
-      return <BanIcon className={className} />;
-
-    case 'Warning':
-      return <YellowExclamationTriangleIcon className={className} />;
-
-    case 'ContainerCannotRun':
-    case 'CrashLoopBackOff':
-    case 'Critical':
-    case 'Error':
-    case 'Failed':
-    case 'InstallCheckFailed':
-    case 'Lost':
-    case 'Rejected':
-      return <RedExclamationCircleIcon className={className} />;
-
-    case 'Accepted':
-    case 'Active':
-    case 'Bound':
-    case 'Complete':
-    case 'Succeeded':
-    case 'Completed':
-    case 'Enabled':
-    case 'Ready':
-    case 'Up to date':
-      return <GreenCheckCircleIcon className={className} />;
-
-    case 'Info':
-      return <InfoCircleIcon className={className} />;
-
-    case 'Unknown':
-      return <UnknownIcon className={className} />;
-
-    default:
-      return null;
-  }
-};
-
-export const StatusIconAndText: React.FunctionComponent<StatusIconAndTextProps> = ({status, spin, icon}) => {
-  if (!status){
-    return <span>-</span>;
-  }
-
-  return <span className="co-icon-and-text"><StatusIcon status={status} spin={spin} additionalIconClassName="co-icon-and-text__icon" icon={icon} /><CamelCaseWrap value={status} /></span>;
-};
-
-export type ColoredIconProps = {
-  className?: string;
-};
-
-export type StatusIconProps = {
-  status?: string;
-  additionalIconClassName?: any;
-  spin?: boolean;
-  icon?: React.ReactElement;
-};
-
-export type StatusIconAndTextProps = {
-  status?: string;
-  spin?: boolean;
-  icon?: React.ReactElement;
-};