diff --git a/webpack/components/AnsibleRolesSwitcher/components/AnsiblePermissionDenied.js b/webpack/components/AnsibleRolesSwitcher/components/AnsiblePermissionDenied.js
index 8523fe24..34eae0cd 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AnsiblePermissionDenied.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AnsiblePermissionDenied.js
@@ -22,7 +22,6 @@ const AnsiblePermissionDenied = props => {
 
   return (
     <EmptyState
-      iconType="fa"
       icon="lock"
       header={__('Permission Denied')}
       description={description}
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.test.js b/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.test.js
index 91080ba5..54695054 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.test.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.test.js
@@ -7,19 +7,19 @@ const noop = () => {};
 const fixtures = {
   'should render a role to add': {
     role: { name: 'test.role', id: 5 },
-    icon: 'fa fa-plus-circle',
+    icon: 'plus-circle',
     onClick: noop,
     index: 0,
   },
   'should render a role to remove': {
     role: { name: 'test.role', id: 5 },
-    icon: 'fa fa-minus-circle',
+    icon: 'minus-circle',
     onClick: noop,
     index: 0,
   },
   'should render inherited role to remove': {
     role: { name: 'test.role', id: 5, inherited: true },
-    icon: 'fa fa-minus-circle',
+    icon: 'minus-circle',
     onClick: noop,
     index: 0,
   },
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleActionButton.js b/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleActionButton.js
index 77f720f6..45338b85 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleActionButton.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AnsibleRoleActionButton.js
@@ -1,13 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Icon } from 'patternfly-react';
+import { Icon } from '@patternfly/react-core';
+import { PlusCircleIcon, MinusCircleIcon } from '@patternfly/react-icons';
 
-const AnsibleRoleActionButton = ({ icon }) => (
-  <button href="#" className="role-add-remove-btn">
-    <Icon className="fa-2x" type="fa" name={icon} />
-  </button>
-);
+const iconMap = {
+  'plus-circle': PlusCircleIcon,
+  'minus-circle': MinusCircleIcon,
+};
+
+const AnsibleRoleActionButton = ({ icon }) => {
+  const IconComponent = iconMap[icon] || PlusCircleIcon;
+
+  return (
+    <button href="#" className="role-add-remove-btn">
+      <Icon size="2xl">
+        <IconComponent />
+      </Icon>
+    </button>
+  );
+};
 
 AnsibleRoleActionButton.propTypes = {
   icon: PropTypes.string.isRequired,
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AssignedRolesList.js b/webpack/components/AnsibleRolesSwitcher/components/AssignedRolesList.js
index 2913f741..8b9f5f68 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AssignedRolesList.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AssignedRolesList.js
@@ -42,7 +42,7 @@ const AssignedRolesList = ({
       key={role.id}
       role={role}
       index={idx}
-      icon="fa fa-minus-circle"
+      icon="minus-circle"
       onClick={onRemoveRole}
       resourceName={resourceName}
     />
@@ -54,7 +54,7 @@ const AssignedRolesList = ({
       role={role}
       index={idx}
       moveValue={moveValue}
-      icon="fa fa-minus-circle"
+      icon="minus-circle"
       onClick={onRemoveRole}
       resourceName={resourceName}
     />
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js b/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
index 3bbc4691..928d34b9 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
+++ b/webpack/components/AnsibleRolesSwitcher/components/AvailableRolesList.js
@@ -29,7 +29,7 @@ const AvailableRolesList = ({
         <AnsibleRole
           key={role.id}
           role={role}
-          icon="fa fa-plus-circle"
+          icon="plus-circle"
           onClick={onAddRole}
           index={index}
         />
diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsiblePermissionDenied.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsiblePermissionDenied.test.js.snap
index 2f17d251..5fffddae 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsiblePermissionDenied.test.js.snap
+++ b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsiblePermissionDenied.test.js.snap
@@ -22,7 +22,7 @@ exports[`AnsiblePermissionDenied should render 1`] = `
   }
   header="Permission Denied"
   icon="lock"
-  iconType="fa"
   secondaryActions={Array []}
+  variant="xl"
 />
 `;
diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap
index b3c52b81..bc85ea69 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap
+++ b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap
@@ -4,7 +4,7 @@ exports[`AnsibleRole should render a role to add 1`] = `
 <ListViewItem
   actions={
     <AnsibleRoleActionButton
-      icon="fa fa-plus-circle"
+      icon="plus-circle"
       role={
         Object {
           "id": 5,
@@ -36,7 +36,7 @@ exports[`AnsibleRole should render a role to remove 1`] = `
 <ListViewItem
   actions={
     <AnsibleRoleActionButton
-      icon="fa fa-minus-circle"
+      icon="minus-circle"
       role={
         Object {
           "id": 5,
diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AssignedRolesList.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AssignedRolesList.test.js.snap
index 29362840..9183d797 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AssignedRolesList.test.js.snap
+++ b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AssignedRolesList.test.js.snap
@@ -8,7 +8,7 @@ exports[`AssignedRolesList should render 1`] = `
     className=""
   >
     <DropTarget(DragSource(Orderable(AnsibleRole)))
-      icon="fa fa-minus-circle"
+      icon="minus-circle"
       index={0}
       key="1"
       moveValue={[Function]}
@@ -22,7 +22,7 @@ exports[`AssignedRolesList should render 1`] = `
       }
     />
     <DropTarget(DragSource(Orderable(AnsibleRole)))
-      icon="fa fa-minus-circle"
+      icon="minus-circle"
       index={1}
       key="2"
       moveValue={[Function]}
diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
index ed752cf4..7b5e5642 100644
--- a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
+++ b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AvailableRolesList.test.js.snap
@@ -28,7 +28,7 @@ exports[`AvailableRolesList should render 1`] = `
     timeout={300}
   >
     <AnsibleRole
-      icon="fa fa-plus-circle"
+      icon="plus-circle"
       index={0}
       key="1"
       onClick={[Function]}
@@ -41,7 +41,7 @@ exports[`AvailableRolesList should render 1`] = `
       }
     />
     <AnsibleRole
-      icon="fa fa-plus-circle"
+      icon="plus-circle"
       index={1}
       key="2"
       onClick={[Function]}