From 6ca8423f680db3d5145b8676cacf8c956e27b074 Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Wed, 17 Jul 2019 17:00:19 -0400
Subject: [PATCH] Migrate icons to PF4 components and upgrade Font Awesome

---
 .../descriptors/status/phase.spec.tsx         |  4 +--
 .../components/resource-quota.spec.tsx        | 14 ++++----
 .../components/utils/download-button.spec.tsx |  2 +-
 .../views/monitoring.view.ts                  |  2 +-
 frontend/package.json                         |  2 +-
 .../formik-fields/InputSearchField.tsx        |  4 ++-
 .../import/image-search/SearchResults.tsx     |  7 ++--
 .../import/image-search/SearchStatus.tsx      |  5 ++-
 .../components/topology/TopologySideBar.scss  |  5 +--
 .../modals/modal-resource-launcher.tsx        |  3 +-
 .../public/components/_build-pipeline.scss    | 12 ++-----
 .../public/components/_icon-and-text.scss     |  3 --
 frontend/public/components/_image-stream.scss |  4 +--
 frontend/public/components/_quota.scss        |  4 ---
 frontend/public/components/_toggle-play.scss  |  6 ++--
 frontend/public/components/build-pipeline.tsx | 25 +++++++++----
 .../public/components/catalog/_catalog.scss   |  4 ---
 frontend/public/components/chargeback.tsx     |  4 ++-
 .../cluster-settings/cluster-operator.tsx     | 17 +++++----
 .../cluster-settings/cluster-settings.tsx     | 24 ++++++++-----
 .../components/configmap-and-secret-data.tsx  |  5 +--
 .../components/custom-resource-definition.tsx |  7 ++--
 frontend/public/components/edit-yaml.jsx      |  3 +-
 frontend/public/components/factory/list.tsx   |  3 +-
 .../components/image-stream-timeline.tsx      |  5 +--
 frontend/public/components/image-stream.tsx   |  8 ++---
 .../public/components/masthead-toolbar.jsx    |  4 +--
 .../public/components/modals/_modals.scss     |  2 ++
 .../public/components/modals/delete-modal.jsx |  4 +--
 .../modals/delete-namespace-modal.jsx         |  4 +--
 .../public/components/modals/taints-modal.tsx |  7 ++--
 .../components/modals/tolerations-modal.tsx   |  5 +--
 frontend/public/components/monitoring.tsx     | 36 ++++++++++++-------
 .../public/components/monitoring/metrics.tsx  | 15 +++++---
 frontend/public/components/namespace.jsx      |  3 +-
 .../clusterserviceversion.tsx                 |  3 +-
 .../descriptors/spec/affinity.tsx             | 17 ++++-----
 .../descriptors/spec/index.tsx                |  4 +--
 .../descriptors/spec/match-expressions.tsx    |  5 +--
 .../descriptors/status/index.tsx              |  4 +--
 .../descriptors/status/phase.tsx              |  3 +-
 .../install-plan.tsx                          | 10 +++---
 .../subscription.tsx                          |  9 +++--
 .../public/components/overview/_overview.scss |  5 +--
 .../overview/_project-overview.scss           |  4 +--
 .../components/overview/project-overview.tsx  |  3 +-
 frontend/public/components/pod-exec.jsx       |  3 +-
 frontend/public/components/resource-quota.jsx | 24 ++++++++-----
 frontend/public/components/routes.tsx         |  6 ++--
 .../components/secrets/create-secret.tsx      |  9 ++---
 .../components/sidebars/resource-sidebar.jsx  | 14 +++++---
 .../public/components/software-details.jsx    | 28 +--------------
 .../public/components/source-to-image.tsx     |  3 +-
 frontend/public/components/start-guide.tsx    |  3 +-
 frontend/public/components/terminal.jsx       |  3 +-
 .../components/utils/_name-value-editor.scss  | 11 +++---
 .../components/utils/_number-spinner.scss     |  4 +--
 .../public/components/utils/close-button.jsx  |  3 +-
 .../components/utils/copy-to-clipboard.tsx    |  3 +-
 .../components/utils/download-button.tsx      |  3 +-
 frontend/public/components/utils/dropdown.jsx |  8 ++---
 .../public/components/utils/list-input.tsx    |  5 +--
 .../public/components/utils/log-window.jsx    |  3 +-
 .../components/utils/name-value-editor.jsx    | 15 ++++----
 .../components/utils/number-spinner.tsx       |  5 +--
 .../public/components/utils/resource-log.jsx  | 11 +++---
 frontend/public/components/utils/selector.tsx |  3 +-
 .../public/components/utils/status-icon.tsx   |  2 +-
 frontend/public/style.scss                    | 12 +++----
 frontend/public/style/_common.scss            | 22 +++++++-----
 frontend/public/style/_overrides.scss         |  5 +++
 frontend/public/style/_status.scss            | 27 --------------
 frontend/public/style/_vars.scss              |  7 +---
 .../public/style/mixin/_font-awesome.scss     |  9 +++++
 frontend/public/vendor.scss                   |  4 +--
 frontend/yarn.lock                            |  7 +++-
 76 files changed, 312 insertions(+), 279 deletions(-)
 delete mode 100644 frontend/public/style/_status.scss
 create mode 100644 frontend/public/style/mixin/_font-awesome.scss

diff --git a/frontend/__tests__/components/operator-lifecycle-manager/descriptors/status/phase.spec.tsx b/frontend/__tests__/components/operator-lifecycle-manager/descriptors/status/phase.spec.tsx
index 05706ae55edb..88bb247def58 100644
--- a/frontend/__tests__/components/operator-lifecycle-manager/descriptors/status/phase.spec.tsx
+++ b/frontend/__tests__/components/operator-lifecycle-manager/descriptors/status/phase.spec.tsx
@@ -15,7 +15,7 @@ describe(Phase.displayName, () => {
     wrapper.setProps({status});
 
     expect(wrapper.find('.co-error').exists()).toBe(true);
-    expect(wrapper.find('.fa.fa-ban').exists()).toBe(true);
+    expect(wrapper.find('[data-test-id="ban-icon"]').exists()).toBe(true);
   });
 
   it('renders status text', () => {
@@ -24,6 +24,6 @@ describe(Phase.displayName, () => {
 
     expect(wrapper.find('.co-error').exists()).toBe(false);
     expect(wrapper.text()).toContain(status);
-    expect(wrapper.find('.fa.fa-ban').exists()).toBe(false);
+    expect(wrapper.find('[data-test-id="ban-icon"]').exists()).toBe(false);
   });
 });
diff --git a/frontend/__tests__/components/resource-quota.spec.tsx b/frontend/__tests__/components/resource-quota.spec.tsx
index 779ae8994117..2adb81414315 100644
--- a/frontend/__tests__/components/resource-quota.spec.tsx
+++ b/frontend/__tests__/components/resource-quota.spec.tsx
@@ -7,37 +7,37 @@ describe(ResourceQuotaTableRow.displayName, () => {
 
   it('renders usageIconClass with empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={0} />);
-    expect(wrapper.find('i').hasClass('co-resource-quota-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={1} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost empty UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={49} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-empty')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-empty')).toBe(true);
   });
 
   it('renders usageIconClass with almost full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={50} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-full')).toBe(true);
   });
 
   it('renders usageIconClass with almost full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={99} />);
-    expect(wrapper.find('i').hasClass('pficon-resources-almost-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-almost-full')).toBe(true);
   });
 
   it('renders usageIconClass with full UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={100} />);
-    expect(wrapper.find('i').hasClass('pficon pficon-resources-full')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-full')).toBe(true);
   });
 
   it('renders usageIconClass with warning UsageIcon', () => {
     wrapper = shallow(<UsageIcon percent={101} />);
-    expect(wrapper.find('i').hasClass('pficon-warning-triangle-o')).toBe(true);
+    expect(wrapper.hasClass('co-resource-quota-exceeded')).toBe(true);
   });
 });
 
