diff --git a/client/package-lock.json b/client/package-lock.json
index d57b7f9f..cd4f2c90 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -29,6 +29,7 @@
         "react-datepicker": "^4.24.0",
         "react-dom": "^18.1.0",
         "react-gtm-module": "^2.0.11",
+        "react-icons": "^5.2.1",
         "react-input-mask": "^2.0.4",
         "react-jss": "^10.8.2",
         "react-loader": "^2.4.7",
@@ -14776,6 +14777,14 @@
       "version": "2.0.11",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-input-mask": {
       "version": "2.0.4",
       "license": "MIT",
@@ -29044,6 +29053,11 @@
     "react-gtm-module": {
       "version": "2.0.11"
     },
+    "react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw=="
+    },
     "react-input-mask": {
       "version": "2.0.4",
       "requires": {
diff --git a/client/package.json b/client/package.json
index d3972e4d..4e3a94c2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -50,6 +50,7 @@
     "react-datepicker": "^4.24.0",
     "react-dom": "^18.1.0",
     "react-gtm-module": "^2.0.11",
+    "react-icons": "^5.2.1",
     "react-input-mask": "^2.0.4",
     "react-jss": "^10.8.2",
     "react-loader": "^2.4.7",
diff --git a/client/src/components/About.js b/client/src/components/About.js
index e3d4e100..11badc27 100644
--- a/client/src/components/About.js
+++ b/client/src/components/About.js
@@ -2,8 +2,7 @@ import React from "react";
 import { createUseStyles } from "react-jss";
 import packageInfo from "../../package.json";
 import ContentContainer from "./Layout/ContentContainer";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 const useStyles = createUseStyles({
   aboutContent: {
@@ -64,10 +63,7 @@ const About = () => {
           Learn more about{" "}
           <a href="http://www.hackforla.org" target="external">
             Hack for LA{" "}
-            <FontAwesomeIcon
-              icon={faExternalLinkAlt}
-              className={classes.externalLinkIcon}
-            />
+            <FaExternalLinkAlt className={classes.externalLinkIcon} />
           </a>
         </p>
         <h3>Status of the TDM Calculator</h3>
@@ -87,10 +83,7 @@ const About = () => {
               target="external"
             >
               Glossary
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -99,10 +92,7 @@ const About = () => {
               target="external"
             >
               Los Angeles City Planning, Mobility
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -111,10 +101,7 @@ const About = () => {
               target="external"
             >
               Proposed Ordinances and Initiatives
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -123,10 +110,7 @@ const About = () => {
               target="external"
             >
               Informational Video (January 2021)
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -135,10 +119,7 @@ const About = () => {
               target="external"
             >
               Fact Sheet - English (January 2021)
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
           <li className={classes.linklist}>
@@ -147,10 +128,7 @@ const About = () => {
               target="external"
             >
               Hoja Informativa - Español (Enero 2021)
-              <FontAwesomeIcon
-                icon={faExternalLinkAlt}
-                className={classes.externalLinkIcon}
-              />
+              <FaExternalLinkAlt className={classes.externalLinkIcon} />
             </a>
           </li>
         </ul>
diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js
index 2e7ea291..fd7dc346 100644
--- a/client/src/components/Checklist/ChecklistModal.js
+++ b/client/src/components/Checklist/ChecklistModal.js
@@ -3,8 +3,7 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faX } from "@fortawesome/free-solid-svg-icons";
+import { FaX } from "react-icons/fa6";
 
 import "./ChecklistModal.css";
 
@@ -69,7 +68,8 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
       className={classes.modal}
     >
       <span className={classes.close} onClick={toggleChecklistModal}>
-        <FontAwesomeIcon icon={faX} />
+        {/* <FontAwesomeIcon icon={faX} /> */}
+        <FaX />
       </span>
       <ChecklistContent />
     </Modal>
diff --git a/client/src/components/UI/AriaModal/ModalDialog.js b/client/src/components/UI/AriaModal/ModalDialog.js
index 78f9fb93..cd3f685c 100644
--- a/client/src/components/UI/AriaModal/ModalDialog.js
+++ b/client/src/components/UI/AriaModal/ModalDialog.js
@@ -2,8 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import AriaModal from "react-aria-modal";
-import { faX } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FaX } from "react-icons/fa6";
 
 const useStyles = createUseStyles({
   modalContainer: {
@@ -90,7 +89,7 @@ export default function ModalDialog({
               className={classes.closeButton}
               aria-label={`Close ${title} modal`}
             >
-              <FontAwesomeIcon icon={faX} />
+              <FaX />
             </button>
           </div>
         )}