diff --git a/package-lock.json b/package-lock.json
index 2df6b36851..ea06117091 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,11 +17,6 @@
         "@edx/frontend-enterprise-utils": "3.2.0",
         "@edx/frontend-platform": "4.0.1",
         "@edx/paragon": "20.39.2",
-        "@fortawesome/fontawesome-svg-core": "1.2.35",
-        "@fortawesome/free-brands-svg-icons": "5.15.3",
-        "@fortawesome/free-regular-svg-icons": "5.15.3",
-        "@fortawesome/free-solid-svg-icons": "5.15.3",
-        "@fortawesome/react-fontawesome": "0.1.14",
         "algoliasearch": "4.8.3",
         "axios-mock-adapter": "1.19.0",
         "classnames": "2.2.6",
@@ -3994,6 +3989,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
       "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
       "hasInstallScript": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4003,30 +3999,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
       "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
       "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
-      "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.35"
       },
@@ -4039,6 +4012,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
       "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "^0.2.35"
       },
@@ -4050,6 +4024,7 @@
       "version": "0.1.14",
       "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
       "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "peer": true,
       "dependencies": {
         "prop-types": "^15.7.2"
       },
diff --git a/package.json b/package.json
index 87ddae89d0..c358cbf26d 100644
--- a/package.json
+++ b/package.json
@@ -33,11 +33,6 @@
     "@edx/frontend-enterprise-utils": "3.2.0",
     "@edx/frontend-platform": "4.0.1",
     "@edx/paragon": "20.39.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
     "algoliasearch": "4.8.3",
     "axios-mock-adapter": "1.19.0",
     "classnames": "2.2.6",
diff --git a/src/components/Admin/AdminCards.jsx b/src/components/Admin/AdminCards.jsx
index d1afe4ac95..b367dff596 100644
--- a/src/components/Admin/AdminCards.jsx
+++ b/src/components/Admin/AdminCards.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Award, Check, Groups, RemoveRedEye,
+} from '@edx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 
@@ -17,7 +20,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.registeredLearners',
           defaultMessage: 'total number of learners registered',
         }),
-        iconClassName: 'fa fa-users',
+        icon: Groups,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.registeredUnenrolledLearners',
@@ -32,7 +35,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.enrolledOneCourse',
           defaultMessage: 'learners enrolled in at least one course',
         }),
-        iconClassName: 'fa fa-check',
+        icon: Check,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.enrolledLearners',
@@ -53,7 +56,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.activeLearnersPastWeek',
           defaultMessage: 'active learners in the past week',
         }),