diff --git a/frontend/__tests__/components/utils/download-button.spec.tsx b/frontend/__tests__/components/utils/download-button.spec.tsx
index 4939dd842854..d4bfc9cf0c06 100644
--- a/frontend/__tests__/components/utils/download-button.spec.tsx
+++ b/frontend/__tests__/components/utils/download-button.spec.tsx
@@ -32,7 +32,7 @@ describe(DownloadButton.displayName, () => {
 
   it('renders "Downloading..." if download is in flight', (done) => {
     spyAndExpect(spyOn(coFetch, 'coFetch'))(Promise.resolve()).then(() => {
-      expect(wrapper.find('button').text().trim()).toEqual('Downloading...');
+      expect(wrapper.find('button').text().trim()).toContain('Downloading...');
       done();
     });
 
diff --git a/frontend/integration-tests/views/monitoring.view.ts b/frontend/integration-tests/views/monitoring.view.ts
index cf0e373d70d0..8dc38e511cb0 100644
--- a/frontend/integration-tests/views/monitoring.view.ts
+++ b/frontend/integration-tests/views/monitoring.view.ts
@@ -14,7 +14,7 @@ export const detailsHeadingRuleIcon = $('.co-m-nav-title .co-m-resource-alertrul
 export const detailsHeadingSilenceIcon = $('.co-m-nav-title .co-m-resource-silence');
 export const detailsSubHeadings = $$('.co-m-pane__body h2');
 export const labels = $$('.co-m-label');
-export const expiredSilenceIcon = $('.co-m-pane__details .fa-ban');
+export const expiredSilenceIcon = $('.co-m-pane__details [data-test-id="ban-icon"]');
 export const ruleLink = $('.co-m-pane__details .co-resource-item__resource-name');
 export const silenceComment = $$('.co-m-pane__details dd').get(-2);
 export const firstAlertsListLink = $$('.co-resource-list__item a.co-resource-item').first();
diff --git a/frontend/package.json b/frontend/package.json
index 38f705918ad6..43be7e64d963 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -67,6 +67,7 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.9.0",
     "@patternfly/patternfly": "2.17.2",
     "@patternfly/react-charts": "4.4.16",
     "@patternfly/react-core": "3.67.4",
@@ -80,7 +81,6 @@
     "core-js": "2.x",
     "d3": "^5.9.2",
     "file-saver": "1.3.x",
-    "font-awesome": "4.7.x",
     "formik": "2.0.1-rc.1",
     "fuzzysearch": "1.0.x",
     "history": "4.x",
diff --git a/frontend/packages/dev-console/src/components/formik-fields/InputSearchField.tsx b/frontend/packages/dev-console/src/components/formik-fields/InputSearchField.tsx
index a45d68a21a03..26f2fc17ff4c 100644
--- a/frontend/packages/dev-console/src/components/formik-fields/InputSearchField.tsx
+++ b/frontend/packages/dev-console/src/components/formik-fields/InputSearchField.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useField } from 'formik';
 import { ControlLabel, FormControl, FormGroup, HelpBlock, InputGroup } from 'patternfly-react';
+import { SearchIcon } from '@patternfly/react-icons';
+
 import { SearchInputFieldProps } from './field-types';
 import { getValidationState } from './field-utils';
 
@@ -35,7 +37,7 @@ const InputSearchField: React.FC<SearchInputFieldProps> = ({
             onClick={() => onSearch(field.value)}
             disabled={!field.value}
           >
-            <i className="fa fa-search" aria-hidden="true" />
+            <SearchIcon />
             <span className="sr-only">Find</span>
           </button>
         </span>
diff --git a/frontend/packages/dev-console/src/components/import/image-search/SearchResults.tsx b/frontend/packages/dev-console/src/components/import/image-search/SearchResults.tsx
index a3402932ded1..21e92af878ff 100644
--- a/frontend/packages/dev-console/src/components/import/image-search/SearchResults.tsx
+++ b/frontend/packages/dev-console/src/components/import/image-search/SearchResults.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { CubeIcon } from '@patternfly/react-icons';
 
 import { Timestamp, units } from '@console/internal/components/utils';
 import { Alert } from '@patternfly/react-core';
@@ -38,11 +39,7 @@ const SearchResults: React.FC = () => {
         )}
         <div className="row">
           <div className="col-sm-3 col-md-2 hidden-xs text-right h2">
-            <span
-              className="fa fa-cube text-muted"
-              style={{ fontSize: '100px' }}
-              aria-hidden="true"
-            />
+            <CubeIcon className="text-muted" style={{ fontSize: '100px' }} />
           </div>
           <div className="col-sm-9 col-md-10">
             <h2 className="co-image-name-results__heading co-break-word">
diff --git a/frontend/packages/dev-console/src/components/import/image-search/SearchStatus.tsx b/frontend/packages/dev-console/src/components/import/image-search/SearchStatus.tsx
index 2da6d746ef15..ba4ce1a33bbd 100644
--- a/frontend/packages/dev-console/src/components/import/image-search/SearchStatus.tsx
+++ b/frontend/packages/dev-console/src/components/import/image-search/SearchStatus.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 
-import { Loading } from '@console/internal/components/utils';
+import { Loading, RedExclamationCircleIcon } from '@console/internal/components/utils';
 import { useFormikContext, FormikValues } from 'formik';
 
 const SearchStatus: React.FC = () => {
@@ -20,8 +20,7 @@ const SearchStatus: React.FC = () => {
         {!values.isSearchingForImage && isiError && (
           <React.Fragment>
             <h2 className="h3 co-image-name-results__loading-heading">
-              <i className="pficon pficon-error-circle-o" aria-hidden="true" /> Could not load image
-              metadata.
+              <RedExclamationCircleIcon /> Could not load image metadata.
             </h2>
             <p className="co-image-name-results__loading-error">{isiError}</p>
           </React.Fragment>
diff --git a/frontend/packages/dev-console/src/components/topology/TopologySideBar.scss b/frontend/packages/dev-console/src/components/topology/TopologySideBar.scss
index f1368fc7781d..ec93fbe48f4e 100644
--- a/frontend/packages/dev-console/src/components/topology/TopologySideBar.scss
+++ b/frontend/packages/dev-console/src/components/topology/TopologySideBar.scss
@@ -3,14 +3,11 @@
     padding: 0 5px;
 
     .close {
+      font-size: 16px;
       // adjustments to increase click target and default color contrast because it's on a grey background
       opacity: 0.3;
       padding: 10px 15px;
     }
-
-    .pficon-close {
-      font-size: 16px;
-    }
   }
 
   &__overlay {
diff --git a/frontend/packages/kubevirt-plugin/src/components/modals/modal-resource-launcher.tsx b/frontend/packages/kubevirt-plugin/src/components/modals/modal-resource-launcher.tsx
index be176a58f52c..74c439da873c 100644
--- a/frontend/packages/kubevirt-plugin/src/components/modals/modal-resource-launcher.tsx
+++ b/frontend/packages/kubevirt-plugin/src/components/modals/modal-resource-launcher.tsx
@@ -12,6 +12,7 @@ import {
   Box,
   FirehoseResource,
   FirehoseResult,
+  RedExclamationCircleIcon,
 } from '@console/internal/components/utils';
 import { ModalErrorContent } from '@console/internal/components/modals/error-modal';
 import { createModal, GetModalContainer } from '@console/internal/components/factory';
@@ -21,7 +22,7 @@ const NotFound: React.FC<NotFoundProps> = ({ message }) => (
     <MsgBox title="Not Found" detail="Requested resource not found." />
     {_.isString(message) && (
       <div className="alert alert-danger text-left">
-        <span className="pficon pficon-error-circle-o" />
+        <RedExclamationCircleIcon />
         {message}
       </div>
     )}
diff --git a/frontend/public/components/_build-pipeline.scss b/frontend/public/components/_build-pipeline.scss
index ede8c1389ed2..7a757e813d50 100644
--- a/frontend/public/components/_build-pipeline.scss
+++ b/frontend/public/components/_build-pipeline.scss
@@ -5,7 +5,7 @@ $pipeline-font-base: 13px;
 $pipeline-in-progress-color: $color-pf-blue-400;
 $pipeline-new-color: $color-pf-blue-100;
 $pipeline-pending-color: $color-pf-black-300;
-$pipeline-success-color: $color-pf-green-400;
+$pipeline-success-color: $pf-color-light-green-400;
 $pipeline-require-attention-color: $color-pf-gold-400;
 $pipeline-circle-animation-time: 0.35s;
 $pipeline-circle-diameter: 18px;
@@ -148,12 +148,6 @@ $pipelineStageScreenSize: (
   }
 }
 
-.build-pipeline__status-icon--complete {
-  color: $pipeline-success-color;
-}
-.build-pipeline__status-icon--failed{
-  color: $pipeline-failed-color;
-}
 .build-pipeline__status-icon--cancelled{
   color: $pipeline-aborted-color;
 }
@@ -274,10 +268,10 @@ $pipelineStageStatus: (
   transform: rotate(-90deg);
   width: $pipeline-circle-diameter;
   &:after {
+    @include font-awesome-free-solid;
     animation: pipeline-stage-fadeIcon $pipeline-icon-animation-time ($pipeline-line-grow-animation-time + $pipeline-semi-circle-animation-time + ($pipeline-inner-circle-animation-time * 2)) linear forwards;
     color: $pipeline-inner-circle-color;
-    font-family: 'FontAwesome';
-    font-size: 12px;
+    font-size: 10px;
     left: 50%;
     opacity: 0;
     position: absolute;
diff --git a/frontend/public/components/_icon-and-text.scss b/frontend/public/components/_icon-and-text.scss
index ee02b9030387..8b12c58a5461 100644
--- a/frontend/public/components/_icon-and-text.scss
+++ b/frontend/public/components/_icon-and-text.scss
@@ -4,8 +4,5 @@
 }
 
 .co-icon-and-text__icon {
-  flex: 0 0 auto;
   margin-right: 5px;
-  position: relative;
-  top: 0.125em;
 }
diff --git a/frontend/public/components/_image-stream.scss b/frontend/public/components/_image-stream.scss
index 3b36c08a357f..4e59cf988982 100644
--- a/frontend/public/components/_image-stream.scss
+++ b/frontend/public/components/_image-stream.scss
@@ -20,7 +20,7 @@
 .co-images-stream-tag-timeline__circle-icon,
 .co-images-stream-tag-timeline__square-icon {
   color: $color-pf-black-300;
-  left: 10px;
+  left: 8px;
   position: relative;
 }
 
@@ -46,7 +46,7 @@
   border: 2px solid $color-pf-black-300;
   left: 14px;
   position: relative;
-} 
+}
 
 .co-images-stream-tag-timeline__timestamp {
   margin-left: 35px;
diff --git a/frontend/public/components/_quota.scss b/frontend/public/components/_quota.scss
index d13fcea72948..593a1c3a8147 100644
--- a/frontend/public/components/_quota.scss
+++ b/frontend/public/components/_quota.scss
@@ -9,10 +9,6 @@
   font-weight: 300;
 }
 
-.co-resource-quota-empty {
-  font-size: ($font-size-base + 1);
-}
-
 .co-resource-quota-gauge-chart {
   min-width: 170px;
 }
diff --git a/frontend/public/components/_toggle-play.scss b/frontend/public/components/_toggle-play.scss
index 112d14539e0d..c754b838b184 100644
--- a/frontend/public/components/_toggle-play.scss
+++ b/frontend/public/components/_toggle-play.scss
@@ -9,11 +9,13 @@
 
   // play icon
   &.co-toggle-play--inactive:before {
-    content: $fa-var-play;
+    @include font-awesome-free-solid;
+    content: fa-content($fa-var-play);
   }
   // pause icon
   &.co-toggle-play--active:before {
-    content: $fa-var-pause;
+    @include font-awesome-free-solid;
+    content: fa-content($fa-var-pause);
   }
 
   &.co-toggle-play--active {
diff --git a/frontend/public/components/build-pipeline.tsx b/frontend/public/components/build-pipeline.tsx
index 1baeafced6b4..49341dbffe44 100644
--- a/frontend/public/components/build-pipeline.tsx
+++ b/frontend/public/components/build-pipeline.tsx
@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import * as _ from 'lodash-es';
-import { resourcePath, ExternalLink } from './utils';
+import {
+  BanIcon,
+  PendingIcon,
+  SyncAltIcon,
+} from '@patternfly/react-icons';
+
+import {
+  resourcePath,
+  ExternalLink,
+  GreenCheckCircleIcon,
+  RedExclamationCircleIcon,
+} from './utils';
 import { fromNow } from './utils/datetime';
 import { K8sResourceKind } from '../module/k8s';
 import { getBuildNumber } from '../module/k8s/builds';
@@ -24,16 +35,16 @@ const BuildSummaryStatusIcon: React.SFC<BuildSummaryStatusIconProps> = ({ status
   const statusClass = _.lowerCase(status);
   const icon = ({
     new: '',
-    pending: 'pficon pficon-pending',
-    running: 'fa fa-refresh fa-fw',
-    complete: 'pficon pficon-ok',
-    failed: 'pficon pficon-error-circle-o',
-    cancelled: 'fa fa-ban',
+    pending: <PendingIcon />,
+    running: <SyncAltIcon className="fa-spin" />,
+    complete: <GreenCheckCircleIcon />,
+    failed: <RedExclamationCircleIcon />,
+    cancelled: <BanIcon />,
   })[statusClass];
 
   return icon
     ? <span className={`build-pipeline__status-icon build-pipeline__status-icon--${statusClass}`}>
-      <span className={icon} aria-hidden="true"></span>
+      {icon}
     </span>
     : null;
 };
diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
index 4c735a12580c..8528e3dcd542 100644
--- a/frontend/public/components/catalog/_catalog.scss
+++ b/frontend/public/components/catalog/_catalog.scss
@@ -217,10 +217,6 @@ $co-modal-ignore-warning-icon-width: 30px;
   &__link {
     display: block;
     margin: 10px 0;
-    .fa {
-      font-size: inherit !important;
-      margin-left: 5px;
-    }
   }
 }
 
diff --git a/frontend/public/components/chargeback.tsx b/frontend/public/components/chargeback.tsx
index 1ebcd65ab4dc..8fac72521555 100644
--- a/frontend/public/components/chargeback.tsx
+++ b/frontend/public/components/chargeback.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 { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
 import { connectToFlags, flagPending } from '../reducers/features';
 import { FLAGS } from '../const';
 import { Conditions } from './conditions';
@@ -345,7 +347,7 @@ const ReportsPage_: React.SFC<ReportsPageProps> = props => {
         Chargeback is an alpha feature.
       </p>
       <a href="https://coreos.com/tectonic/docs/latest/reports/install-chargeback.html" target="_blank" rel="noopener noreferrer">
-        <button className="btn btn-info">Installing Chargeback Report <i className="fa fa-external-link" /></button>
+        <button className="btn btn-info">Installing Chargeback Report <ExternalLinkAltIcon /></button>
       </a>
     </div>
     <ListPage {...props} canCreate kind={ReportReference} ListComponent={ReportsList} mock title="Chargeback Reporting" />
diff --git a/frontend/public/components/cluster-settings/cluster-operator.tsx b/frontend/public/components/cluster-settings/cluster-operator.tsx
index 912003053005..eb0820bac681 100644
--- a/frontend/public/components/cluster-settings/cluster-operator.tsx
+++ b/frontend/public/components/cluster-settings/cluster-operator.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { Alert } from '@patternfly/react-core';
+import { SyncAltIcon, UnknownIcon } from '@patternfly/react-icons';
 
 import { ClusterOperatorModel } from '../../models';
 import {
@@ -30,26 +31,28 @@ import {
 import {
   navFactory,
   EmptyBox,
+  GreenCheckCircleIcon,
   Kebab,
   ResourceLink,
   ResourceSummary,
   SectionHeading,
+  YellowExclamationTriangleIcon,
 } from '../utils';
 
 export const clusterOperatorReference: K8sResourceKindReference = referenceForModel(ClusterOperatorModel);
 
-const getIconClass = (status: OperatorStatus) => {
+const getIcon = (status: OperatorStatus) => {
   return {
-    [OperatorStatus.Available]: 'pficon pficon-ok text-success',
-    [OperatorStatus.Updating]: 'fa fa-refresh',
-    [OperatorStatus.Degraded]: 'pficon pficon-warning-triangle-o text-warning',
-    [OperatorStatus.Unknown]: 'pficon pficon-unknown',
+    [OperatorStatus.Available]: <GreenCheckCircleIcon />,
+    [OperatorStatus.Updating]: <SyncAltIcon />,
+    [OperatorStatus.Degraded]: <YellowExclamationTriangleIcon />,
+    [OperatorStatus.Unknown]: <UnknownIcon />,
   }[status];
 };
 
 const OperatorStatusIconAndLabel: React.SFC<OperatorStatusIconAndLabelProps> = ({status}) => {
-  const iconClass = getIconClass(status);
-  return <React.Fragment><i className={iconClass} aria-hidden="true" /> {status}</React.Fragment>;
+  const icon = getIcon(status);
+  return <React.Fragment>{icon} {status}</React.Fragment>;
 };
 
 const tableColumnClasses = [
diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index 96625e561640..2073337128ca 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -3,6 +3,11 @@ import * as _ from 'lodash-es';
 import { Helmet } from 'react-helmet';
 import { Button } from 'patternfly-react';
 import { Link } from 'react-router-dom';
+import {
+  AddCircleOIcon,
+  ArrowCircleUpIcon,
+  SyncAltIcon,
+} from '@patternfly/react-icons';
 
 import { ClusterOperatorPage } from './cluster-operator';
 import { clusterChannelModal, clusterUpdateModal, errorModal } from '../modals';
@@ -26,11 +31,14 @@ import {
 import {
   EmptyBox,
   Firehose,
+  GreenCheckCircleIcon,
   HorizontalNav,
   ResourceLink,
   resourcePathFromModel,
+  RedExclamationCircleIcon,
   SectionHeading,
   Timestamp,
+  YellowExclamationTriangleIcon,
 } from '../utils';
 
 const cancelUpdate = (cv: ClusterVersionKind) => {
@@ -48,7 +56,7 @@ const CurrentChannel: React.SFC<CurrentChannelProps> = ({cv}) => <button classNa
 
 const InvalidMessage: React.SFC<CVStatusMessageProps> = ({cv}) => <React.Fragment>
   <div>
-    <i className="pficon pficon-error-circle-o" aria-hidden={true} /> Invalid cluster version
+    <RedExclamationCircleIcon /> Invalid cluster version
   </div>
   <Button bsStyle="primary" onClick={() => cancelUpdate(cv)}>
     Cancel update
@@ -57,7 +65,7 @@ const InvalidMessage: React.SFC<CVStatusMessageProps> = ({cv}) => <React.Fragmen
 
 const UpdatesAvailableMessage: React.SFC<CVStatusMessageProps> = ({cv}) => <React.Fragment>
   <div className="co-update-status">
-    <i className="fa fa-arrow-circle-o-up update-pending" aria-hidden={true} /> Update available
+    <ArrowCircleUpIcon className="update-pending" /> Update available
   </div>
   <div>
     <Button bsStyle="primary" onClick={() => clusterUpdateModal({cv})}>
@@ -69,24 +77,24 @@ const UpdatesAvailableMessage: React.SFC<CVStatusMessageProps> = ({cv}) => <Reac
 const UpdatingMessage: React.SFC<CVStatusMessageProps> = ({cv}) => {
   const updatingCondition = getClusterVersionCondition(cv, ClusterVersionConditionType.Progressing, K8sResourceConditionStatus.True);
   return <React.Fragment>
-    {updatingCondition.message && <div><i className="fa-spin fa fa-refresh" aria-hidden={true} /> {updatingCondition.message}</div>}
+    {updatingCondition.message && <div><SyncAltIcon className="fa-spin" /> {updatingCondition.message}</div>}
     <Link to="/settings/cluster/clusteroperators">View details</Link>
   </React.Fragment>;
 };
 
 const ErrorRetrievingMessage: React.SFC<{}> = () => <div>
-  <i className="pficon pficon-error-circle-o" aria-hidden={true} /> Error retrieving
+  <RedExclamationCircleIcon /> Error retrieving
 </div>;
 
 const FailingMessage: React.SFC<{}> = () => <React.Fragment>
   <div>
-    <i className="pficon pficon-error-circle-o" aria-hidden={true} /> Failing
+    <RedExclamationCircleIcon /> Failing
   </div>
   <Link to="/settings/cluster/clusteroperators">View details</Link>
 </React.Fragment>;
 
 const UpToDateMessage: React.SFC<{}> = () => <span>
-  <i className="pficon pficon-ok" aria-hidden={true} /> Up to date
+  <GreenCheckCircleIcon /> Up to date
 </span>;
 
 const UpdateStatus: React.SFC<UpdateStatusProps> = ({cv}) => {
@@ -115,7 +123,7 @@ const CurrentVersion: React.SFC<CurrentVersionProps> = ({cv}) => {
   if (status === ClusterUpdateStatus.UpToDate || status === ClusterUpdateStatus.UpdatesAvailable) {
     return desiredVersion
       ? <span className="co-select-to-copy">{desiredVersion}</span>
-      : <React.Fragment><i className="pficon pficon-warning-triangle-o" aria-hidden="true" />&nbsp;Unknown</React.Fragment>;
+      : <React.Fragment><YellowExclamationTriangleIcon />&nbsp;Unknown</React.Fragment>;
   }
 
   return <React.Fragment>{lastVersion || 'None'}</React.Fragment>;
@@ -193,7 +201,7 @@ const ClusterVersionDetailsTable: React.SFC<ClusterVersionDetailsTableProps> = (
           <dd>
             {_.isEmpty(autoscalers)
               ? <Link to={`${resourcePathFromModel(ClusterAutoscalerModel)}/~new`}>
-                <i className="pficon pficon-add-circle-o" aria-hidden="true" /> Create Autoscaler
+                <AddCircleOIcon /> Create Autoscaler
               </Link>
               : autoscalers.map(autoscaler => <div key={autoscaler.metadata.uid}><ResourceLink kind={clusterAutoscalerReference} name={autoscaler.metadata.name} /></div>)}
           </dd>
diff --git a/frontend/public/components/configmap-and-secret-data.tsx b/frontend/public/components/configmap-and-secret-data.tsx
index 9b0e2493b568..bbf7238459e3 100644
--- a/frontend/public/components/configmap-and-secret-data.tsx
+++ b/frontend/public/components/configmap-and-secret-data.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Base64 } from 'js-base64';
 import { saveAs } from 'file-saver';
+import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
 
 import { CopyToClipboard, EmptyBox, SectionHeading } from './utils';
 
@@ -68,8 +69,8 @@ export const SecretData: React.FC<SecretDataProps> = ({data}) => {
         {dl.length
           ? <button className="btn btn-link" type="button" onClick={() => setReveal(!reveal)}>
             {reveal
-              ? <React.Fragment><i className="fa fa-eye-slash" aria-hidden="true" /> Hide Values</React.Fragment>
-              : <React.Fragment><i className="fa fa-eye" aria-hidden="true" /> Reveal Values</React.Fragment>}
+              ? <React.Fragment><EyeSlashIcon className="co-icon-space-r" />Hide Values</React.Fragment>
+              : <React.Fragment><EyeIcon className="co-icon-space-r" />Reveal Values</React.Fragment>}
           </button>
           : null}
       </SectionHeading>
diff --git a/frontend/public/components/custom-resource-definition.tsx b/frontend/public/components/custom-resource-definition.tsx
index 5fc491ada81e..b6f95216426c 100644
--- a/frontend/public/components/custom-resource-definition.tsx
+++ b/frontend/public/components/custom-resource-definition.tsx
@@ -2,9 +2,10 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { BanIcon } from '@patternfly/react-icons';
 
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { AsyncComponent, Kebab, navFactory, ResourceKebab, ResourceLink, ResourceSummary, SectionHeading } from './utils';
+import { AsyncComponent, Kebab, navFactory, ResourceKebab, ResourceLink, ResourceSummary, SectionHeading, GreenCheckCircleIcon } from './utils';
 import { K8sResourceKind, referenceForCRD, CustomResourceDefinitionKind } from '../module/k8s';
 import { resourceListPages } from './resource-pages';
 import { DefaultPage } from './default-resource';
@@ -86,8 +87,8 @@ const CRDTableRow: React.FC<CRDTableRowProps> = ({obj: crd, index, key, style})
       <TableData className={tableColumnClasses[4]}>
         {
           isEstablished(crd.status.conditions)
-            ? <span><i className="pficon pficon-ok" aria-hidden="true"></i></span>
-            : <span><i className="fa fa-ban" aria-hidden="true"></i></span>
+            ? <span><GreenCheckCircleIcon /></span>
+            : <span><BanIcon /></span>
         }
       </TableData>
       <TableData className={tableColumnClasses[5]}>
diff --git a/frontend/public/components/edit-yaml.jsx b/frontend/public/components/edit-yaml.jsx
index cf4baba1938f..6f97f9939954 100644
--- a/frontend/public/components/edit-yaml.jsx
+++ b/frontend/public/components/edit-yaml.jsx
@@ -5,6 +5,7 @@ import { safeLoad, safeDump } from 'js-yaml';
 import { saveAs } from 'file-saver';
 import { connect } from 'react-redux';
 import { Alert } from '@patternfly/react-core';
+import { DownloadIcon } from '@patternfly/react-icons';
 
 import * as ace from 'brace';
 import 'brace/ext/searchbox';
@@ -381,7 +382,7 @@ export const EditYAML = connect(stateToProps)(
                       {!create && !readOnly && <button type="submit" className="btn btn-primary" id="save-changes" onClick={() => this.save()}>Save</button>}
                       {!create && <button type="submit" className="btn btn-default" id="reload-object" onClick={() => this.reload()}>Reload</button>}
                       <button className="btn btn-default" id="cancel" onClick={() => this.onCancel()}>Cancel</button>
-                      {download && <button type="submit" className="btn btn-default pull-right hidden-sm hidden-xs" onClick={() => this.download()}><i className="fa fa-download"></i>&nbsp;Download</button>}
+                      {download && <button type="submit" className="btn btn-default pull-right hidden-sm hidden-xs" onClick={() => this.download()}><DownloadIcon className="co-icon-space-r" />Download</button>}
                     </div>
                   </div>
                 </div>
diff --git a/frontend/public/components/factory/list.tsx b/frontend/public/components/factory/list.tsx
index 21113fe91c9a..4e8427ff77a3 100644
--- a/frontend/public/components/factory/list.tsx
+++ b/frontend/public/components/factory/list.tsx
@@ -10,6 +10,7 @@ import {
   List as VirtualList,
   WindowScroller,
 } from 'react-virtualized';
+import { LongArrowAltUpIcon, LongArrowAltDownIcon } from '@patternfly/react-icons';
 
 import * as UIActions from '../../actions/ui';
 import { ingressValidHosts } from '../ingress';
@@ -154,7 +155,7 @@ export class ColHead extends React.Component<ColHeadProps> {
     const onClick = () => applySort(sortField, sortFunc, newSortOrder, children);
     return <div className={className}>
       <a className={isSorted ? undefined : 'co-m-table-grid__sort-link--unsorted'} onClick={onClick}>{children}</a>
-      {isSorted && <i className={`co-m-table-grid__sort-arrow fa fa-long-arrow-${currentSortOrder === 'asc' ? 'up' : 'down'}`}></i>}
+      {isSorted && (currentSortOrder === 'asc' ? <LongArrowAltUpIcon className="co-m-table-grid__sort-arrow" /> : <LongArrowAltDownIcon className="co-m-table-grid__sort-arrow" />)}
     </div>;
   }
 }
diff --git a/frontend/public/components/image-stream-timeline.tsx b/frontend/public/components/image-stream-timeline.tsx
index 8836790b3531..61f2b482598f 100644
--- a/frontend/public/components/image-stream-timeline.tsx
+++ b/frontend/public/components/image-stream-timeline.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+import { CircleIcon, SquareIcon } from '@patternfly/react-icons';
 
 import { K8sResourceKindReference } from '../module/k8s';
 import { ResourceLink, Timestamp, EmptyBox } from './utils';
@@ -12,7 +13,7 @@ const ImageStreamTimelineItem: React.FC<ImageStreamTimelineItemProps> = ({tag, i
   return <React.Fragment>
     <li>
       <div className="co-images-stream-tag-timeline__item-row">
-        <span className="co-images-stream-tag-timeline__circle-icon"><i className="fa fa-circle" aria-hidden="true" /></span>
+        <span className="co-images-stream-tag-timeline__circle-icon"><CircleIcon /></span>
         <div className="co-images-stream-tag-timeline__timestamp"><Timestamp timestamp={tag.created} simple={true} /></div>
       </div>
 
@@ -49,7 +50,7 @@ export const ImageStreamTimeline: React.FC<ImageStreamTimelineProps> = ({ imageS
     <ul className="co-images-stream-tag-timeline">
       {timeline}
       <div>
-        <span className="co-images-stream-tag-timeline__square-icon"><i className="fa fa-square" aria-hidden="true" /></span>
+        <span className="co-images-stream-tag-timeline__square-icon"><SquareIcon /></span>
       </div>
     </ul>
   </React.Fragment>;
diff --git a/frontend/public/components/image-stream.tsx b/frontend/public/components/image-stream.tsx
index 9beed7c51a3a..ea42dae76b6b 100644
--- a/frontend/public/components/image-stream.tsx
+++ b/frontend/public/components/image-stream.tsx
@@ -8,7 +8,7 @@ import { QuestionCircleIcon } from '@patternfly/react-icons';
 
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
-import { CopyToClipboard, ExpandableAlert, ExternalLink, Kebab, SectionHeading, LabelList, navFactory, ResourceKebab, ResourceLink, ResourceSummary, history, Timestamp } from './utils';
+import { CopyToClipboard, ExpandableAlert, ExternalLink, Kebab, SectionHeading, LabelList, navFactory, ResourceKebab, ResourceLink, ResourceSummary, history, Timestamp, YellowExclamationTriangleIcon } from './utils';
 import { ImageStreamTimeline } from './image-stream-timeline';
 import { fromNow } from './utils/datetime';
 
@@ -103,12 +103,12 @@ const ImageStreamTagsRow: React.SFC<ImageStreamTagsRowProps> = ({imageStream, sp
       {!from && <span className="text-muted">pushed image</span>}
     </span>
     <span className="col-md-4 col-sm-4 hidden-xs co-break-all">
-      {!imageStreamStatus && dockerRepositoryCheck && <React.Fragment><i className="pficon pficon-warning-triangle-o" aria-hidden="true" />&nbsp;Unable to resolve</React.Fragment>}
+      {!imageStreamStatus && dockerRepositoryCheck && <React.Fragment><YellowExclamationTriangleIcon />&nbsp;Unable to resolve</React.Fragment>}
       {!imageStreamStatus && !dockerRepositoryCheck && !from && <React.Fragment>Not synced yet</React.Fragment>}
       {/* We have no idea why in this case  */}
       {!imageStreamStatus && !dockerRepositoryCheck && from && <React.Fragment>Unresolved</React.Fragment>}
       {imageStreamStatus && image && <React.Fragment>{image}</React.Fragment>}
-      {imageStreamStatus && !image && <React.Fragment><i className="pficon pficon-warning-triangle-o" aria-hidden="true" />&nbsp;There is no image associated with this tag</React.Fragment>}
+      {imageStreamStatus && !image && <React.Fragment><YellowExclamationTriangleIcon />&nbsp;There is no image associated with this tag</React.Fragment>}
     </span>
     <div className="col-md-3 hidden-sm hidden-xs">
       {created && <Timestamp timestamp={created} />}
@@ -145,7 +145,7 @@ export const ExampleDockerCommandPopover: React.FC<ImageStreamManipulationHelpPr
         <p>Red Hat Enterprise Linux users may use the equivalent <strong>podman</strong> commands. <ExternalLink href="https://podman.io/" text="Learn more." /></p>
       </div>
     }>
-    <button className="btn btn-link btn-link--no-btn-default-values hidden-sm hidden-xs" type="button"><QuestionCircleIcon /> Do you need to work with this Image Stream outside of the web console?</button>
+    <button className="btn btn-link btn-link--no-btn-default-values hidden-sm hidden-xs" type="button"><QuestionCircleIcon className="co-icon-space-r" />Do you need to work with this Image Stream outside of the web console?</button>
   </Popover>;
 };
 
diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
index 84842df6e4e7..b04c7cd04da2 100644
--- a/frontend/public/components/masthead-toolbar.jsx
+++ b/frontend/public/components/masthead-toolbar.jsx
@@ -15,7 +15,7 @@ import {
 import { connectToFlags, flagPending } from '../reducers/features';
 import { FLAGS } from '../const';
 import { authSvc } from '../module/auth';
-import { history, Firehose } from './utils';
+import { history, Firehose, YellowExclamationTriangleIcon } from './utils';
 import { openshiftHelpBase } from './utils/documentation';
 import { AboutModal } from './about-modal';
 import { getAvailableClusterUpdates, clusterVersionReference } from '../module/k8s/cluster-settings';
@@ -24,7 +24,7 @@ import * as openshiftLogoImg from '../imgs/logos/openshift.svg';
 const SystemStatusButton = ({statuspageData, className}) => !_.isEmpty(_.get(statuspageData, 'incidents'))
   ? <ToolbarItem className={className}>
     <a className="pf-c-button pf-m-plain" aria-label="System Status" href={statuspageData.page.url} target="_blank" rel="noopener noreferrer">
-      <span className="pficon pficon-warning-triangle-o co-system-status-icon" aria-hidden="true" />
+      <YellowExclamationTriangleIcon className="co-system-status-icon" />
     </a>
   </ToolbarItem>
   : null;
diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss
index 1109e796008f..ded5fa30d9a7 100644
--- a/frontend/public/components/modals/_modals.scss
+++ b/frontend/public/components/modals/_modals.scss
@@ -3,6 +3,7 @@
 }
 
 .co-delete-modal__icon {
+  flex: 0 0 auto;
   font-size: 30px;
   margin-right: 15px;
 }
@@ -100,6 +101,7 @@
 
   &__delete-icon {
     height: 29px;
+    margin-top: 7px;
     @media(max-width: $screen-sm-max) {
       padding: 0;
     }
diff --git a/frontend/public/components/modals/delete-modal.jsx b/frontend/public/components/modals/delete-modal.jsx
index 06773e21d665..751855775e7a 100644
--- a/frontend/public/components/modals/delete-modal.jsx
+++ b/frontend/public/components/modals/delete-modal.jsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
-import { PromiseComponent, history, resourceListPathFromModel } from '../utils';
+import { PromiseComponent, history, resourceListPathFromModel, YellowExclamationTriangleIcon } from '../utils';
 import { k8sKill } from '../../module/k8s/';
 
 //Modal for resource deletion and allows cascading deletes if propagationPolicy is provided for the enum
@@ -50,7 +50,7 @@ class DeleteModal extends PromiseComponent {
       <ModalTitle>Delete {kind.label}</ModalTitle>
       <ModalBody className="modal-body">
         <div className="co-delete-modal">
-          <span aria-hidden="true" className="co-delete-modal__icon pficon pficon-warning-triangle-o"></span>
+          <YellowExclamationTriangleIcon className="co-delete-modal__icon" />
           <div>
             <p className="lead">Delete <span className="co-break-word">{resource.metadata.name}</span>?</p>
             <div>Are you sure you want to delete <strong className="co-break-word">{resource.metadata.name}</strong>
diff --git a/frontend/public/components/modals/delete-namespace-modal.jsx b/frontend/public/components/modals/delete-namespace-modal.jsx
index b0b02bbdac10..c7b064249586 100644
--- a/frontend/public/components/modals/delete-namespace-modal.jsx
+++ b/frontend/public/components/modals/delete-namespace-modal.jsx
@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 
 import { k8sKill } from '../../module/k8s';
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
-import { history, PromiseComponent} from '../utils';
+import { history, PromiseComponent, YellowExclamationTriangleIcon } from '../utils';
 
 class DeleteNamespaceModal extends PromiseComponent {
   constructor(props) {
@@ -32,7 +32,7 @@ class DeleteNamespaceModal extends PromiseComponent {
       <ModalTitle>Delete {this.props.kind.label}</ModalTitle>
       <ModalBody>
         <div className="co-delete-modal">
-          <span aria-hidden="true" className="co-delete-modal__icon pficon pficon-warning-triangle-o"></span>
+          <YellowExclamationTriangleIcon className="co-delete-modal__icon" />
           <div>
             <p>This action cannot be undone. It will destroy all pods, services and other objects in the deleted namespace.</p>
             <p>Confirm deletion by typing <strong className="co-break-word">{this.props.resource.metadata.name}</strong> below:</p>
diff --git a/frontend/public/components/modals/taints-modal.tsx b/frontend/public/components/modals/taints-modal.tsx
index 88159ffe3270..c2b2fb5d356d 100644
--- a/frontend/public/components/modals/taints-modal.tsx
+++ b/frontend/public/components/modals/taints-modal.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { Dropdown, EmptyBox, PromiseComponent } from '../utils';
 import { K8sKind, k8sPatch, NodeKind, Taint } from '../../module/k8s';
@@ -102,15 +103,15 @@ class TaintsModal extends PromiseComponent<TaintsModalProps, TaintsModalState> {
                     title={effects[c.effect]} />
                 </div>
                 <div className="col-md-1 col-md-offset-0 col-sm-offset-11 col-xs-offset-11">
-                  <button type="button" className="btn btn-link taint-modal__delete-icon" onClick={() => this._remove(i)} aria-label="Delete">
-                    <i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true" />
+                  <button type="button" className="btn btn-link btn-link--inherit-color taint-modal__delete-icon" onClick={() => this._remove(i)} aria-label="Delete">
+                    <MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" />
                   </button>
                 </div>
               </div>
             )}
           </React.Fragment>}
         <button type="button" className="btn btn-link" onClick={this._addRow}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add More
+          <PlusCircleIcon className="pairs-list__add-icon" />Add More
         </button>
       </ModalBody>
       <ModalSubmitFooter errorMessage={errorMessage} inProgress={inProgress} submitText="Save" cancel={this._cancel} />
diff --git a/frontend/public/components/modals/tolerations-modal.tsx b/frontend/public/components/modals/tolerations-modal.tsx
index 261f5e6e0d37..e75a950104df 100644
--- a/frontend/public/components/modals/tolerations-modal.tsx
+++ b/frontend/public/components/modals/tolerations-modal.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { Dropdown, EmptyBox, PromiseComponent } from '../utils';
 import { K8sKind, k8sPatch, Toleration, TolerationOperator } from '../../module/k8s';
@@ -159,7 +160,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
                 <div className="col-md-1 col-sm-2 col-xs-2">
                   {this._isEditable(t) && (
                     <button type="button" className="btn btn-link btn-link--inherit-color toleration-modal__delete-icon" onClick={() => this._remove(i)} aria-label="Delete">
-                      <i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true" />
+                      <MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" />
                     </button>
                   )}
                 </div>
@@ -168,7 +169,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
           </React.Fragment>
         }
         <button type="button" className="btn btn-link" onClick={this._addRow}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add More
+          <PlusCircleIcon className="pairs-list__add-icon" />Add More
         </button>
       </ModalBody>
       <ModalSubmitFooter errorMessage={errorMessage} inProgress={inProgress} submitText="Save" cancel={this._cancel} />
diff --git a/frontend/public/components/monitoring.tsx b/frontend/public/components/monitoring.tsx
index f21d4c28196c..8858e9d7d93a 100644
--- a/frontend/public/components/monitoring.tsx
+++ b/frontend/public/components/monitoring.tsx
@@ -7,6 +7,15 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { Link, Redirect, Route, Switch } from 'react-router-dom';
+import {
+  BanIcon,
+  BellIcon,
+  BellSlashIcon,
+  HourglassHalfIcon,
+  MinusCircleIcon,
+  OutlinedBellIcon,
+  PlusCircleIcon,
+} from '@patternfly/react-icons';
 
 import * as k8sActions from '../actions/k8s';
 import * as UIActions from '../actions/ui';
@@ -26,6 +35,7 @@ import {
   ButtonBar,
   ExternalLink,
   getURLSearchParams,
+  GreenCheckCircleIcon,
   history,
   Kebab,
   LoadingInline,
@@ -129,22 +139,22 @@ const AlertState: React.SFC<AlertStateProps> = ({state}) => {
   if (state === AlertStates.NotFiring) {
     return <span className="text-muted">Not Firing</span>;
   }
-  const klass = {
-    [AlertStates.Firing]: 'fa fa-fw fa-bell alert-firing',
-    [AlertStates.Silenced]: 'fa fa-fw fa-bell-slash text-muted',
-    [AlertStates.Pending]: 'fa fa-fw fa-bell-o alert-pending',
+  const icon = {
+    [AlertStates.Firing]: <BellIcon className="alert-firing" />,
+    [AlertStates.Silenced]: <BellSlashIcon className="text-muted" />,
+    [AlertStates.Pending]: <OutlinedBellIcon className="alert-pending" />,
   }[state];
-  return klass ? <React.Fragment><i className={klass} aria-hidden="true"></i> {_.startCase(state)}</React.Fragment> : null;
+  return icon ? <React.Fragment>{icon} {_.startCase(state)}</React.Fragment> : null;
 };
 
 const SilenceState = ({silence}) => {
   const state = silenceState(silence);
-  const klass = {
-    [SilenceStates.Active]: 'pficon pficon-ok fa-fw',
-    [SilenceStates.Pending]: 'fa fa-fw fa-hourglass-half monitoring-state-icon--pending',
-    [SilenceStates.Expired]: 'fa fa-fw fa-ban text-muted',
+  const icon = {
+    [SilenceStates.Active]: <GreenCheckCircleIcon />,
+    [SilenceStates.Pending]: <HourglassHalfIcon className="monitoring-state-icon--pending" />,
+    [SilenceStates.Expired]: <BanIcon className="text-muted" data-test-id="ban-icon" />,
   }[state];
-  return klass ? <React.Fragment><i className={klass} aria-hidden="true"></i> {_.startCase(state)}</React.Fragment> : null;
+  return icon ? <React.Fragment>{icon} {_.startCase(state)}</React.Fragment> : null;
 };
 
 const StateTimestamp = ({text, timestamp}) => <div className="text-muted monitoring-timestamp">
@@ -944,13 +954,13 @@ class SilenceForm_ extends React.Component<SilenceFormProps, SilenceFormState> {
               </label>
             </div>
             <div className="col-xs-1">
-              <button type="button" className="btn btn-link" onClick={() => this.removeMatcher(i)} aria-label="Remove matcher">
-                <i className="fa fa-minus-circle" aria-hidden="true" />
+              <button type="button" className="btn btn-link btn-link--inherit-color" onClick={() => this.removeMatcher(i)} aria-label="Remove matcher">
+                <MinusCircleIcon />
               </button>
             </div>
           </div>)}
           <button type="button" className="btn btn-link btn--silence-add-more" onClick={this.addMatcher}>
-            <i className="fa fa-plus-circle" aria-hidden="true" /> Add More
+            <PlusCircleIcon /> Add More
           </button>
         </div>
         <div className="co-form-section__separator"></div>
diff --git a/frontend/public/components/monitoring/metrics.tsx b/frontend/public/components/monitoring/metrics.tsx
index d14ecb09904e..bf507cbadd54 100644
--- a/frontend/public/components/monitoring/metrics.tsx
+++ b/frontend/public/components/monitoring/metrics.tsx
@@ -9,7 +9,13 @@ import {
   Switch,
   Title,
 } from '@patternfly/react-core';
-import { ChartLineIcon, TimesIcon } from '@patternfly/react-icons';
+import {
+  AngleDownIcon,
+  AngleRightIcon,
+  ChartLineIcon,
+  CompressIcon,
+  TimesIcon,
+} from '@patternfly/react-icons';
 import {
   IDecorator,
   ISortBy,
@@ -111,9 +117,10 @@ const HeaderPrometheusLink = connectToURLs(MonitoringRoutes.Prometheus)(HeaderPr
 export const graphStateToProps = ({UI}) => ({hideGraphs: !!UI.getIn(['monitoring', 'hideGraphs'])});
 
 const ToggleGraph_ = ({hideGraphs, toggle}) => {
-  const iconClass = `fa fa-${hideGraphs ? 'line-chart' : 'compress'}`;
+  const icon = hideGraphs ? <ChartLineIcon className="co-icon-space-r" /> : <CompressIcon className="co-icon-space-r" />;
+
   return <button type="button" className="btn btn-link" onClick={toggle}>
-    {hideGraphs ? 'Show' : 'Hide'} Graph <i className={iconClass} aria-hidden="true" />
+    {hideGraphs ? 'Show' : 'Hide'} Graph {icon}
   </button>;
 };
 export const ToggleGraph = connect(graphStateToProps, {toggle: UIActions.monitoringToggleGraphs})(ToggleGraph_);
@@ -155,7 +162,7 @@ const MetricsDropdown = ({onChange, onLoad}) => {
 const ExpandButton = ({isExpanded, onClick}) => {
   const title = `${isExpanded ? 'Hide' : 'Show'} Table`;
   return <button aria-label={title} className="btn btn-link query-browser__expand-button" onClick={onClick} title={title}>
-    <i aria-hidden="true" className={`fa fa-angle-${isExpanded ? 'down' : 'right'} query-browser__expand-icon`} />
+    {isExpanded ? <AngleDownIcon className="query-browser__expand-icon" /> : <AngleRightIcon className="query-browser__expand-icon" />}
   </button>;
 };
 
diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
index 766d04b4d86b..df6b28d8b92e 100644
--- a/frontend/public/components/namespace.jsx
+++ b/frontend/public/components/namespace.jsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Tooltip } from './utils/tooltip';
 import { Link } from 'react-router-dom';
 import * as fuzzy from 'fuzzysearch';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 
 import { NamespaceModel, ProjectModel, SecretModel } from '../models';
 import { k8sGet } from '../module/k8s';
@@ -408,7 +409,7 @@ class NamespaceBarDropdowns_ extends React.Component {
         storageKey={NAMESPACE_LOCAL_STORAGE_KEY}
         shortCut={KEYBOARD_SHORTCUTS.focusNamespaceDropdown} />
       { children }
-      <Link to={UIActions.formatNamespacedRouteForResource('import', activeNamespace)} className="co-namespace-bar__import"><span className="fa fa-plus-circle co-add-actions-selector__icon" aria-hidden="true"></span>Import YAML</Link>
+      <Link to={UIActions.formatNamespacedRouteForResource('import', activeNamespace)} className="co-namespace-bar__import"><PlusCircleIcon className="co-add-actions-selector__icon" />Import YAML</Link>
     </div>;
   }
 }
diff --git a/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx b/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
index 220557088967..83a2822d70e2 100644
--- a/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/clusterserviceversion.tsx
@@ -6,6 +6,7 @@ import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { Helmet } from 'react-helmet';
 import { Alert } from '@patternfly/react-core';
+import { AddCircleOIcon } from '@patternfly/react-icons';
 
 import { ProvidedAPIsPage, ProvidedAPIPage } from './operand';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from '../factory';
@@ -170,7 +171,7 @@ export const CRDCard: React.SFC<CRDCardProps> = (props) => {
     </div>
     { canCreate && <div className="co-crd-card__footer">
       <Link className="co-crd-card__link" to={createRoute()}>
-        <span className="pficon pficon-add-circle-o" aria-hidden="true"></span> Create New
+        <AddCircleOIcon /> Create New
       </Link>
     </div> }
   </div>;
diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/affinity.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/affinity.tsx
index 20ca27987a70..cf4499b87970 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/affinity.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/affinity.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import {MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { MatchExpressions } from './match-expressions';
 import { NodeAffinity as NodeAffinityType, MatchExpression, PodAffinity as PodAffinityType } from '../../../../module/k8s';
@@ -44,7 +45,7 @@ export const NodeAffinity: React.FC<NodeAffinityProps> = (props) => {
           className="btn btn-link co-affinity-term__remove"
           style={{marginLeft: 'auto'}}
           onClick={() => props.onChangeAffinity(removeRequired(i))}>
-          <i aria-hidden="true" className="fa fa-minus-circle pairs-list__add-icon" />Remove Required
+          <MinusCircleIcon className="pairs-list__add-icon" />Remove Required
         </button> }
         <MatchExpressions
           matchExpressions={nodeSelector.matchExpressions || [] as MatchExpression[]}
@@ -57,7 +58,7 @@ export const NodeAffinity: React.FC<NodeAffinityProps> = (props) => {
           className="btn btn-link"
           style={{marginLeft: '10px'}}
           onClick={() => props.onChangeAffinity(addRequired())}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add Required
+          <PlusCircleIcon className="pairs-list__add-icon" />Add Required
         </button>
       </div>
     </dd>
@@ -70,7 +71,7 @@ export const NodeAffinity: React.FC<NodeAffinityProps> = (props) => {
           type="button"
           className="btn btn-link co-affinity-term__remove"
           onClick={() => props.onChangeAffinity(removePreferred(i))}>
-          <i aria-hidden="true" className="fa fa-minus-circle pairs-list__add-icon" />Remove Preferred
+          <MinusCircleIcon className="pairs-list__add-icon" />Remove Preferred
         </button> }
         <label className="control-label co-required" htmlFor={`preference-${i}`}>Weight</label>
         <input
@@ -90,7 +91,7 @@ export const NodeAffinity: React.FC<NodeAffinityProps> = (props) => {
           className="btn btn-link"
           style={{marginLeft: '10px'}}
           onClick={() => props.onChangeAffinity(addPreference())}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add Preferred
+          <PlusCircleIcon className="pairs-list__add-icon" />Add Preferred
         </button>
       </div>
     </dd>
@@ -136,7 +137,7 @@ export const PodAffinity: React.FC<PodAffinityProps> = (props) => {
           type="button"
           className="btn btn-link co-affinity-term__remove"
           onClick={() => props.onChangeAffinity(removeRequired(i))}>
-          <i aria-hidden="true" className="fa fa-minus-circle pairs-list__add-icon" />Remove Preferred
+          <MinusCircleIcon className="pairs-list__add-icon" />Remove Preferred
         </button> }
         <div className="co-affinity-term__topology">
           <div className="co-affinity-term__topology-input">
@@ -160,7 +161,7 @@ export const PodAffinity: React.FC<PodAffinityProps> = (props) => {
           className="btn btn-link"
           style={{marginLeft: '10px'}}
           onClick={() => props.onChangeAffinity(addRequired())}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add Required
+          <PlusCircleIcon className="pairs-list__add-icon" />Add Required
         </button>
       </div>
     </dd>
@@ -173,7 +174,7 @@ export const PodAffinity: React.FC<PodAffinityProps> = (props) => {
           type="button"
           className="btn btn-link co-affinity-term__remove"
           onClick={() => props.onChangeAffinity(removePreferred(i))}>
-          <i aria-hidden="true" className="fa fa-minus-circle pairs-list__add-icon" />Remove Preferred
+          <MinusCircleIcon className="pairs-list__add-icon" />Remove Preferred
         </button> }
         <div className="co-affinity-term__topology">
           <div className="co-affinity-term__topology-input">
@@ -206,7 +207,7 @@ export const PodAffinity: React.FC<PodAffinityProps> = (props) => {
           className="btn btn-link"
           style={{marginLeft: '10px'}}
           onClick={() => props.onChangeAffinity(addPreference())}>
-          <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add Another Preference
+          <PlusCircleIcon className="pairs-list__add-icon" />Add Another Preference
         </button>
       </div>
     </dd>
diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/index.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/index.tsx
index 54e416288845..c863d3c9389f 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/index.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/index.tsx
@@ -6,7 +6,7 @@ import { SpecCapability, DescriptorProps, CapabilityProps } from '../types';
 import { ResourceRequirementsModalLink } from './resource-requirements';
 import { EndpointList } from './endpoint';
 import { configureSizeModal } from './configure-size';
-import { Selector, ResourceLink, LoadingInline, AsyncComponent } from '../../../utils';
+import { Selector, ResourceLink, LoadingInline, AsyncComponent, YellowExclamationTriangleIcon } from '../../../utils';
 import { Tooltip } from '../../../utils/tooltip';
 import { k8sPatch } from '../../../../module/k8s';
 
@@ -67,7 +67,7 @@ const BooleanSwitch: React.FC<SpecCapabilityProps> = (props) => {
     &nbsp;&nbsp;
     {value !== props.value && confirmed && <LoadingInline />}
     {value !== props.value && !confirmed && <React.Fragment>
-      &nbsp;&nbsp;<i className="fa fa-exclamation-triangle text-warning" aria-hidden="true" />
+      &nbsp;&nbsp;<YellowExclamationTriangleIcon />
       <button className="btn btn-link" onClick={update}>Confirm change</button>
     </React.Fragment>}
   </div>;
diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx
index b46311827e6e..6fc87effc35f 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/spec/match-expressions.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { MatchExpression } from '../../../../module/k8s';
 import { Dropdown } from '../../../utils';
@@ -53,7 +54,7 @@ export const MatchExpressions: React.FC<MatchExpressionsProps> = (props) => {
           className="btn btn-link btn-link--inherit-color toleration-modal__delete-icon"
           onClick={() => props.onChangeMatchExpressions(props.matchExpressions.filter((e, index) => index !== i))}
           aria-label="Delete">
-          <i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true" />
+          <MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" />
         </button>
       </div>
     </div>) }
@@ -63,7 +64,7 @@ export const MatchExpressions: React.FC<MatchExpressionsProps> = (props) => {
         className="btn btn-link"
         style={{marginLeft: '10px'}}
         onClick={() => onChangeMatchExpressions(matchExpressions.concat({key: '', operator: 'Exists'}))}>
-        <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add More
+        <PlusCircleIcon className="pairs-list__add-icon" />Add More
       </button>
     </div>
   </React.Fragment>;
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 3e9de48a4301..ef6500aaf700 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/status/index.tsx
@@ -8,10 +8,10 @@ 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';
+import { GreenCheckCircleIcon, YellowExclamationTriangleIcon } 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
+  <YellowExclamationTriangleIcon />&nbsp;&nbsp;The field <code>status.{props.descriptor.path}</code> is invalid
 </span>;
 
 const Default: React.SFC<StatusCapabilityProps> = ({value}) => {
diff --git a/frontend/public/components/operator-lifecycle-manager/descriptors/status/phase.tsx b/frontend/public/components/operator-lifecycle-manager/descriptors/status/phase.tsx
index 3286b7001301..0d2a6c7734c8 100644
--- a/frontend/public/components/operator-lifecycle-manager/descriptors/status/phase.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/descriptors/status/phase.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { BanIcon } from '@patternfly/react-icons';
 
 export const Phase: React.SFC<PhaseProps> = ({status}) => <span className={status === 'Failed' ? 'co-error' : ''}>
-  { status === 'Failed' && <i className="fa fa-ban" /> } {status}
+  { status === 'Failed' && <BanIcon data-test-id="ban-icon" /> } {status}
 </span>;
 
 export type PhaseProps = {
diff --git a/frontend/public/components/operator-lifecycle-manager/install-plan.tsx b/frontend/public/components/operator-lifecycle-manager/install-plan.tsx
index ffb6c40710ed..c62636e29b29 100644
--- a/frontend/public/components/operator-lifecycle-manager/install-plan.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/install-plan.tsx
@@ -4,8 +4,10 @@ import { match, Link } from 'react-router-dom';
 import { Map as ImmutableMap } from 'immutable';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+import { AddCircleOIcon } from '@patternfly/react-icons';
+
 import { MultiListPage, DetailsPage, Table, TableRow, TableData } from '../factory';
-import { SectionHeading, MsgBox, ResourceLink, ResourceKebab, Kebab, ResourceIcon, navFactory, ResourceSummary, history } from '../utils';
+import { SectionHeading, MsgBox, ResourceLink, ResourceKebab, Kebab, ResourceIcon, navFactory, ResourceSummary, history, GreenCheckCircleIcon, YellowExclamationTriangleIcon } from '../utils';
 import { InstallPlanKind, InstallPlanApproval, olmNamespace, Step, referenceForStepResource } from './index';
 import { K8sResourceKind, referenceForModel, referenceForOwnerRef, k8sUpdate, apiVersionForReference } from '../../module/k8s';
 import { SubscriptionModel, ClusterServiceVersionModel, InstallPlanModel, CatalogSourceModel, OperatorGroupModel } from '../../models';
@@ -50,7 +52,7 @@ InstallPlanTableHeader.displayName = 'InstallPlanTableHeader';
 
 export const InstallPlanTableRow: React.FC<InstallPlanTableRowProps> = ({obj, index, key, style}) => {
   const phaseFor = (phase: InstallPlanKind['status']['phase']) => phase === 'RequiresApproval'
-    ? <React.Fragment><i className="fa fa-exclamation-triangle text-warning" aria-hidden="true" /> {phase}</React.Fragment>
+    ? <React.Fragment><YellowExclamationTriangleIcon /> {phase}</React.Fragment>
     : phase;
   return (
     <TableRow id={obj.metadata.uid} index={index} trKey={key} style={style}>
@@ -173,8 +175,8 @@ export class InstallPlanPreview extends React.Component<InstallPlanPreviewProps,
       .catch((error) => this.setState({error}));
 
     const stepStatus = (status: Step['status']) => <React.Fragment>
-      {status === 'Present' && <i className="pficon pficon-ok co-icon-space-r" aria-hidden="true" />}
-      {status === 'Created' && <i className="pficon pficon-add-circle-o co-icon-space-r" aria-hidden="true" />}
+      {status === 'Present' && <GreenCheckCircleIcon className="co-icon-space-r" />}
+      {status === 'Created' && <AddCircleOIcon className="co-icon-space-r" />}
       {status}
     </React.Fragment>;
 
diff --git a/frontend/public/components/operator-lifecycle-manager/subscription.tsx b/frontend/public/components/operator-lifecycle-manager/subscription.tsx
index 1fd74fdcb985..3facb2a1967e 100644
--- a/frontend/public/components/operator-lifecycle-manager/subscription.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/subscription.tsx
@@ -3,6 +3,8 @@ import * as _ from 'lodash-es';
 import { match, Link } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
+import { InProgressIcon } from '@patternfly/react-icons';
+
 import { DetailsPage, MultiListPage, Table, TableRow, TableData } from '../factory';
 import { requireOperatorGroup } from './operator-group';
 import { MsgBox, ResourceLink, ResourceKebab, navFactory, Kebab, ResourceSummary, LoadingInline, SectionHeading } from '../utils';
@@ -13,6 +15,7 @@ import { SubscriptionModel, ClusterServiceVersionModel, CatalogSourceModel, Inst
 import { createDisableApplicationModal } from '../modals/disable-application-modal';
 import { createSubscriptionChannelModal } from '../modals/subscription-channel-modal';
 import { createInstallPlanApprovalModal } from '../modals/installplan-approval-modal';
+import { YellowExclamationTriangleIcon, GreenCheckCircleIcon } from '@console/internal/components/utils/status-icon';
 
 const tableColumnClasses = [
   classNames('col-md-3', 'col-sm-4', 'col-xs-6'),
@@ -51,9 +54,9 @@ SubscriptionTableHeader.displayName = 'SubscriptionTableHeader';
 
 const subscriptionState = (state: SubscriptionState) => {
   switch (state) {
-    case SubscriptionState.SubscriptionStateUpgradeAvailable: return <span><i className="pficon pficon-warning-triangle-o text-warning" /> Upgrade available</span>;
-    case SubscriptionState.SubscriptionStateUpgradePending: return <span><i className="pficon pficon-in-progress text-primary" /> Upgrading</span>;
-    case SubscriptionState.SubscriptionStateAtLatest: return <span><i className="pficon pficon-ok co-m-status--ok" /> Up to date</span>;
+    case SubscriptionState.SubscriptionStateUpgradeAvailable: return <span><YellowExclamationTriangleIcon /> Upgrade available</span>;
+    case SubscriptionState.SubscriptionStateUpgradePending: return <span><InProgressIcon className="text-primary" /> Upgrading</span>;
+    case SubscriptionState.SubscriptionStateAtLatest: return <span><GreenCheckCircleIcon /> Up to date</span>;
     default: return <span className={_.isEmpty(state) ? 'text-muted' : ''}>{state || 'Unknown'}</span>;
   }
 };
diff --git a/frontend/public/components/overview/_overview.scss b/frontend/public/components/overview/_overview.scss
index 32a35ba4b2f1..25d0ab088595 100644
--- a/frontend/public/components/overview/_overview.scss
+++ b/frontend/public/components/overview/_overview.scss
@@ -55,6 +55,7 @@ $overview-sidebar-width: 550px;
     padding: 0 5px;
 
     .close {
+      font-size: 16px;
       // adjustments to increase click target and default color contrast because it's on a grey background
       opacity: .3;
       padding: 10px 15px;
@@ -63,10 +64,6 @@ $overview-sidebar-width: 550px;
         opacity: .6;
       }
     }
-
-    .pficon-close {
-      font-size: 16px;
-    }
   }
 }
 
diff --git a/frontend/public/components/overview/_project-overview.scss b/frontend/public/components/overview/_project-overview.scss
index b798f600ca0f..0fe806281f54 100644
--- a/frontend/public/components/overview/_project-overview.scss
+++ b/frontend/public/components/overview/_project-overview.scss
@@ -64,10 +64,10 @@
     background-color: $color-pf-blue-100 !important;
 
     &::after {
+      @include font-awesome-free-solid;
       align-self: center;
-      content: $fa-var-chevron-right;
+      content: fa-content($fa-var-chevron-right);
       display: block;
-      font-family: 'FontAwesome';
       position: absolute;
       right: 30px;
     }
diff --git a/frontend/public/components/overview/project-overview.tsx b/frontend/public/components/overview/project-overview.tsx
index f5ebbfa4abd4..28366e0c2b36 100644
--- a/frontend/public/components/overview/project-overview.tsx
+++ b/frontend/public/components/overview/project-overview.tsx
@@ -15,6 +15,7 @@ import {
   resourceObjPath,
   StatusIcon,
   truncateMiddle,
+  YellowExclamationTriangleIcon,
 } from '../utils';
 
 import {
@@ -189,7 +190,7 @@ const projectOverviewListItemDispatchToProps = (dispatch): ProjectOverviewListIt
   dismissDetails: () => dispatch(UIActions.dismissOverviewDetails()),
 });
 
-export const ResourceItemDeleting = () => <span className="co-resource-item__deleting"><i className="pficon pficon-warning-triangle-o" aria-hidden="true" /> Deleting</span>;
+export const ResourceItemDeleting = () => <span className="co-resource-item__deleting"><YellowExclamationTriangleIcon /> Deleting</span>;
 
 const ProjectOverviewListItem = connect<ProjectOverviewListItemPropsFromState, ProjectOverviewListItemPropsFromDispatch, ProjectOverviewListItemOwnProps>(projectOverviewListItemStateToProps, projectOverviewListItemDispatchToProps)(
   ({dismissDetails, item, metrics, selectItem, selectedUID}: ProjectOverviewListItemProps) => {
diff --git a/frontend/public/components/pod-exec.jsx b/frontend/public/components/pod-exec.jsx
index 1234642e7b3e..87afca6d61c3 100644
--- a/frontend/public/components/pod-exec.jsx
+++ b/frontend/public/components/pod-exec.jsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
+import { ExpandIcon } from '@patternfly/react-icons';
 
 import store from '../redux';
 import { LoadingBox, LoadingInline, Dropdown, ResourceIcon } from './utils';
@@ -179,7 +180,7 @@ export const PodExec = connectToFlags(FLAGS.OPENSHIFT)(class PodExec extends Rea
         {!error && <div className="co-toolbar__group co-toolbar__group--right">
           <div className="co-toolbar__item">
             <button className="btn btn-link" onClick={() => this.setFullscreen(true)}>
-              <i className="fa fa-expand" aria-hidden="true" /> Expand
+              <ExpandIcon className="co-icon-space-r" />Expand
             </button>
           </div>
         </div>}
diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx
index 89501e5c86d6..adff87975f35 100644
--- a/frontend/public/components/resource-quota.jsx
+++ b/frontend/public/components/resource-quota.jsx
@@ -3,8 +3,16 @@ import * as React from 'react';
 import { FieldLevelHelp } from 'patternfly-react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import {
+  OutlinedCircleIcon,
+  ResourcesAlmostEmptyIcon,
+  ResourcesAlmostFullIcon,
+  ResourcesFullIcon,
+  UnknownIcon,
+} from '@patternfly/react-icons';
+
 import { DetailsPage, MultiListPage, Table, TableRow, TableData } from './factory';
-import { Kebab, SectionHeading, navFactory, ResourceKebab, ResourceLink, ResourceSummary, convertToBaseValue } from './utils';
+import { Kebab, SectionHeading, navFactory, ResourceKebab, ResourceLink, ResourceSummary, convertToBaseValue, YellowExclamationTriangleIcon } from './utils';
 import { connectToFlags, flagPending } from '../reducers/features';
 import { FLAGS } from '../const';
 import { Gauge } from './graphs';
@@ -82,19 +90,19 @@ export const ResourceQuotaTableRow = ({obj: rq, index, key, style}) => {
 ResourceQuotaTableRow.displayName = 'ResourceQuotaTableRow';
 
 export const UsageIcon = ({percent}) => {
-  let usageIconClass = 'pficon pficon-unknown';
+  let usageIcon = <UnknownIcon />;
   if (percent === 0) {
-    usageIconClass = 'fa fa-circle-thin co-resource-quota-empty';
+    usageIcon = <OutlinedCircleIcon className="co-resource-quota-empty" />;
   } else if (percent > 0 && percent < 50) {
-    usageIconClass = 'pficon pficon-resources-almost-empty';
+    usageIcon = <ResourcesAlmostEmptyIcon className="co-resource-quota-almost-empty" />;
   } else if (percent >= 50 && percent < 100){
-    usageIconClass = 'pficon pficon-resources-almost-full';
+    usageIcon = <ResourcesAlmostFullIcon className="co-resource-quota-almost-full" />;
   } else if (percent === 100) {
-    usageIconClass = 'pficon pficon-resources-full';
+    usageIcon = <ResourcesFullIcon className="co-resource-quota-full" />;
   } else if (percent > 100) {
-    usageIconClass = 'pficon pficon-warning-triangle-o';
+    usageIcon = <YellowExclamationTriangleIcon className="co-resource-quota-exceeded" />;
   }
-  return <i className={usageIconClass} aria-hidden="true" />;
+  return usageIcon;
 };
 
 export const ResourceUsageRow = ({quota, resourceType}) => {
diff --git a/frontend/public/components/routes.tsx b/frontend/public/components/routes.tsx
index 8ce679ebced7..d1124690fb58 100644
--- a/frontend/public/components/routes.tsx
+++ b/frontend/public/components/routes.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { Popover } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { EyeIcon, EyeSlashIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { DetailsPage,ListPage, Table, TableRow, TableData } from './factory';
 import { Kebab, CopyToClipboard, SectionHeading, ResourceKebab, detailsPage, navFactory, ResourceLink, ResourceSummary, StatusIconAndText, ExternalLink } from './utils';
 import { MaskedData } from './configmap-and-secret-data';
@@ -210,8 +210,8 @@ class TLSSettings extends React.Component<TLSDataProps, TLSDataState> {
           <button className="btn btn-link co-m-route-tls-reveal__btn" type="button" onClick={this.toggleKey}>
             {
               showPrivateKey
-                ? <React.Fragment><i className="fa fa-eye-slash" aria-hidden="true"></i> Hide</React.Fragment>
-                : <React.Fragment><i className="fa fa-eye" aria-hidden="true"></i> Reveal</React.Fragment>
+                ? <React.Fragment><EyeSlashIcon className="co-icon-space-r" />Hide</React.Fragment>
+                : <React.Fragment><EyeIcon className="co-icon-space-r" />Reveal</React.Fragment>
             }
           </button>}
         </dt>
diff --git a/frontend/public/components/secrets/create-secret.tsx b/frontend/public/components/secrets/create-secret.tsx
index 751e0b1ff876..3547cee84a91 100644
--- a/frontend/public/components/secrets/create-secret.tsx
+++ b/frontend/public/components/secrets/create-secret.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { Base64 } from 'js-base64';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { k8sCreate, k8sUpdate, K8sResourceKind, referenceFor } from '../../module/k8s';
 import { ButtonBar, Firehose, history, StatusBox, LoadingBox, Dropdown, resourceObjPath } from '../utils';
@@ -540,7 +541,7 @@ class CreateConfigSubform extends React.Component<CreateConfigSubformProps, Crea
       return <div className="co-create-secret__form-entry-wrapper" key={entryData.uid}>
         {_.size(this.state.secretEntriesArray) > 1 && <div className="co-create-secret-form__link--remove-entry">
           <button className="btn btn-link" type="button" onClick={() => this.removeEntry(index)}>
-            <i className="fa fa-minus-circle" aria-hidden="true" /> Remove Credentials
+            <MinusCircleIcon className="co-icon-space-r" />Remove Credentials
           </button>
         </div>}
         <ConfigEntryForm id={index} entry={entryData.entry} onChange={this.onDataChanged} />
@@ -550,7 +551,7 @@ class CreateConfigSubform extends React.Component<CreateConfigSubformProps, Crea
       <React.Fragment>
         {secretEntriesList}
         <button className="btn btn-link co-create-secret-form__link--add-entry" type="button" onClick={() => this.addEntry()}>
-          <i className="fa fa-plus-circle" aria-hidden="true" /> Add Credentials
+          <PlusCircleIcon className="co-icon-space-r" />Add Credentials
         </button>
       </React.Fragment>
     );
@@ -855,7 +856,7 @@ class GenericSecretForm extends React.Component<GenericSecretFormProps, GenericS
       return <div className="co-create-secret__form-entry-wrapper" key={entryData.uid}>
         {_.size(this.state.secretEntriesArray) > 1 && <div className="co-create-secret-form__link--remove-entry">
           <button className="btn btn-link" type="button" onClick={() => this.removeEntry(index)}>
-            <i className="fa fa-minus-circle" aria-hidden="true" /> Remove Key/Value
+            <MinusCircleIcon className="co-icon-space-r" />Remove Key/Value
           </button>
         </div>}
         <KeyValueEntryForm id={index} entry={entryData.entry} onChange={this.onDataChanged} />
@@ -865,7 +866,7 @@ class GenericSecretForm extends React.Component<GenericSecretFormProps, GenericS
       <React.Fragment>
         {secretEntriesList}
         <button className="btn btn-link co-create-secret-form__link--add-entry" type="button" onClick={() => this.addEntry()}>
-          <i className="fa fa-plus-circle" aria-hidden="true" /> Add Key/Value
+          <PlusCircleIcon className="co-icon-space-r" />Add Key/Value
         </button>
       </React.Fragment>
     );
diff --git a/frontend/public/components/sidebars/resource-sidebar.jsx b/frontend/public/components/sidebars/resource-sidebar.jsx
index 14d9ae89b527..e2cd22578e5e 100644
--- a/frontend/public/components/sidebars/resource-sidebar.jsx
+++ b/frontend/public/components/sidebars/resource-sidebar.jsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import {
+  CloseIcon,
+  DownloadIcon,
+  InfoCircleIcon,
+  PasteIcon,
+} from '@patternfly/react-icons';
 
 import { resourceSidebars } from './resource-sidebars';
 
@@ -22,7 +28,7 @@ export class ResourceSidebarWrapper extends React.Component {
     if (!showSidebar) {
       return <div className="co-p-has-sidebar__sidebar--hidden hidden-sm">
         <button className="btn btn-link" onClick={() => this.setState({showSidebar: !showSidebar})}>
-          <i className="fa fa-fw fa-info-circle co-p-has-sidebar__sidebar-link-icon" aria-hidden="true" />{linkLabel}
+          <InfoCircleIcon className="co-icon-space-r co-p-has-sidebar__sidebar-link-icon" />{linkLabel}
         </button>
       </div>;
     }
@@ -30,7 +36,7 @@ export class ResourceSidebarWrapper extends React.Component {
     return <div className="co-p-has-sidebar__sidebar co-p-has-sidebar__sidebar--bordered hidden-sm" style={{height}}>
       <div className="co-m-pane__body">
         <button type="button" className="close" aria-label="Close" onClick={() => this.setState({showSidebar: !showSidebar})}>
-          <i className="pficon pficon-close" aria-hidden="true" />
+          <CloseIcon />
         </button>
         <h1 className="co-p-has-sidebar__sidebar-heading co-resource-sidebar-header text-capitalize">
           {label}
@@ -52,10 +58,10 @@ export const SampleYaml = ({sample, loadSampleYaml, downloadSampleYaml}) => {
       {details}
     </p>
     <button className="btn btn-link" onClick={() => loadSampleYaml(templateName, kind)}>
-      <span className="fa fa-fw fa-paste" aria-hidden="true"></span> Try it
+      <PasteIcon className="co-icon-space-r" />Try it
     </button>
     <button className="btn btn-link pull-right" onClick={() => downloadSampleYaml(templateName, kind)}>
-      <span className="fa fa-fw fa-download" aria-hidden="true"></span> Download YAML
+      <DownloadIcon className="co-icon-space-r" />Download YAML
     </button>
   </li>;
 };
diff --git a/frontend/public/components/software-details.jsx b/frontend/public/components/software-details.jsx
index 198b83f6b95b..7fe88b2fb98f 100644
--- a/frontend/public/components/software-details.jsx
+++ b/frontend/public/components/software-details.jsx
@@ -1,34 +1,8 @@
 import * as React from 'react';
-import * as classNames from 'classnames';
 
 import { k8sVersion } from '../module/status';
 import { LoadingInline } from './utils';
 
-
-const StatusIconRow = ({state, text}) => {
-  const iconClasses = {
-    ok: 'pficon-ok',
-    warning: 'pficon-warning-triangle-o',
-    critical: 'pficon-error-circle-o',
-    unknown: 'pficon-unknown',
-    'access-denied': 'fa-ban',
-  };
-  return <div className={classNames('co-m-status', [`co-m-status--${state}`])}>
-    <i className={classNames('co-m-status__icon', 'pficon', iconClasses[state])}></i>
-    <span className="co-m-status__text">{text}</span>
-  </div>;
-};
-
-export const StatusIcon = ({state, text}) => {
-  if (['ok', 'warning', 'critical', 'unknown', 'access-denied'].includes(state)) {
-    return <StatusIconRow state={state} text={text} />;
-  }
-
-  return <div className="co-m-status">
-    <span className="co-m-status__text">{text}</span>
-  </div>;
-};
-
 export const SubHeaderRow = ({header, children}) => {
   return <div className="row">
     <div className="col-xs-12">
@@ -48,7 +22,7 @@ const SoftwareDetailRow = ({title, detail, text, children}) => {
     <div className="col-xs-6 text-right">
       <div>
         {!detail && <LoadingInline />}
-        {detail === 'unknown' ? <StatusIcon state={detail} text={text} /> : detail}
+        {detail === 'unknown' ? text : detail}
       </div>
       {children}
     </div>
diff --git a/frontend/public/components/source-to-image.tsx b/frontend/public/components/source-to-image.tsx
index 640c4b8ee8ac..28db414319d8 100644
--- a/frontend/public/components/source-to-image.tsx
+++ b/frontend/public/components/source-to-image.tsx
@@ -10,6 +10,7 @@ import { ContainerPort, k8sCreate, k8sGet, K8sResourceKind } from '../module/k8s
 import { ImageStreamIcon } from './catalog/catalog-item-icon';
 import { getAnnotationTags, getBuilderTagsSortedByVersion } from './image-stream';
 import { ButtonBar } from './utils/button-bar';
+import { LevelUpAltIcon } from '@patternfly/react-icons';
 
 const getSampleRepo = tag => _.get(tag, 'annotations.sampleRepo');
 const getSampleRef = tag => _.get(tag, 'annotations.sampleRef');
@@ -462,7 +463,7 @@ class BuildSource extends React.Component<BuildSourceProps, BuildSourceState> {
               required />
             {sampleRepo && <div className="help-block">
               <button type="button" className="btn btn-link btn-link--no-btn-default-values" onClick={this.fillSample}>
-                Try Sample <i className="fa fa-level-up" aria-hidden="true" />
+                Try Sample<LevelUpAltIcon className="co-icon-space-l" />
               </button>
             </div>}
             <div className="help-block">
diff --git a/frontend/public/components/start-guide.tsx b/frontend/public/components/start-guide.tsx
index 4b6bc517ccab..348107d42646 100644
--- a/frontend/public/components/start-guide.tsx
+++ b/frontend/public/components/start-guide.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button } from 'patternfly-react';
+import { CloseIcon } from '@patternfly/react-icons';
 
 import { createProjectMessageStateToProps } from '../reducers/ui';
 import { DocumentationSidebar, Disabled } from './utils';
@@ -29,7 +30,7 @@ export const StartGuide: React.FC<StartGuideProps> = (props) => {
 
   return isVisible
     ? <div className="co-well">
-      {dismissKey && <Button className="co-well__close-button" aria-label="Close" bsStyle="link" onClick={dismiss}><i className="pficon pficon-close" aria-hidden="true" /></Button>}
+      {dismissKey && <Button className="co-well__close-button" aria-label="Close" bsStyle="link" onClick={dismiss}><CloseIcon /></Button>}
       {startGuide}
     </div>
     : null;
diff --git a/frontend/public/components/terminal.jsx b/frontend/public/components/terminal.jsx
index 4f6ec94d12a4..840c98f2ea30 100644
--- a/frontend/public/components/terminal.jsx
+++ b/frontend/public/components/terminal.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Terminal as XTerminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
 import * as full from 'xterm/lib/addons/fullscreen/fullscreen';
+import { CompressIcon } from '@patternfly/react-icons';
 
 XTerminal.applyAddon(fit);
 XTerminal.applyAddon(full);
@@ -117,7 +118,7 @@ export class Terminal extends React.Component {
     return <div ref={this.outerRef} style={this.state} className={this.props.className}>
       <div ref={this.innerRef} className="console">
         { this.isFullscreen && <button className="btn btn-link console-collapse-link" onClick={() => this.setFullscreen(false)}>
-          <i className="fa fa-compress" aria-hidden="true" /> Collapse
+          <CompressIcon className="co-icon-space-r" />Collapse
         </button> }
       </div>
     </div>;
diff --git a/frontend/public/components/utils/_name-value-editor.scss b/frontend/public/components/utils/_name-value-editor.scss
index b9ed0568a496..09801054adf6 100644
--- a/frontend/public/components/utils/_name-value-editor.scss
+++ b/frontend/public/components/utils/_name-value-editor.scss
@@ -1,5 +1,6 @@
 $drag-column-width: 28px;
-$drag-row-margin: 8px;
+$drag-row-margin-left: 8px;
+$drag-row-margin-top: 6px;
 
 .co-empty__header {
   padding: 0;
@@ -52,16 +53,17 @@ $drag-row-margin: 8px;
 }
 
 .pairs-list__action-icon {
-  margin-left: $drag-row-margin;
+  margin-left: $drag-row-margin-left;
+  margin-top: $drag-row-margin-top;
   width: auto;
 }
 
 .pairs-list__action-icon--reorder {
-  line-height: 35px;
   cursor: move;
 }
 
 .pairs-list__add-icon {
+  margin-top: $drag-row-margin-top;
   margin-right: 6px;
 }
 
@@ -70,6 +72,7 @@ $drag-row-margin: 8px;
 }
 
 .pairs-list__span-btns {
-  margin-left: -$drag-row-margin;
+  margin-left: -$drag-row-margin-left;
+  margin-top: $drag-row-margin-top;
   white-space: pre;
 }
diff --git a/frontend/public/components/utils/_number-spinner.scss b/frontend/public/components/utils/_number-spinner.scss
index d86362bcd8f9..a61d2c012552 100644
--- a/frontend/public/components/utils/_number-spinner.scss
+++ b/frontend/public/components/utils/_number-spinner.scss
@@ -8,8 +8,8 @@
   @include co-x-prefix(user-select, none);
   cursor: pointer;
   font-size: 20px;
-  vertical-align: middle;
-  margin-top: -1px;
+  position: relative;
+  top: 4px;
 }
 
 .co-m-number-spinner__up-icon {
diff --git a/frontend/public/components/utils/close-button.jsx b/frontend/public/components/utils/close-button.jsx
index 47009ae5267f..20e29da39073 100644
--- a/frontend/public/components/utils/close-button.jsx
+++ b/frontend/public/components/utils/close-button.jsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { CloseIcon } from '@patternfly/react-icons';
 
 export const CloseButton = ({onClick}) =>
   <button aria-label="Close" className="close" onClick={onClick} type="button">
-    <span aria-hidden="true" className="pficon pficon-close"></span>
+    <CloseIcon />
   </button>;
diff --git a/frontend/public/components/utils/copy-to-clipboard.tsx b/frontend/public/components/utils/copy-to-clipboard.tsx
index b3a9e6f37b62..d7e354e0dfdc 100644
--- a/frontend/public/components/utils/copy-to-clipboard.tsx
+++ b/frontend/public/components/utils/copy-to-clipboard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { CopyToClipboard as CTC } from 'react-copy-to-clipboard';
 import { Tooltip } from 'react-lightweight-tooltip';
+import { PasteIcon } from '@patternfly/react-icons';
 
 export const CopyToClipboard: React.FC<CopyToClipboardProps> = React.memo((props) => {
   const overrides = Object.freeze({
@@ -56,7 +57,7 @@ export const CopyToClipboard: React.FC<CopyToClipboardProps> = React.memo((props
     <Tooltip content={tooltipContent} styles={overrides}>
       <CTC text={props.value} onCopy={() => setCopied(true)}>
         <button onMouseEnter={() => setCopied(false)} className="btn btn-default co-copy-to-clipboard__btn fix" type="button">
-          <i className="fa fa-clipboard" aria-hidden="true"></i>
+          <PasteIcon />
           <span className="sr-only">Copy to Clipboard</span>
         </button>
       </CTC>
diff --git a/frontend/public/components/utils/download-button.tsx b/frontend/public/components/utils/download-button.tsx
index d4e6d37c1334..bb978616a7e3 100644
--- a/frontend/public/components/utils/download-button.tsx
+++ b/frontend/public/components/utils/download-button.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { saveAs } from 'file-saver';
 import { Alert } from '@patternfly/react-core';
+import { DownloadIcon } from '@patternfly/react-icons';
 
 import { coFetch } from '../../co-fetch';
 
@@ -24,7 +25,7 @@ export const DownloadButton: React.FC<DownloadButtonProps> = (props) => {
 
   return <React.Fragment>
     <button className="btn btn-primary" style={{marginBottom: 10}} disabled={inFlight} type="button" onClick={() => download()}>
-      <i className="fa fa-fw fa-download" aria-hidden="true" />&nbsp;Download{inFlight && <React.Fragment>ing...</React.Fragment>}
+      <DownloadIcon className="co-icon-space-r" />Download{inFlight && <React.Fragment>ing...</React.Fragment>}
     </button>
     { error && <Alert isInline className="co-alert co-break-word" variant="danger" title={error.toString()} /> }
   </React.Fragment>;
diff --git a/frontend/public/components/utils/dropdown.jsx b/frontend/public/components/utils/dropdown.jsx
index 87db64ab53c8..de29fc6a37a1 100644
--- a/frontend/public/components/utils/dropdown.jsx
+++ b/frontend/public/components/utils/dropdown.jsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon, MinusCircleIcon, PlusCircleIcon, StarIcon } from '@patternfly/react-icons';
 import { impersonateStateToProps } from '../../reducers/ui';
 import { checkAccess, history, KebabItems, ResourceName } from './index';
 
@@ -109,16 +109,16 @@ class DropDownRow extends React.PureComponent {
       </li>;
     }
     if (onUnBookmark) {
-      prefix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onUnBookmark(e, itemKey)}><i aria-hidden className="fa fa-minus-circle" /></a>;
+      prefix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onUnBookmark(e, itemKey)}><MinusCircleIcon /></a>;
     }
     if (onBookmark) {
-      prefix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onBookmark(e, itemKey, content)}><i aria-hidden className="fa fa-plus-circle" /></a>;
+      prefix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onBookmark(e, itemKey, content)}><PlusCircleIcon /></a>;
     }
 
     let suffix;
     if (onUnBookmark && canFavorite) {
       const isFavorite = favoriteKey === itemKey;
-      suffix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onFavorite(e, (isFavorite ? undefined : itemKey))}><i aria-hidden className={classNames('fa fa-star', {'favorite': isFavorite})} /></a>;
+      suffix = <a href="#" className={classNames('bookmarker', {hover, focus: selected})} onClick={e => onFavorite(e, (isFavorite ? undefined : itemKey))}><StarIcon className={classNames({'favorite': isFavorite})} /></a>;
     }
 
     return <li role="option" className={classNames(className)} key={itemKey}>
diff --git a/frontend/public/components/utils/list-input.tsx b/frontend/public/components/utils/list-input.tsx
index e8f5fe830cc9..651245bb90c0 100644
--- a/frontend/public/components/utils/list-input.tsx
+++ b/frontend/public/components/utils/list-input.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
+import { PlusCircleIcon, MinusCircleIcon } from '@patternfly/react-icons';
 
 export class ListInput extends React.Component<ListInputProps, ListInputState> {
   private helpID: string = _.uniqueId('list-view-help-');
@@ -60,14 +61,14 @@ export class ListInput extends React.Component<ListInputProps, ListInputState> {
             </div>
             <div className="co-list-input__remove-btn">
               <button type="button" className="btn btn-link btn-link--inherit-color" onClick={() => this.removeValue(i)} aria-label="Remove">
-                <i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true" />
+                <MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" />
               </button>
             </div>
           </div>
         ))}
         {helpText && <div className="co-list-input__help-block help-block" id={this.helpID}>{helpText}</div>}
         <button type="button" className="btn btn-link co-list-input__add-btn" onClick={() => this.addValue()}>
-          <i className="fa fa-plus-circle pairs-list__add-icon" aria-hidden="true" />Add More
+          <PlusCircleIcon className="pairs-list__add-icon" />Add More
         </button>
       </div>
     );
diff --git a/frontend/public/components/utils/log-window.jsx b/frontend/public/components/utils/log-window.jsx
index d62d8c9c27ce..44d084a5c035 100644
--- a/frontend/public/components/utils/log-window.jsx
+++ b/frontend/public/components/utils/log-window.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { pluralize } from './';
 import { STREAM_EOF, STREAM_PAUSED, STREAM_ACTIVE } from './resource-log';
+import { OutlinedPlayCircleIcon } from '@patternfly/react-icons';
 
 // Subtracted from log window height to prevent scroll bar from appearing when resume button is shown.
 // Added fullscreen fudge factor to account for fullscreen taking log contents outside of .co-m-pane__body div
@@ -130,7 +131,7 @@ export class LogWindow extends React.PureComponent {
       </div>
       { status === STREAM_PAUSED &&
         <button onClick={this._unpause} className="btn btn-block log-window__resume-btn">
-          <span className="fa fa-play-circle-o" aria-hidden="true"></span>
+          <OutlinedPlayCircleIcon />
           {resumeText}
         </button> }
     </div>;
diff --git a/frontend/public/components/utils/name-value-editor.jsx b/frontend/public/components/utils/name-value-editor.jsx
index 4f84c8c14d9c..5e9d752719a8 100644
--- a/frontend/public/components/utils/name-value-editor.jsx
+++ b/frontend/public/components/utils/name-value-editor.jsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { DragSource, DropTarget } from 'react-dnd';
 import { DRAGGABLE_TYPE } from './draggable-item-types';
+import { PficonDragdropIcon, MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 import { NameValueEditorPair, EnvFromPair, EnvType } from './index';
 import { ValueFromPair } from './value-from-pair';
@@ -79,14 +80,14 @@ export const NameValueEditor = withDragDropContext(class NameValueEditor extends
               null :
               <div className="co-toolbar__group co-toolbar__group--left">
                 <button type="button" className="btn btn-link pairs-list__add-btn" onClick={this._append}>
-                  <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />{addString}
+                  <PlusCircleIcon className="pairs-list__add-icon" />{addString}
                 </button>
                 {
                   addConfigMapSecret &&
                     <React.Fragment>
                       <span aria-hidden="true" className="co-action-divider hidden-xs">|</span>
                       <button type="button" className="btn btn-link" onClick={this._appendConfigMapOrSecret}>
-                        <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add from Config Map or Secret
+                        <PlusCircleIcon className="pairs-list__add-icon" />Add from Config Map or Secret
                       </button>
                     </React.Fragment>
                 }
@@ -190,7 +191,7 @@ export const EnvFromEditor = withDragDropContext(class EnvFromEditor extends Rea
           {
             !readOnly &&
             <button type="button" className="btn-link" onClick={this._append}>
-              <i aria-hidden="true" className="fa fa-plus-circle pairs-list__add-icon" />Add All From Config Map or Secret
+              <PlusCircleIcon className="pairs-list__add-icon" />Add All From Config Map or Secret
             </button>
           }
         </div>
@@ -310,7 +311,7 @@ const PairElement = DragSource(DRAGGABLE_TYPE.ENV_ROW, pairSource, collectSource
 
   render() {
     const {isDragging, connectDragSource, connectDragPreview, connectDropTarget, nameString, valueString, allowSorting, readOnly, pair, configMaps, secrets} = this.props;
-    const deleteButton = <React.Fragment><i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true"></i><span className="sr-only">Delete</span></React.Fragment>;
+    const deleteButton = <React.Fragment><MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" /><span className="sr-only">Delete</span></React.Fragment>;
 
     return connectDropTarget(
       connectDragPreview(
@@ -318,7 +319,7 @@ const PairElement = DragSource(DRAGGABLE_TYPE.ENV_ROW, pairSource, collectSource
           {allowSorting && !readOnly &&
             <div className="col-xs-1 pairs-list__action">
               {connectDragSource(<button type="button" className="btn btn-link btn-link--inherit-color pairs-list__action-icon" tabIndex="-1">
-                <i className="pficon pficon-drag-drop pairs-list__action-icon--reorder" />
+                <PficonDragdropIcon className="pairs-list__action-icon--reorder" />
               </button>)}
             </div>
           }
@@ -394,7 +395,7 @@ const EnvFromPairElement = DragSource(DRAGGABLE_TYPE.ENV_FROM_ROW, pairSource, c
 
   render() {
     const {isDragging, connectDragSource, connectDragPreview, connectDropTarget, valueString, readOnly, pair, configMaps, secrets} = this.props;
-    const deleteButton = <React.Fragment><i className="fa fa-minus-circle pairs-list__side-btn pairs-list__delete-icon" aria-hidden="true"></i><span className="sr-only">Delete</span></React.Fragment>;
+    const deleteButton = <React.Fragment><MinusCircleIcon className="pairs-list__side-btn pairs-list__delete-icon" /><span className="sr-only">Delete</span></React.Fragment>;
 
     return connectDropTarget(
       connectDragPreview(
@@ -402,7 +403,7 @@ const EnvFromPairElement = DragSource(DRAGGABLE_TYPE.ENV_FROM_ROW, pairSource, c
           { !readOnly &&
             <div className="col-xs-1 pairs-list__action">
               {connectDragSource(<button type="button" className="btn btn-link btn-link--inherit-color pairs-list__action-icon" tabIndex="-1">
-                <i className="pficon pficon-drag-drop pairs-list__action-icon--reorder" />
+                <PficonDragdropIcon className="pairs-list__action-icon--reorder" />
               </button>)}
             </div>
           }
diff --git a/frontend/public/components/utils/number-spinner.tsx b/frontend/public/components/utils/number-spinner.tsx
index 599f5b5e3d6e..b24c868f67b0 100644
--- a/frontend/public/components/utils/number-spinner.tsx
+++ b/frontend/public/components/utils/number-spinner.tsx
@@ -1,15 +1,16 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
+import { MinusSquareIcon, PlusSquareIcon } from '@patternfly/react-icons';
 
 export const NumberSpinner: React.FC<NumberSpinnerProps> = (props) => {
   const inputProps = _.omit(props, ['className', 'changeValueBy']);
   const className = classNames(props.className, 'co-m-number-spinner__input');
 
   return <div>
-    <i className="fa fa-minus-square co-m-number-spinner__down-icon" onClick={() => props.changeValueBy(-1)}></i>
+    <MinusSquareIcon className="co-m-number-spinner__down-icon" onClick={() => props.changeValueBy(-1)} />
     <input type="number" className={className} {...inputProps} />
-    <i className="fa fa-plus-square co-m-number-spinner__up-icon" onClick={() => props.changeValueBy(1)}></i>
+    <PlusSquareIcon className="co-m-number-spinner__up-icon" onClick={() => props.changeValueBy(1)} />
   </div>;
 };
 
diff --git a/frontend/public/components/utils/resource-log.jsx b/frontend/public/components/utils/resource-log.jsx
index 04d37e8ab257..f9601008b35b 100644
--- a/frontend/public/components/utils/resource-log.jsx
+++ b/frontend/public/components/utils/resource-log.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Base64 } from 'js-base64';
 import { saveAs } from 'file-saver';
 import { Alert, AlertActionLink } from '@patternfly/react-core';
+import { CompressIcon, ExpandIcon, DownloadIcon } from '@patternfly/react-icons';
 
 import { LoadingInline, LogWindow, TogglePlay } from './';
 import * as classNames from 'classnames';
@@ -31,10 +32,6 @@ const streamStatusMessages = {
 
 // Component for log stream controls
 const LogControls = ({dropdown, onDownload, toggleFullscreen, isFullscreen, status, toggleStreaming}) => {
-  const expandCompressClass = classNames('fa', {
-    'fa-expand': !isFullscreen,
-    'fa-compress': isFullscreen,
-  });
   return <div className="co-toolbar">
     <div className="co-toolbar__group co-toolbar__group--left">
       <div className="co-toolbar__item">
@@ -46,11 +43,13 @@ const LogControls = ({dropdown, onDownload, toggleFullscreen, isFullscreen, stat
     </div>
     <div className="co-toolbar__group co-toolbar__group--right">
       <button className="btn btn-link" onClick={onDownload}>
-        <i className="fa fa-download" aria-hidden="true"></i>&nbsp;Download
+        <DownloadIcon className="co-icon-space-r" />Download
       </button>
       <span aria-hidden="true" className="co-action-divider hidden-xs">|</span>
       <button className="btn btn-link" onClick={toggleFullscreen}>
-        <i className={expandCompressClass} aria-hidden="true"></i>&nbsp;{isFullscreen ? 'Collapse' : 'Expand'}
+        {isFullscreen
+          ? <React.Fragment><CompressIcon className="co-icon-space-r" />Collapse</React.Fragment>
+          : <React.Fragment><ExpandIcon className="co-icon-space-r" />Expand</React.Fragment>}
       </button>
     </div>
   </div>;
diff --git a/frontend/public/components/utils/selector.tsx b/frontend/public/components/utils/selector.tsx
index 1a4b7310687b..00efaf6c0d2f 100644
--- a/frontend/public/components/utils/selector.tsx
+++ b/frontend/public/components/utils/selector.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { SearchIcon } from '@patternfly/react-icons';
 
 import { Selector as SelectorKind } from '../../module/k8s';
 import { selectorToString } from '../../module/k8s/selector';
@@ -17,7 +18,7 @@ const Requirement: React.FC<RequirementProps> = ({kind, requirements, namespace=
   return (
     <div className="co-m-requirement">
       <Link className={`co-m-requirement__link co-text-${kind.toLowerCase()}`} to={to} tabIndex={-1}>
-        <i className="co-m-requirement__icon fa fa-search" aria-hidden="true"></i>
+        <SearchIcon className="co-m-requirement__icon co-icon-flex-child" />
         <span className="co-m-requirement__label">{requirementAsString.replace(/,/g, ', ')}</span>
       </Link>
     </div>
diff --git a/frontend/public/components/utils/status-icon.tsx b/frontend/public/components/utils/status-icon.tsx
index 7341c1a20e8a..46eadac98fdc 100644
--- a/frontend/public/components/utils/status-icon.tsx
+++ b/frontend/public/components/utils/status-icon.tsx
@@ -96,7 +96,7 @@ export const StatusIconAndText: React.FunctionComponent<StatusIconAndTextProps>
     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>;
+  return <span className="co-icon-and-text"><StatusIcon status={status} spin={spin} additionalIconClassName="co-icon-and-text__icon co-icon-flex-child" icon={icon} /><CamelCaseWrap value={status} /></span>;
 };
 
 export type ColoredIconProps = {
diff --git a/frontend/public/style.scss b/frontend/public/style.scss
index bea9e1987c9d..c29e8b3c1a39 100644
--- a/frontend/public/style.scss
+++ b/frontend/public/style.scss
@@ -8,19 +8,20 @@
 @import '~patternfly-react-extensions/dist/sass/variables';
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
-@import "~font-awesome-sass/assets/stylesheets/font-awesome/variables";
+@import "~@fortawesome/fontawesome-free/scss/variables";
 
 @import "style/base";
 
-// Overrides
-@import "style/overrides";
-
 // Mixins
-@import "style/mixin/prefix";
 @import "style/mixin/break-word";
+@import "style/mixin/font-awesome";
+@import "style/mixin/prefix";
 @import "style/mixin/scroll-shadows";
 @import "style/mixin/truncate";
 
+// Overrides
+@import "style/overrides";
+
 /* CUSTOM STYLES */
 
 // Base
@@ -29,7 +30,6 @@
 @import "style/layout";
 @import "style/text";
 @import "style/forms";
-@import "style/status";
 
 // React Components
 @import "components/utils/alerts";
diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
index 9bf5786a5cdb..43c6c29b916f 100644
--- a/frontend/public/style/_common.scss
+++ b/frontend/public/style/_common.scss
@@ -259,15 +259,14 @@
 // append external-link icon to <a> so that it doesn't wrap without text
 // there must be no white space between the text and the closing </a> tag holding the pseudo element
 .co-external-link:after {
-  content: "\f08e";
-  display:inline-block;
-  font-family: 'FontAwesome';
+  @include font-awesome-free-solid;
+  content: fa-content($fa-var-external-link-alt);
   font-size: 75%;
   height: 16px;
-  position:relative;
   margin-left: 3px;
   margin-right: -15px; // width + margin-left
-  top:0;
+  position: relative;
+  top: 0;
   width: 12px;
   .pf-c-dropdown__menu-item & {
     color: $color-pf-black-600;
@@ -287,6 +286,12 @@
   display: block;
 }
 
+.co-icon-flex-child {
+  flex: 0 0 auto;
+  position: relative;
+  top: 0.125em;
+}
+
 .co-toolbar {
   align-items: stretch;
   display: flex;
@@ -397,7 +402,7 @@
   max-width: 600px;
 }
 
-// Enable word-break and append pficon-var-edit icon ::after so that it doesn't wrap without text
+// Enable word-break and append pencil icon ::after so that it doesn't wrap without text
 .co-modal-btn-link {
   outline: none;
   padding: 0 20px 0 0;
@@ -405,10 +410,9 @@
   word-break: break-all; // Firefox
   word-break: break-word;
   &::after {
+    @include font-awesome-free-solid;
     color: $color-pf-black-600;
-    content: $pficon-var-edit;
-    display: inline-block;
-    font-family: $icon-font-name-pf;
+    content: fa-content($fa-var-pencil-alt);
     line-height: 1;
     margin-left: 5px;
     margin-right: -20px; // width + margin-left
diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
index 46932370f9ec..0ffbe7010966 100644
--- a/frontend/public/style/_overrides.scss
+++ b/frontend/public/style/_overrides.scss
@@ -20,6 +20,11 @@ $pf-4-nav-bar-height: 76px; // Height of the PatternFly 4 masthead
   margin-bottom: 0;
   padding-bottom: 12px;
   padding-top: 25px;
+  > li + li:before {
+    @include font-awesome-free-solid;
+    content: fa-content($fa-var-angle-right);
+    font-size: 12px;
+  }
 }
 
 // account for collapsing space between .btn
diff --git a/frontend/public/style/_status.scss b/frontend/public/style/_status.scss
deleted file mode 100644
index fd7b5184e4f4..000000000000
--- a/frontend/public/style/_status.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.co-m-status {
-  text-align: right;
-}
-
-.co-m-status__icon {
-  padding-right: 5px;
-}
-
-.co-m-status--critical {
-  color: $color-pf-red-200 ;
-}
-
-.co-m-status--ok {
-  color: $color-pf-green;
-}
-
-.co-m-status--warning {
-  color: $color-pf-orange;
-}
-
-.co-m-status--unknown {
-  color: $color-pf-black-600;
-}
-
-.co-m-status--access-denied {
-  color: $color-pf-black-600;
-}
diff --git a/frontend/public/style/_vars.scss b/frontend/public/style/_vars.scss
index 82a6cd4f400e..ef243c1ce136 100644
--- a/frontend/public/style/_vars.scss
+++ b/frontend/public/style/_vars.scss
@@ -2,7 +2,6 @@
 
 // Root path where you plan to host console.
 $consoleWebDistPath: './';
-$consoleWebFontPath: $consoleWebDistPath + 'fonts';
 
 // PatternFly color variables -- imported here so they can be used throughout
 // PF3 color variables
@@ -16,17 +15,13 @@ $consoleWebFontPath: $consoleWebDistPath + 'fonts';
 // == Overrides of external dependency variables
 
 // FontAwesome font path.
-$fa-font-path: $consoleWebFontPath;
+$fa-font-path: $consoleWebDistPath + '/';
 // Use PatternFly 4 font family in PatternFly 3.
 $font-family-base: var(--pf-global--FontFamily--sans-serif);
-// PatternFly 3 font path for PatternFly 3 icons.
-$font-path: '~patternfly/dist/fonts/';
 // Patternfly 3 defaults to 12px, which is too small in many cases.
 $font-size-base: 14px;
 // Patternfly 3 defaults to 40px, which leaves a lot more whitespace than we're used to.
 $grid-gutter-width: 30px;
-// Bootstrap font path.
-$icon-font-path: $consoleWebFontPath + '/';
 $kbd-bg: transparent;
 $kbd-color: $color-pf-black-600;
 // Disable PatternFly 4 reset.
diff --git a/frontend/public/style/mixin/_font-awesome.scss b/frontend/public/style/mixin/_font-awesome.scss
new file mode 100644
index 000000000000..ee9d357fc006
--- /dev/null
+++ b/frontend/public/style/mixin/_font-awesome.scss
@@ -0,0 +1,9 @@
+@mixin font-awesome-free-solid {
+  display: inline-block;
+  font-family: "Font Awesome 5 Free";
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 900;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/frontend/public/vendor.scss b/frontend/public/vendor.scss
index f32953b1e772..32955cfa35b6 100644
--- a/frontend/public/vendor.scss
+++ b/frontend/public/vendor.scss
@@ -3,7 +3,8 @@
 
 // External dependencies (tilde tells Webpack not to use relative path). Seperate SCSS entrypoint here because some modules break sourcemaps.
 @import "~openshift-logos-icon/style";
-@import "~font-awesome/scss/font-awesome";  // Including this file breaks sourcemaps
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/solid";
 @import '~patternfly/dist/sass/patternfly/variables';
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@@ -30,7 +31,6 @@
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
 @import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
 @import "~patternfly/dist/sass/patternfly/mixins";  // Including this file breaks sourcemaps
-@import '~patternfly/dist/sass/patternfly/icons';  // Including this file breaks sourcemaps
 @import '~patternfly/dist/sass/patternfly/type';
 @import '~patternfly/dist/sass/patternfly/buttons';
 @import '~patternfly/dist/sass/patternfly/dropdowns';
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b216bf7c7266..9b15a105d9bb 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -112,6 +112,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz#c0d8f073a5116b2de0a2c8a7aba66093a6956ce7"
   integrity sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q==
 
+"@fortawesome/fontawesome-free@^5.9.0":
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.9.0.tgz#1aa5c59efb1b8c6eb6277d1e3e8c8f31998b8c8e"
+  integrity sha512-g795BBEzM/Hq2SYNPm/NQTIp3IWd4eXSH0ds87Na2jnrAUFX3wkyZAI4Gwj9DOaWMuz2/01i8oWI7P7T/XLkhg==
+
 "@fortawesome/free-brands-svg-icons@^5.8.1":
   version "5.8.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz#e68a509c986d5d197cc5bd9ae8d966eff513468d"
@@ -5233,7 +5238,7 @@ font-awesome-sass@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome-sass/-/font-awesome-sass-4.7.0.tgz#4eda693e915009ce00b228e0964dc5eca9bc34e1"
 
-font-awesome@4.7.x, font-awesome@^4.7.0:
+font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"