-        iconClassName: 'fa fa-eye',
+        icon: RemoveRedEye,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.learnersActiveWeek',
@@ -77,7 +80,7 @@ class AdminCards extends React.Component {
       courseCompletions: {
         ref: React.createRef(),
         description: 'course completions',
-        iconClassName: 'fa fa-trophy',
+        icon: Award,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.completedLearners',
@@ -107,7 +110,7 @@ class AdminCards extends React.Component {
           id={cardKey}
           title={title}
           description={card.description}
-          iconClassName={card.iconClassName}
+          icon={card.icon}
           detailActions={card.actions}
         />
       </div>
diff --git a/src/components/Admin/AdminSearchForm.jsx b/src/components/Admin/AdminSearchForm.jsx
index 953929321e..3fcec0a454 100644
--- a/src/components/Admin/AdminSearchForm.jsx
+++ b/src/components/Admin/AdminSearchForm.jsx
@@ -2,9 +2,9 @@
 import React from 'react';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { Form } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
@@ -80,7 +80,7 @@ class AdminSearchForm extends React.Component {
                 <Form.Label className="search-label mb-2">
                   Filter by start date
                   <IconWithTooltip
-                    icon={faInfoCircle}
+                    icon={Info}
                     altText="More information"
                     tooltipText="A start date can be selected after the course name is selected."
                   />
diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
index 13fb8a3fa2..fd763719cf 100644
--- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap
+++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap
@@ -219,10 +219,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon25"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -256,14 +270,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon26"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -312,10 +340,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon27"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -349,14 +391,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon28"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -421,10 +477,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon29"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -458,14 +528,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon30"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -546,10 +630,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon31"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -583,14 +681,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon32"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -682,10 +794,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon33"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -724,11 +850,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon34"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -798,10 +932,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon75"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -835,14 +983,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon76"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -891,10 +1053,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon77"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -928,14 +1104,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon78"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1000,10 +1190,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon79"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1037,14 +1241,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon80"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1125,10 +1343,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon81"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1162,14 +1394,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon82"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1261,10 +1507,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon83"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -1303,11 +1563,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon84"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -1377,10 +1645,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon85"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1414,14 +1696,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon86"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1470,10 +1766,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon87"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1507,14 +1817,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon88"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1579,10 +1903,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon89"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1616,14 +1954,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon90"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1704,10 +2056,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon91"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1741,14 +2107,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon92"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -1840,10 +2220,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon93"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -1886,11 +2280,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon94"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -1960,10 +2362,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon95"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -1997,14 +2413,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon96"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2053,10 +2483,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon97"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2090,14 +2534,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon98"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2162,10 +2620,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon99"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2199,14 +2671,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon100"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2287,10 +2773,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon101"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2324,14 +2824,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon102"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2451,11 +2965,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon103"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download full report (CSV)
             </button>
           </div>
@@ -2477,7 +2999,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field104"
+                    htmlFor="form-field6"
                   >
                     Filter by course
                   </label>
@@ -2486,7 +3008,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   >
                     <select
                       className="form-control"
-                      id="form-field104"
+                      id="form-field6"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -2508,31 +3030,33 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field105"
+                    htmlFor="form-field7"
                   >
                     Filter by start date
-                    <svg
+                    <span
                       alt="More information"
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-info-circle fa-w-16 ml-1"
-                      data-icon="info-circle"
-                      data-prefix="fas"
-                      focusable="false"
+                      className="pgn__icon ml-1"
                       onBlur={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
                   </label>
                   <div
                     className="pgn__form-control-decorator-group w-100"
@@ -2540,7 +3064,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                     <select
                       className="form-control"
                       disabled={true}
-                      id="form-field105"
+                      id="form-field7"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -2575,7 +3099,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                   >
                     <label
                       className="m-0"
-                      htmlFor="pgn-searchfield-input-106"
+                      htmlFor="pgn-searchfield-input-8"
                     >
                       <span
                         className="sr-only"
@@ -2587,7 +3111,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
                       className="form-control"
                       data-hj-suppress={true}
                       disabled={false}
-                      id="pgn-searchfield-input-106"
+                      id="pgn-searchfield-input-8"
                       name="searchfield-input"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -2698,10 +3222,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon1"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2735,14 +3273,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon2"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2791,10 +3343,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon3"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2828,14 +3394,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon4"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -2900,10 +3480,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon5"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -2937,14 +3531,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon6"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3025,10 +3633,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon7"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3062,14 +3684,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon8"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3189,11 +3825,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon9"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download full report (CSV)
             </button>
           </div>
@@ -3215,7 +3859,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field10"
+                    htmlFor="form-field1"
                   >
                     Filter by course
                   </label>
@@ -3224,7 +3868,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   >
                     <select
                       className="form-control"
-                      id="form-field10"
+                      id="form-field1"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -3246,31 +3890,33 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                 >
                   <label
                     className="pgn__form-label search-label mb-2"
-                    htmlFor="form-field11"
+                    htmlFor="form-field2"
                   >
                     Filter by start date
-                    <svg
+                    <span
                       alt="More information"
-                      aria-hidden="true"
-                      className="svg-inline--fa fa-info-circle fa-w-16 ml-1"
-                      data-icon="info-circle"
-                      data-prefix="fas"
-                      focusable="false"
+                      className="pgn__icon ml-1"
                       onBlur={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
-                      role="img"
-                      style={Object {}}
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                        fill="currentColor"
-                        style={Object {}}
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
                   </label>
                   <div
                     className="pgn__form-control-decorator-group w-100"
@@ -3278,7 +3924,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                     <select
                       className="form-control"
                       disabled={true}
-                      id="form-field11"
+                      id="form-field2"
                       onBlur={[Function]}
                       onChange={[Function]}
                       value=""
@@ -3313,7 +3959,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                   >
                     <label
                       className="m-0"
-                      htmlFor="pgn-searchfield-input-12"
+                      htmlFor="pgn-searchfield-input-3"
                     >
                       <span
                         className="sr-only"
@@ -3325,7 +3971,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
                       className="form-control"
                       data-hj-suppress={true}
                       disabled={false}
-                      id="pgn-searchfield-input-12"
+                      id="pgn-searchfield-input-3"
                       name="searchfield-input"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -3436,10 +4082,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon65"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3473,14 +4133,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon66"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3529,10 +4203,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon67"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3566,14 +4254,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon68"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3638,10 +4340,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon69"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3675,14 +4391,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon70"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3763,10 +4493,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon71"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -3800,14 +4544,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon72"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -3899,10 +4657,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon73"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -3945,11 +4717,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon74"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -4019,10 +4799,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon55"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4056,14 +4850,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon56"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4112,10 +4920,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon57"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4149,14 +4971,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon58"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4221,10 +5057,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon59"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4258,14 +5108,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon60"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4346,10 +5210,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon61"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4383,14 +5261,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon62"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4482,10 +5374,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon63"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -4528,11 +5434,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon64"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -4602,10 +5516,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon35"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4639,14 +5567,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon36"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4695,10 +5637,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon37"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4732,14 +5688,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon38"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4804,10 +5774,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon39"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4841,14 +5825,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon40"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -4929,10 +5927,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon41"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -4966,14 +5978,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon42"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5065,10 +6091,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon43"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -5111,11 +6151,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon44"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -5185,10 +6233,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon15"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5222,14 +6284,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon16"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5278,10 +6354,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon17"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5315,14 +6405,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon18"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5387,10 +6491,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon19"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5424,14 +6542,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon20"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5512,10 +6644,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon21"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5549,14 +6695,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon22"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5648,10 +6808,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon23"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -5690,11 +6864,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon24"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
@@ -5764,10 +6946,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   3
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-users"
-                  id="Icon45"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5801,14 +6997,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon46"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5857,10 +7067,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-check"
-                  id="Icon47"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -5894,14 +7118,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon48"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -5966,10 +7204,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-eye"
-                  id="Icon49"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -6003,14 +7255,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon50"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -6091,10 +7357,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   1
                 </span>
                 <span
-                  aria-hidden={true}
-                  className="d-flex align-items-center justify-content-center fa fa-trophy"
-                  id="Icon51"
-                />
+                  className="pgn__icon d-flex align-items-center justify-content-center"
+                >
+                  <svg
+                    aria-hidden={true}
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width={24}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
               </h3>
               <p
                 className="card-text"
@@ -6128,14 +7408,28 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
                   </div>
                   <div>
                     <span
-                      aria-hidden={true}
-                      className="fa fa-caret-down"
-                      id="Icon52"
-                    />
-                    <span
-                      className="sr-only"
+                      className="pgn__icon"
                     >
-                      Show details
+                      <svg
+                        aria-hidden={true}
+                        fill="none"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5H7z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                      <span
+                        className="sr-only"
+                      >
+                        Show details
+                      </span>
                     </span>
                   </div>
                 </div>
@@ -6227,10 +7521,24 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
               onClick={[Function]}
             >
               <span
-                aria-hidden={true}
-                className="fa fa-undo mr-2"
-                id="Icon53"
-              />
+                className="pgn__icon mr-2"
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
               Reset to 
               Full Report
             </a>
@@ -6273,11 +7581,19 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
               onClick={[Function]}
               type="button"
             >
-              <span
-                aria-hidden={true}
-                className="fa mr-2 fa-download"
-                id="Icon54"
-              />
+              <svg
+                className="mr-2"
+                fill="none"
+                height={24}
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                  fill="currentColor"
+                />
+              </svg>
               Download current report (CSV)
             </button>
           </div>
diff --git a/src/components/Admin/index.jsx b/src/components/Admin/index.jsx
index 4f95e3e94a..45db4b5059 100644
--- a/src/components/Admin/index.jsx
+++ b/src/components/Admin/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { Alert, Icon } from '@edx/paragon';
-import { Error } from '@edx/paragon/icons';
+import { Error, Undo } from '@edx/paragon/icons';
 import { Link } from 'react-router-dom';
 
 import Hero from '../Hero';
@@ -225,7 +225,7 @@ class Admin extends React.Component {
 
     return (
       <Link to={path} className="btn btn-sm btn-outline-primary ml-0 ml-md-3 mr-3">
-        <Icon className="fa fa-undo mr-2" />
+        <Icon src={Undo} className="mr-2" />
         Reset to {this.getMetadataForAction().title}
       </Link>
     );
@@ -242,7 +242,7 @@ class Admin extends React.Component {
     const resetLink = resetQuery ? `${pathname}?${resetQuery}` : pathname;
     return (
       <Link id="reset-filters" to={resetLink} className="btn btn-sm btn-outline-primary">
-        <Icon className="fa fa-undo mr-2" />
+        <Icon src={Undo} className="mr-2" />
         Reset Filters
       </Link>
     );
diff --git a/src/components/CodeAssignmentModal/constants.jsx b/src/components/CodeAssignmentModal/constants.jsx
index 995adefa65..a1f427ebd1 100644
--- a/src/components/CodeAssignmentModal/constants.jsx
+++ b/src/components/CodeAssignmentModal/constants.jsx
@@ -1,4 +1,4 @@
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 import { MODAL_TYPES } from '../EmailTemplateForm/constants';
 import { getTemplateEmailFields } from '../EmailTemplateForm';
 import CheckboxWithTooltip from '../ReduxFormCheckbox/CheckboxWithTooltip';
@@ -20,7 +20,7 @@ export const getAssignmentModalFields = formatMessage => {
       id: EMAIL_TEMPLATE_NUDGE_EMAIL_ID,
       component: CheckboxWithTooltip,
       className: 'auto-reminder-wrapper',
-      icon: faInfoCircle,
+      icon: Info,
       altText: formatMessage(messages.modalAltText),
       tooltipText: formatMessage(messages.modalTooltipText),
       label: formatMessage(messages.modalFieldLabel),
diff --git a/src/components/CodeAssignmentModal/index.jsx b/src/components/CodeAssignmentModal/index.jsx
index e492fef0b2..270411d242 100644
--- a/src/components/CodeAssignmentModal/index.jsx
+++ b/src/components/CodeAssignmentModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal, Form,
+  Button, Modal, Form, Spinner,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -418,7 +418,7 @@ export class BaseCodeAssignmentModal extends React.Component {
             data-testid={SUBMIT_BUTTON_TEST_ID}
           >
             <>
-              {mode === MODAL_TYPES.assign && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+              {mode === MODAL_TYPES.assign && submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
               {`Assign ${isBulkAssign ? 'Codes' : 'Code'}`}
             </>
           </Button>,
diff --git a/src/components/CodeManagement/ManageCodesTab.jsx b/src/components/CodeManagement/ManageCodesTab.jsx
index 23f4dd7195..1e7e3cb61e 100644
--- a/src/components/CodeManagement/ManageCodesTab.jsx
+++ b/src/components/CodeManagement/ManageCodesTab.jsx
@@ -9,7 +9,9 @@ import {
   Icon,
   Pagination,
 } from '@edx/paragon';
-import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
+import {
+  CheckCircle, Info, Plus, SpinnerIcon, WarningFilled,
+} from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import CodeSearchResults from '../CodeSearchResults';
@@ -277,7 +279,7 @@ class ManageCodesTab extends React.Component {
               disabled={loading}
             >
               <>
-                <Icon className="fa fa-refresh mr-2" />
+                <Icon data-testid="refresh-data" className="mr-2" src={SpinnerIcon} />
                 Refresh data
               </>
             </Button>
@@ -286,7 +288,7 @@ class ManageCodesTab extends React.Component {
               to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.codeManagement}/request-codes`}
             >
               <>
-                <Icon className="fa fa-plus mr-2" />
+                <Icon src={Plus} />
                 Request more codes
               </>
             </Link>
diff --git a/src/components/CodeManagement/tests/ManageCodesTab.test.jsx b/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
index ea08c4cf96..2e8451de7a 100644
--- a/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
+++ b/src/components/CodeManagement/tests/ManageCodesTab.test.jsx
@@ -268,7 +268,7 @@ describe('ManageCodesTabWrapper', () => {
     const store = mockStore({ ...initialState });
     const wrapper = mount(<ManageCodesTabWrapper store={store} />);
     store.clearActions();
-    wrapper.find('.fa-refresh').hostNodes().simulate('click');
+    wrapper.find('[data-testid="refresh-data"]').hostNodes().simulate('click');
     expect(store.getActions().filter(action => action.type === COUPONS_REQUEST)).toHaveLength(1);
   });
 
diff --git a/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap b/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
index 7e568a0fdc..13de3d3b8a 100644
--- a/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
+++ b/src/components/CodeManagement/tests/__snapshots__/ManageCodesTab.test.jsx.snap
@@ -91,10 +91,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon2"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -103,10 +118,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon3"
-        />
+          className="pgn__icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -201,7 +230,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-12"
+            htmlFor="pgn-searchfield-input-4"
           >
             <span
               className="sr-only"
@@ -213,7 +242,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-12"
+            id="pgn-searchfield-input-4"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -266,10 +295,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon13"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -278,10 +322,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon14"
-        />
+          className="pgn__icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -381,7 +439,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-9"
+            htmlFor="pgn-searchfield-input-3"
           >
             <span
               className="sr-only"
@@ -393,7 +451,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-9"
+            id="pgn-searchfield-input-3"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -446,10 +504,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon10"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -458,10 +531,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon11"
-        />
+          className="pgn__icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -529,7 +616,7 @@ Array [
         >
           <label
             className="m-0"
-            htmlFor="pgn-searchfield-input-4"
+            htmlFor="pgn-searchfield-input-2"
           >
             <span
               className="sr-only"
@@ -541,7 +628,7 @@ Array [
             className="form-control"
             data-hj-suppress={true}
             disabled={false}
-            id="pgn-searchfield-input-4"
+            id="pgn-searchfield-input-2"
             name="searchfield-input"
             onBlur={[Function]}
             onChange={[Function]}
@@ -594,10 +681,25 @@ Array [
         type="button"
       >
         <span
-          aria-hidden={true}
-          className="fa fa-refresh mr-2"
-          id="Icon5"
-        />
+          className="pgn__icon mr-2"
+          data-testid="refresh-data"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 01-2.8-.7l-1.46 1.46A7.93 7.93 0 0012 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0012 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Refresh data
       </button>
       <a
@@ -606,10 +708,24 @@ Array [
         onClick={[Function]}
       >
         <span
-          aria-hidden={true}
-          className="fa fa-plus mr-2"
-          id="Icon6"
-        />
+          className="pgn__icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
         Request more codes
       </a>
     </div>
@@ -733,14 +849,28 @@ Array [
             className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-chevron-down text-primary"
-              id="Icon7"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon d-inline-block text-primary"
             >
-              Open coupon details
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Open coupon details
+              </span>
             </span>
           </div>
         </div>
@@ -850,14 +980,28 @@ Array [
             className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-chevron-down text-primary"
-              id="Icon8"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon d-inline-block text-primary"
             >
-              Open coupon details
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Open coupon details
+              </span>
             </span>
           </div>
         </div>
diff --git a/src/components/CodeReminderModal/index.jsx b/src/components/CodeReminderModal/index.jsx
index fdd22cb562..4e4a1d41bd 100644
--- a/src/components/CodeReminderModal/index.jsx
+++ b/src/components/CodeReminderModal/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
-import { Button, Icon, Modal } from '@edx/paragon';
+import { Button, Modal, Spinner } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
@@ -229,7 +229,7 @@ export class BaseCodeReminderModal extends React.Component {
             className="code-remind-save-btn"
             onClick={handleSubmit(this.handleModalSubmit)}
           >
-            {mode === REMIND_MODE && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+            {mode === REMIND_MODE && submitting && <Spinner animation="border" variant="primary" size="sm" />}
             Remind
           </Button>,
           <SaveTemplateButton
diff --git a/src/components/CodeRevokeModal/index.jsx b/src/components/CodeRevokeModal/index.jsx
index 569cdea6f6..ee8806ebdf 100644
--- a/src/components/CodeRevokeModal/index.jsx
+++ b/src/components/CodeRevokeModal/index.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal,
+  Button, Modal, Spinner,
 } from '@edx/paragon';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
 
@@ -200,7 +200,7 @@ class CodeRevokeModal extends React.Component {
             label="Do not email"
             checked={doNotEmail}
             id="doNotEmailCheckbox"
-            icon={faInfoCircle}
+            icon={Info}
             altText="More information"
             tooltipText="By clicking this box, you can revoke this coupon code without emailing the learner."
             onChange={(event, newValue) => {
@@ -240,7 +240,7 @@ class CodeRevokeModal extends React.Component {
             className="code-revoke-save-btn"
             onClick={handleSubmit(this.handleModalSubmit)}
           >
-            {mode === MODAL_TYPES.revoke && submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+            {mode === MODAL_TYPES.revoke && submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
             Revoke
           </Button>,
           <SaveTemplateButton
diff --git a/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx b/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
index ca9924dfc3..8c3aaec2c3 100644
--- a/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
+++ b/src/components/CodeSearchResults/CodeSearchResultsHeading.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 const CodeSearchResultsHeading = ({ searchQuery, onClose }) => (
   <div className="d-flex align-items-center justify-content-between mb-3">
@@ -15,7 +16,7 @@ const CodeSearchResultsHeading = ({ searchQuery, onClose }) => (
         className="close-search-results-btn"
         onClick={onClose}
       >
-        <Icon className="fa fa-times mr-2" />
+        <Icon className="mr-2" src={Close} />
         Close search results
       </Button>
     </div>
diff --git a/src/components/CodeSearchResults/CodeSearchResultsTable.jsx b/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
index e43469218d..0ec6e533fc 100644
--- a/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
+++ b/src/components/CodeSearchResults/CodeSearchResultsTable.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import { withRouter } from 'react-router-dom';
 import { Icon } from '@edx/paragon';
+import { Check } from '@edx/paragon/icons';
 
 import { isValidEmail } from '../../utils';
 import TableContainer from '../../containers/TableContainer';
@@ -112,7 +113,7 @@ const CodeSearchResultsTable = ({
       couponName,
       code,
       isRedeemed: isRedeemed ? (
-        <Icon className="fa fa-check text-primary" screenReaderText="has been redeemed" />
+        <Icon className="text-primary" src={Check} screenReaderText="has been redeemed" />
       ) : defaultEmptyValue,
       courseTitle: courseTitle || defaultEmptyValue,
       assignedTo: assignedTo || defaultEmptyValue,
diff --git a/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap b/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
index 8395dc41f8..eb08be87a9 100644
--- a/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
+++ b/src/components/CodeSearchResults/__snapshots__/CodeSearchResults.test.jsx.snap
@@ -46,10 +46,24 @@ exports[`<CodeSearchResults /> basic rendering should render empty table data 1`
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon6"
-            />
+              className="pgn__icon mr-2"
+            >
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -138,10 +152,24 @@ exports[`<CodeSearchResults /> basic rendering should render error 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon7"
-            />
+              className="pgn__icon mr-2"
+            >
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -238,10 +266,24 @@ exports[`<CodeSearchResults /> basic rendering should render loading 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon1"
-            />
+              className="pgn__icon mr-2"
+            >
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -595,10 +637,24 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon2"
-            />
+              className="pgn__icon mr-2"
+            >
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
@@ -685,14 +741,28 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
                       scope={null}
                     >
                       <span
-                        aria-hidden={true}
-                        className="fa fa-check text-primary"
-                        id="Icon3"
-                      />
-                      <span
-                        className="sr-only"
+                        className="pgn__icon text-primary"
                       >
-                        has been redeemed
+                        <svg
+                          aria-hidden={true}
+                          fill="none"
+                          focusable={false}
+                          height={24}
+                          role="img"
+                          viewBox="0 0 24 24"
+                          width={24}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          className="sr-only"
+                        >
+                          has been redeemed
+                        </span>
                       </span>
                     </td>
                     <td
@@ -774,14 +844,28 @@ exports[`<CodeSearchResults /> basic rendering should render table data 1`] = `
                       scope={null}
                     >
                       <span
-                        aria-hidden={true}
-                        className="fa fa-check text-primary"
-                        id="Icon4"
-                      />
-                      <span
-                        className="sr-only"
+                        className="pgn__icon text-primary"
                       >
-                        has been redeemed
+                        <svg
+                          aria-hidden={true}
+                          fill="none"
+                          focusable={false}
+                          height={24}
+                          role="img"
+                          viewBox="0 0 24 24"
+                          width={24}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        <span
+                          className="sr-only"
+                        >
+                          has been redeemed
+                        </span>
                       </span>
                     </td>
                     <td
@@ -995,10 +1079,24 @@ exports[`<CodeSearchResults /> basic rendering should render table data when sea
             type="button"
           >
             <span
-              aria-hidden={true}
-              className="fa fa-times mr-2"
-              id="Icon5"
-            />
+              className="pgn__icon mr-2"
+            >
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
             Close search results
           </button>
         </div>
diff --git a/src/components/Coupon/_Coupon.scss b/src/components/Coupon/_Coupon.scss
index aba1b3bac7..8ddb98f2bb 100644
--- a/src/components/Coupon/_Coupon.scss
+++ b/src/components/Coupon/_Coupon.scss
@@ -63,3 +63,4 @@
     }
   }
 }
+
diff --git a/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap b/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
index 5d160b5109..434813392e 100644
--- a/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
+++ b/src/components/Coupon/__snapshots__/Coupon.test.jsx.snap
@@ -98,24 +98,52 @@ exports[`<Coupon /> renders correctly with error state 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-exclamation-circle text-danger mr-2"
-        id="Icon3"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon text-danger mr-2 d-inline-block"
       >
-        Coupon has an error.
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Coupon has an error.
+        </span>
       </span>
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon4"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
@@ -228,14 +256,28 @@ exports[`<Coupon /> renders correctly with max uses 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon1"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
@@ -343,14 +385,28 @@ exports[`<Coupon /> renders correctly without max uses 1`] = `
       className="icons col-lg-1 order-first order-lg-last text-right pr-2 mt-1 m-lg-0"
     >
       <span
-        aria-hidden={true}
-        className="fa fa-chevron-down text-primary"
-        id="Icon2"
-      />
-      <span
-        className="sr-only"
+        className="pgn__icon d-inline-block text-primary"
       >
-        Open coupon details
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="sr-only"
+        >
+          Open coupon details
+        </span>
       </span>
     </div>
   </div>
diff --git a/src/components/Coupon/index.jsx b/src/components/Coupon/index.jsx
index 45777efbf2..eee7eb0048 100644
--- a/src/components/Coupon/index.jsx
+++ b/src/components/Coupon/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Icon } from '@edx/paragon';
+import { Error, ExpandLess, ExpandMore } from '@edx/paragon/icons';
 
 import CouponDetails from '../../containers/CouponDetails';
 
@@ -83,12 +84,13 @@ class Coupon extends React.Component {
 
   renderExpandCollapseIcon() {
     const { isExpanded } = this.state;
-    const iconClass = isExpanded ? 'fa-chevron-up' : 'fa-chevron-down';
+    const icon = isExpanded ? ExpandLess : ExpandMore;
     const iconColor = isExpanded ? 'text-white' : 'text-primary';
     const screenReaderText = isExpanded ? 'Close' : 'Open';
     return (
       <Icon
-        className={classNames('fa', iconClass, iconColor)}
+        className={classNames('d-inline-block', iconColor)}
+        src={icon}
         screenReaderText={`${screenReaderText} coupon details`}
       />
     );
@@ -97,7 +99,8 @@ class Coupon extends React.Component {
   renderErrorIcon() {
     return (
       <Icon
-        className="fa fa-exclamation-circle text-danger mr-2"
+        className="text-danger mr-2 d-inline-block"
+        src={Error}
         screenReaderText="Coupon has an error."
       />
     );
diff --git a/src/components/CouponDetails/_CouponDetails.scss b/src/components/CouponDetails/_CouponDetails.scss
index e0d34ef342..78dd08ffba 100644
--- a/src/components/CouponDetails/_CouponDetails.scss
+++ b/src/components/CouponDetails/_CouponDetails.scss
@@ -58,27 +58,10 @@
         & + label {
           width: 15px;
 
-          &:before {
-            font-family: FontAwesome;
-            content: '\f096'; /* fa-square-o */
-            font-weight: normal;
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
 
-        &:checked + label:before {
-          content: '\f046'; /* fa-check-square-o */
         }
 
-        &.mixed + label:before {
-          content: '\f146'; /* fa-minus-square */
-        }
 
-        &:focus + label:before {
-          border-radius: 2px;
-          box-shadow: $input-btn-focus-box-shadow;
-        }
       }
     }
   }
diff --git a/src/components/CouponDetails/index.jsx b/src/components/CouponDetails/index.jsx
index fff0b0c661..5be165eea1 100644
--- a/src/components/CouponDetails/index.jsx
+++ b/src/components/CouponDetails/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
-  Alert, Button, CheckBox, Icon,
+  Alert, Button, Icon, Form,
 } from '@edx/paragon';
 import { CheckCircle, Error } from '@edx/paragon/icons';
 
@@ -242,16 +242,14 @@ class CouponDetails extends React.Component {
   getNewColumns(selectedToggle) {
     const selectColumn = {
       label: (
-        <CheckBox
+        <Form.Checkbox
           id="select-all-codes"
           name="select all codes"
-          label={
-            <div className="sr-only">{this.getSelectAllCheckBoxLabel()}</div>
-            }
-          onChange={(checked) => {
-            this.hasAllTableRowsSelected = checked;
-            this.handleSelectAllCodes(checked);
+          onChange={(event) => {
+            this.hasAllTableRowsSelected = event.target.checked;
+            this.handleSelectAllCodes(event.target.checked);
           }}
+          checked={this.hasAllTableRowsSelected}
           ref={this.selectAllCheckBoxRef}
         />
       ),
@@ -298,20 +296,6 @@ class CouponDetails extends React.Component {
     }));
   }
 
-  getSelectAllCheckBoxLabel = () => {
-    if (this.hasAllTableRowsSelected) {
-      return 'unselect all codes';
-    }
-    return 'select all codes';
-  };
-
-  getLabelForCodeCheckBox = (code) => {
-    if (this.selectedTableRows[code]) {
-      return `unselect code ${code}`;
-    }
-    return `select code ${code}`;
-  };
-
   reset() {
     this.resetModals();
     this.resetCodeActionStatus();
@@ -386,7 +370,7 @@ class CouponDetails extends React.Component {
     // TODO: Paragon now has an IndeterminateCheckbox that can be used here.
     const selectAllCheckBoxRef = selectColumn.label.ref && selectColumn.label.ref.current;
     const selectAllCheckBoxDOM = (
-      selectAllCheckBoxRef && document.getElementById(selectAllCheckBoxRef.props.id)
+      selectAllCheckBoxRef && document.getElementById(selectAllCheckBoxRef.props?.id)
     );
 
     if (selectAllCheckBoxDOM && hasPartialSelection) {
@@ -414,7 +398,7 @@ class CouponDetails extends React.Component {
       code: <span data-hj-suppress>{code.code}</span>,
       assigned_to: code.error ? (
         <span className="text-danger">
-          <Icon className="fa fa-exclamation-circle mr-2" screenReaderText="Error" />
+          <Icon className="mr-2" screenReaderText="Error" src={Error} />
           {code.error}
         </span>
       ) : code.assigned_to,
@@ -430,16 +414,13 @@ class CouponDetails extends React.Component {
         setModalState={this.setModalState}
       />,
       select: (
-        <CheckBox
+        <Form.Checkbox
           name={`select code ${code.code}`}
-          label={
-            <div className="sr-only">{this.getLabelForCodeCheckBox(code.code)}</div>
-          }
-          onChange={(checked) => {
-            this.handleCodeSelection({ checked, code });
-            if (checked && !this.selectedTableRows[code.code]) {
+          onChange={(event) => {
+            this.handleCodeSelection({ checked: event.target.checked, code });
+            if (event.target.checked && !this.selectedTableRows[code.code]) {
               this.selectedTableRows[code.code] = true;
-            } else if (!checked && this.selectedTableRows[code.code]) {
+            } else if (!event.target.checked && this.selectedTableRows[code.code]) {
               delete this.selectedTableRows[code.code];
             }
           }}
diff --git a/src/components/DownloadCsvButton/index.jsx b/src/components/DownloadCsvButton/index.jsx
index 702c37e7e8..caf3a856fd 100644
--- a/src/components/DownloadCsvButton/index.jsx
+++ b/src/components/DownloadCsvButton/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@edx/paragon';
+import { Button, Spinner } from '@edx/paragon';
+import { FileDownload } from '@edx/paragon/icons';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -22,7 +23,6 @@ class DownloadCsvButton extends React.Component {
       id,
     } = this.props;
 
-    const downloadButtonIconClasses = csvLoading ? ['fa-spinner', 'fa-spin'] : ['fa-download'];
     return (
       <Button
         variant="outline-primary"
@@ -36,7 +36,7 @@ class DownloadCsvButton extends React.Component {
         }}
       >
         <>
-          <Icon className={`fa mr-2 ${downloadButtonIconClasses.join(' ')}`} />
+          {csvLoading ? <Spinner animation="border" variant="primary" className="mr-2" size="sm" /> : <FileDownload className="mr-2" />}
           {buttonLabel || <FormattedMessage id="adminPortal.csv.download" defaultMessage="Download full report (CSV)" />}
         </>
       </Button>
diff --git a/src/components/FileInput/index.jsx b/src/components/FileInput/index.jsx
index 641fa16c9c..cc6b78dfe7 100644
--- a/src/components/FileInput/index.jsx
+++ b/src/components/FileInput/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { clearFields } from 'redux-form';
 import { Button, Icon, ValidationFormGroup } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 class FileInput extends React.Component {
   constructor(props) {
@@ -136,7 +137,7 @@ class FileInput extends React.Component {
                 this.setState({ fileName: null });
               }}
             >
-              <Icon className="fa fa-times mr-1" />
+              <Icon src={Close} className="mr-1" />
               Remove
             </Button>
           )}
diff --git a/src/components/IconWithTooltip/IconWithTooltip.test.jsx b/src/components/IconWithTooltip/IconWithTooltip.test.jsx
index c682c796fd..d262934538 100644
--- a/src/components/IconWithTooltip/IconWithTooltip.test.jsx
+++ b/src/components/IconWithTooltip/IconWithTooltip.test.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { Info } from '@edx/paragon/icons';
 import IconWithTooltip from './index';
 
 const defaultAltText = 'infoooo';
 const defaultTooltipText = 'Tooool';
 const DEFAULT_PROPS = {
-  icon: faInfoCircle,
+  icon: Info,
   altText: defaultAltText,
   tooltipText: defaultTooltipText,
 };
@@ -17,7 +17,7 @@ describe('<IconWithTooltip />', () => {
     global.innerWidth = 800;
     global.dispatchEvent(new Event('resize'));
     const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
-    expect(container.querySelector(`[data-icon=${faInfoCircle.iconName}]`)).toBeTruthy();
+    expect(container.querySelector('svg')).toBeTruthy();
   });
   [
     { windowSize: 800, expectedLocation: 'right' },
@@ -27,7 +27,7 @@ describe('<IconWithTooltip />', () => {
       global.innerWidth = data.windowSize;
       global.dispatchEvent(new Event('resize'));
       const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
-      const icon = container.querySelector(`[data-icon=${faInfoCircle.iconName}]`);
+      const icon = container.querySelector('svg');
       expect(icon).toBeTruthy();
 
       act(async () => {
diff --git a/src/components/IconWithTooltip/index.jsx b/src/components/IconWithTooltip/index.jsx
index 67c99fe4fb..4aa85455a8 100644
--- a/src/components/IconWithTooltip/index.jsx
+++ b/src/components/IconWithTooltip/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OverlayTrigger, Tooltip, useWindowSize } from '@edx/paragon';
+import {
+  Icon, OverlayTrigger, Tooltip, useWindowSize,
+} from '@edx/paragon';
 
 const IconWithTooltip = ({
   icon, altText, tooltipText, placementSm = 'right', placementLg = 'top', trigger = ['hover', 'focus'], breakpoint = 768, iconClassNames = 'ml-1',
@@ -19,13 +20,13 @@ const IconWithTooltip = ({
         </Tooltip>
       )}
     >
-      <FontAwesomeIcon className={iconClassNames} icon={icon} alt={altText} />
+      <Icon className={iconClassNames} src={icon} alt={altText} />
     </OverlayTrigger>
   );
 };
 
 IconWithTooltip.propTypes = {
-  icon: PropTypes.shape({}).isRequired,
+  icon: PropTypes.func.isRequired,
   altText: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired,
   // These props have defaults above
diff --git a/src/components/InviteLearnersModal/index.jsx b/src/components/InviteLearnersModal/index.jsx
index 1def540adb..89ee1e62d6 100644
--- a/src/components/InviteLearnersModal/index.jsx
+++ b/src/components/InviteLearnersModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Icon, Modal, Alert,
+  Button, Modal, Alert, Spinner,
 } from '@edx/paragon';
 import { Cancel as ErrorIcon } from '@edx/paragon/icons';
 
@@ -192,7 +192,7 @@ class InviteLearnersModal extends React.Component {
             onClick={handleSubmit(this.handleModalSubmit)}
           >
             <>
-              {submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+              {submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
               Invite learners
             </>
           </Button>,
diff --git a/src/components/MultipleFileInputField/MultipleFileInputField.jsx b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
index 86363bbaca..5e3419bfce 100644
--- a/src/components/MultipleFileInputField/MultipleFileInputField.jsx
+++ b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import {
   Form, FormControl, IconButton,
 } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 import classNames from 'classnames';
-import * as FontAwesome from '@fortawesome/free-solid-svg-icons/faTimes';
 import { getSizeInBytes, formatBytes } from './utils';
 import { MAX_FILES_SIZE, FILE_SIZE_EXCEEDS_ERROR } from './constants';
 
@@ -91,7 +91,7 @@ const MultipleFileInputField = ({
         inputValues?.map((e, i) => (
           <div className="border rounded p-1 m-1">
             <small>{`${e.name} - ${formatBytes(e.size)}`}</small>
-            <IconButton className="mr-2" icon={FontAwesome.faTimes} onClick={() => handleFileRemoveClick(i)} variant="danger" />
+            <IconButton className="mr-2" icon={Close} onClick={() => handleFileRemoveClick(i)} variant="danger" />
           </div>
         ))
       }
diff --git a/src/components/NumberCard/NumberCard.test.jsx b/src/components/NumberCard/NumberCard.test.jsx
index 042694244d..fff59a6746 100644
--- a/src/components/NumberCard/NumberCard.test.jsx
+++ b/src/components/NumberCard/NumberCard.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
+import { Groups } from '@edx/paragon/icons';
 
 import NumberCard from './index';
 
@@ -14,7 +15,7 @@ const NumberCardWrapper = props => (
       className="test-class"
       title={10}
       description="This describes the data!"
-      iconClassName="fa fa-users"
+      icon={Groups}
       {...props}
     />
   </MemoryRouter>
@@ -134,10 +135,9 @@ describe('<NumberCard />', () => {
           }]}
         />
       ));
-
       wrapper.setProps({ detailsExpanded: true });
       const action = getNumberCard(wrapper).find('.footer-body .btn-link').hostNodes().first();
-      expect(action.find('.fa-spinner').exists()).toBeTruthy();
+      expect(action.find('.ml-2').exists()).toBeTruthy();
     });
   });
 });
diff --git a/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap b/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
index 59b61ff6c0..415a2c1b3e 100644
--- a/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
+++ b/src/components/NumberCard/__snapshots__/NumberCard.test.jsx.snap
@@ -17,10 +17,24 @@ exports[`<NumberCard /> renders correctly with detail actions 1`] = `
           10
         </span>
         <span
-          aria-hidden={true}
-          className="d-flex align-items-center justify-content-center fa fa-users"
-          id="Icon2"
-        />
+          className="pgn__icon d-flex align-items-center justify-content-center"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </h3>
       <p
         className="card-text"
@@ -54,14 +68,28 @@ exports[`<NumberCard /> renders correctly with detail actions 1`] = `
           </div>
           <div>
             <span
-              aria-hidden={true}
-              className="fa fa-caret-down"
-              id="Icon3"
-            />
-            <span
-              className="sr-only"
+              className="pgn__icon"
             >
-              Show details
+              <svg
+                aria-hidden={true}
+                fill="none"
+                focusable={false}
+                height={24}
+                role="img"
+                viewBox="0 0 24 24"
+                width={24}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 10l5 5 5-5H7z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="sr-only"
+              >
+                Show details
+              </span>
             </span>
           </div>
         </div>
@@ -125,10 +153,24 @@ exports[`<NumberCard /> renders correctly without detail actions 1`] = `
           10
         </span>
         <span
-          aria-hidden={true}
-          className="d-flex align-items-center justify-content-center fa fa-users"
-          id="Icon1"
-        />
+          className="pgn__icon d-flex align-items-center justify-content-center"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58A2.01 2.01 0 000 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85A6.95 6.95 0 0020 14c-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
       </h3>
       <p
         className="card-text"
diff --git a/src/components/NumberCard/index.jsx b/src/components/NumberCard/index.jsx
index a177467bd5..2a4cfc2018 100644
--- a/src/components/NumberCard/index.jsx
+++ b/src/components/NumberCard/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@edx/paragon';
+import { Button, Icon, Spinner } from '@edx/paragon';
+import { ArrowDropDown, Close } from '@edx/paragon/icons';
 import { Link, withRouter } from 'react-router-dom';
 
 import { removeTrailingSlash, isTriggerKey } from '../../utils';
@@ -150,7 +151,7 @@ class NumberCard extends React.Component {
             {action.label}
           </span>
           {action.loading
-            && <Icon className="fa fa-spinner fa-spin ml-2" />}
+            && <Spinner animation="border" className="ml-2" variant="primary" size="sm" />}
         </div>
       </Link>
     ));
@@ -161,7 +162,7 @@ class NumberCard extends React.Component {
     const {
       className,
       title,
-      iconClassName,
+      icon,
       description,
       detailActions,
       id,
@@ -180,14 +181,14 @@ class NumberCard extends React.Component {
               <span>
                 {this.formatTitle(title)}
               </span>
-              {iconClassName && (
+              {icon && (
                 <Icon
                   className={
                     classNames(
                       'd-flex align-items-center justify-content-center',
-                      iconClassName,
                     )
                   }
+                  src={icon}
                 />
               )}
             </h3>
@@ -212,13 +213,7 @@ class NumberCard extends React.Component {
                   </div>
                   <div>
                     <Icon
-                      className={classNames(
-                        'fa',
-                        {
-                          'fa-caret-down': !detailsExpanded,
-                          'fa-close': detailsExpanded,
-                        },
-                      )}
+                      src={!detailsExpanded ? ArrowDropDown : Close}
                       screenReaderText={detailsExpanded
                         ? DETAILS_TEXT.expandedScreenReader : DETAILS_TEXT.unexpandedScreenReader}
                     />
@@ -246,7 +241,7 @@ class NumberCard extends React.Component {
 
 NumberCard.defaultProps = {
   className: null,
-  iconClassName: null,
+  icon: null,
   detailActions: null,
   detailsExpanded: false,
 };
@@ -256,7 +251,7 @@ NumberCard.propTypes = {
   description: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
-  iconClassName: PropTypes.string,
+  icon: PropTypes.func,
   detailActions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     loading: PropTypes.bool,
diff --git a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
index be577a2cfa..1473d8a47c 100644
--- a/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
+++ b/src/components/ReduxFormCheckbox/CheckboxWithTooltip.jsx
@@ -26,7 +26,7 @@ CheckboxWithTooltip.defaultProps = {
 CheckboxWithTooltip.propTypes = {
   className: PropTypes.string,
   // Icon should be a paragon icon
-  icon: PropTypes.shape().isRequired,
+  icon: PropTypes.func.isRequired,
   altText: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired,
 };
diff --git a/src/components/ReportingConfig/ReportingConfigForm.jsx b/src/components/ReportingConfig/ReportingConfigForm.jsx
index 4e662c6a11..09dadbe4e5 100644
--- a/src/components/ReportingConfig/ReportingConfigForm.jsx
+++ b/src/components/ReportingConfig/ReportingConfigForm.jsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 import {
-  ValidationFormGroup, Input, StatefulButton, Icon, Button,
+  ValidationFormGroup, Input, StatefulButton, Icon, Button, Spinner,
 } from '@edx/paragon';
+import { Check, Close, Download } from '@edx/paragon/icons';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import SFTPDeliveryMethodForm from './SFTPDeliveryMethodForm';
 import EmailDeliveryMethodForm from './EmailDeliveryMethodForm';
@@ -419,10 +420,10 @@ class ReportingConfigForm extends React.Component {
                 error: 'Error',
               }}
               icons={{
-                default: <Icon className="fa fa-download" />,
-                pending: <Icon className="fa fa-spinner fa-spin" />,
-                complete: <Icon className="fa fa-check" />,
-                error: <Icon className="fa fa-times" />,
+                default: <Icon src={Download} />,
+                pending: <Spinner animation="border" variant="light" size="sm" />,
+                complete: <Icon src={Check} />,
+                error: <Icon src={Close} />,
               }}
               disabledStates={[SUBMIT_STATES.PENDING]}
               className="ml-3 col"
@@ -434,7 +435,7 @@ class ReportingConfigForm extends React.Component {
               className="btn-outline-danger  mr-3"
               onClick={() => this.props.deleteConfig(config.uuid)}
             >
-              <Icon className="fa fa-times danger" /> Delete
+              <Icon src={Close} className="danger" /> Delete
             </Button>
           )}
         </div>
diff --git a/src/components/ReportingConfig/index.jsx b/src/components/ReportingConfig/index.jsx
index e34c1f17e3..f77748e903 100644
--- a/src/components/ReportingConfig/index.jsx
+++ b/src/components/ReportingConfig/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Collapsible, Icon } from '@edx/paragon';
+import { Check, Close } from '@edx/paragon/icons';
 import { camelCaseObject } from '@edx/frontend-platform';
 import EnterpriseCatalogApiService from '../../data/services/EnterpriseCatalogApiService';
 import LMSApiService from '../../data/services/LmsApiService';
@@ -142,9 +143,17 @@ class ReportingConfig extends React.Component {
                 className="shadow"
                 title={(
                   <div className="row justify-content-around flex-fill">
-                    <Icon
-                      className={`col-1 ${config.active ? ' fa fa-check text-success-300' : ' fa fa-times text-danger-300'}`}
-                    />
+                    {config.active ? (
+                      <Icon
+                        className="col-1 text-success-300"
+                        src={Check}
+                      />
+                    ) : (
+                      <Icon
+                        className="col-1 text-danger-300"
+                        src={Close}
+                      />
+                    )}
                     <div className="col">
                       <h3 className="h6">Report Type:</h3>
                       <p>{config.data_type}</p>
diff --git a/src/components/RequestCodesPage/RequestCodesForm.jsx b/src/components/RequestCodesPage/RequestCodesForm.jsx
index 50fdb226ce..fd46d99187 100644
--- a/src/components/RequestCodesPage/RequestCodesForm.jsx
+++ b/src/components/RequestCodesPage/RequestCodesForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Link, Redirect } from 'react-router-dom';
-import { Alert, Button, Icon } from '@edx/paragon';
+import { Alert, Button, Spinner } from '@edx/paragon';
 
 import RenderField from '../RenderField';
 
@@ -120,7 +120,7 @@ class RequestCodesForm extends React.Component {
                 className="btn-primary"
               >
                 <>
-                  {submitting && <Icon className="fa fa-spinner fa-spin mr-2" />}
+                  {submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
                   Request Codes
                 </>
               </Button>
diff --git a/src/components/SaveTemplateButton/index.jsx b/src/components/SaveTemplateButton/index.jsx
index afe95f763c..efcf854b81 100644
--- a/src/components/SaveTemplateButton/index.jsx
+++ b/src/components/SaveTemplateButton/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StatefulButton, Icon } from '@edx/paragon';
+import { StatefulButton, Icon, Spinner } from '@edx/paragon';
+import { CheckCircle } from '@edx/paragon/icons';
 import { SubmissionError } from 'redux-form';
 
 import { validateEmailTemplateFields } from '../../data/validation/email';
@@ -149,8 +150,8 @@ class SaveTemplateButton extends React.Component {
           complete: 'Template Saved',
         }}
         icons={{
-          pending: <Icon className="fa fa-spinner fa-spin" />,
-          complete: <Icon className="fa fa-check-circle" />,
+          pending: <Spinner animation="border" variant="primary" size="sm" />,
+          complete: <Icon src={CheckCircle} />,
         }}
         disabledStates={[SUBMIT_STATES.PENDING]}
         disabled={disabled}
diff --git a/src/components/Sidebar/IconLink.test.jsx b/src/components/Sidebar/IconLink.test.jsx
index 5108123617..e34f9aaf2a 100644
--- a/src/components/Sidebar/IconLink.test.jsx
+++ b/src/components/Sidebar/IconLink.test.jsx
@@ -3,8 +3,8 @@ import {
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUniversity } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from '@edx/paragon';
+import { School } from '@edx/paragon/icons';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
@@ -28,7 +28,7 @@ describe('<IconLink />', () => {
     const defaultProps = {
       title: 'Internal Route',
       to: 'admin/test',
-      icon: <FontAwesomeIcon icon={faUniversity} />,
+      icon: <Icon src={School} />,
     };
     render(<IconLinkWrapper {...defaultProps} />);
     expect(screen.getByText('Internal Route').closest('a')).toHaveAttribute('href', '/admin/test');
@@ -38,7 +38,7 @@ describe('<IconLink />', () => {
     const defaultProps = {
       title: 'External Route',
       to: 'http://helpcenter.edx.org/us',
-      icon: <FontAwesomeIcon icon={faUniversity} />,
+      icon: <Icon src={School} />,
       external: true,
     };
 
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index f0515898c5..5a78bf11e8 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -3,13 +3,10 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { faFile, faLifeRing } from '@fortawesome/free-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faCreditCard, faTags, faChartLine, faChartBar, faCog,
-} from '@fortawesome/free-solid-svg-icons';
 import { Icon } from '@edx/paragon';
-import { MoneyOutline, BookOpen } from '@edx/paragon/icons';
+import {
+  BookOpen, CreditCard, Description, InsertChartOutlined, MoneyOutline, Settings, Support, Tag, TrendingUp,
+} from '@edx/paragon/icons';
 
 import { getConfig } from '@edx/frontend-platform/config';
 import IconLink from './IconLink';
@@ -73,25 +70,25 @@ const Sidebar = ({
     {
       title: 'Learner Progress Report',
       to: `${baseUrl}/admin/${ROUTE_NAMES.learners}`,
-      icon: <FontAwesomeIcon icon={faChartLine} fixedWidth />,
+      icon: <Icon src={TrendingUp} fixedWidth />,
     },
     {
       title: 'Analytics',
       to: `${baseUrl}/admin/${ROUTE_NAMES.analytics}`,
-      icon: <FontAwesomeIcon icon={faChartBar} fixedWidth />,
+      icon: <Icon src={InsertChartOutlined} fixedWidth />,
       hidden: !features.ANALYTICS || !enableAnalyticsScreen,
     },
     {
       title: 'Code Management',
       to: `${baseUrl}/admin/${ROUTE_NAMES.codeManagement}`,
-      icon: <FontAwesomeIcon icon={faTags} fixedWidth />,
+      icon: <Icon src={Tag} fixedWidth />,
       hidden: !features.CODE_MANAGEMENT || !enableCodeManagementScreen,
       notification: !!subsidyRequestsCounts.couponCodes,
     },
     {
       title: 'Subscription Management',
       to: `${baseUrl}/admin/${ROUTE_NAMES.subscriptionManagement}`,
-      icon: <FontAwesomeIcon icon={faCreditCard} fixedWidth />,
+      icon: <Icon src={CreditCard} fixedWidth />,
       hidden: !enableSubscriptionManagementScreen,
       notification: !!subsidyRequestsCounts.subscriptionLicenses,
     },
@@ -112,20 +109,20 @@ const Sidebar = ({
     {
       title: 'Reporting Configurations',
       to: `${baseUrl}/admin/${ROUTE_NAMES.reporting}`,
-      icon: <FontAwesomeIcon icon={faFile} fixedWidth />,
+      icon: <Icon src={Description} fixedWidth />,
       hidden: !features.REPORTING_CONFIGURATIONS || !enableReportingConfigScreen,
     },
     {
       title: 'Settings',
       id: TOUR_TARGETS.SETTINGS_SIDEBAR,
       to: `${baseUrl}/admin/${ROUTE_NAMES.settings}`,
-      icon: <FontAwesomeIcon icon={faCog} fixedWidth />,
+      icon: <Icon src={Settings} fixedWidth />,
     },
     // NOTE: keep "Support" link the last nav item
     {
       title: 'Support',
       to: configuration.ENTERPRISE_SUPPORT_URL,
-      icon: <FontAwesomeIcon icon={faLifeRing} fixedWidth />,
+      icon: <Icon src={Support} fixedWidth />,
       hidden: !features.SUPPORT,
       external: true,
     },
diff --git a/src/components/subscriptions/SubscriptionDetails.jsx b/src/components/subscriptions/SubscriptionDetails.jsx
index 3ef662d0c2..a41fd63e2d 100644
--- a/src/components/subscriptions/SubscriptionDetails.jsx
+++ b/src/components/subscriptions/SubscriptionDetails.jsx
@@ -3,11 +3,10 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import dayjs from 'dayjs';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
 import {
-  Button, Row, Col, Toast,
+  Button, Row, Col, Toast, Icon,
 } from '@edx/paragon';
+import { ArrowBackIos } from '@edx/paragon/icons';
 
 import { SubscriptionDetailContext } from './SubscriptionDetailContextProvider';
 import InviteLearnersButton from './buttons/InviteLearnersButton';
@@ -38,7 +37,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
         <Row className="ml-0 mb-3">
           <Link to={backToSubscriptionsPath}>
             <Button variant="outline-primary">
-              <FontAwesomeIcon icon={faAngleLeft} className="mr-2" />
+              <Icon src={ArrowBackIos} className="mr-2" />
               Back to subscriptions
             </Button>
           </Link>
diff --git a/src/containers/CouponDetails/CouponDetails.test.jsx b/src/containers/CouponDetails/CouponDetails.test.jsx
index 0499565dbb..0c6038c94a 100644
--- a/src/containers/CouponDetails/CouponDetails.test.jsx
+++ b/src/containers/CouponDetails/CouponDetails.test.jsx
@@ -163,7 +163,7 @@ describe('CouponDetails container', () => {
 
   const selectAllCodesOnPage = ({ isSelected, expectedSelectionLength }) => {
     const selectAllCheckbox = wrapper.find('table th').find('input[type=\'checkbox\']');
-    selectAllCheckbox.simulate('change', { target: { value: isSelected } });
+    selectAllCheckbox.simulate('change', { target: { checked: isSelected } });
     expect(wrapper.find('CouponDetails').instance().state.selectedCodes).toHaveLength(expectedSelectionLength);
   };
 
@@ -594,8 +594,8 @@ describe('CouponDetails container', () => {
     it('handles individual code selection within table', () => {
       const checkboxes = wrapper.find('table').find('input[type=\'checkbox\']').slice(1);
 
-      checkboxes.first().simulate('change', { target: { value: true } });
-      checkboxes.last().simulate('change', { target: { value: true } });
+      checkboxes.first().simulate('change', { target: { checked: true } });
+      checkboxes.last().simulate('change', { target: { checked: true } });
 
       expect(wrapper.find('CouponDetails').instance().state.selectedCodes).toHaveLength(2);
 
diff --git a/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap b/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
index 33e4cd3f06..49c9024f3b 100644
--- a/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
+++ b/src/containers/Sidebar/__snapshots__/Sidebar.test.jsx.snap
@@ -31,23 +31,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw "
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -72,23 +75,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw "
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -113,23 +119,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw "
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -199,23 +208,26 @@ exports[`<Sidebar /> renders correctly 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw "
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -261,23 +273,26 @@ exports[`<Sidebar /> renders correctly when code management is hidden 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw "
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -347,23 +362,26 @@ exports[`<Sidebar /> renders correctly when code management is hidden 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw "
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span
               className="sr-only"
@@ -409,23 +427,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw mr-2"
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Learner Progress Report
@@ -448,23 +469,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw mr-2"
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Code Management
@@ -487,23 +511,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw mr-2"
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Subscription Management
@@ -569,23 +596,26 @@ exports[`<Sidebar /> renders correctly when expanded 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw mr-2"
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Settings
@@ -629,23 +659,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-chart-line fa-w-16 fa-fw mr-2"
-                data-icon="chart-line"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Learner Progress Report
@@ -668,23 +701,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-tags fa-w-20 fa-fw mr-2"
-                data-icon="tags"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 640 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22.83 12.99L11.83 2H2v9.83l10.99 10.99 9.84-9.83zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Code Management
@@ -707,23 +743,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-credit-card fa-w-18 fa-fw mr-2"
-                data-icon="credit-card"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M0 432c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V256H0v176zm192-68c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-40zm-128 0c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM576 80v48H0V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22 4H2.01L2 20h20V4zm-2 14H4v-6h16v6zm0-10H4V6h16v2z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Subscription Management
@@ -789,23 +828,26 @@ exports[`<Sidebar /> renders correctly when expanded by toggle 1`] = `
             <span
               className="d-flex align-items-center"
             >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-cog fa-w-16 fa-fw mr-2"
-                data-icon="cog"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="pgn__icon mr-2"
+                fixedWidth={true}
               >
-                <path
-                  d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
             </span>
             <span>
               Settings
diff --git a/src/index.scss b/src/index.scss
index e7f2a1fa57..34c7e99ba0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -7,8 +7,6 @@ $modal-max-width: 650px;
 @import "~@edx/frontend-enterprise-catalog-search";
 @import "~@edx/brand/paragon/overrides";
 
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
 
 @import "./components/EnterpriseApp/EnterpriseApp";
 @import "./components/CodeSearchResults/CodeSearchResults";
@@ -27,7 +25,6 @@ $fa-font-path: "~font-awesome/fonts";
 @import "./components/Admin/Admin";
 @import "./components/settings/settings";
 
-
 body {
   overflow-x: hidden;
 }