diff --git a/app/components/edit/EditCollection.tsx b/app/components/edit/EditCollection.tsx
index 3bf2d76bc..85c685fc1 100644
--- a/app/components/edit/EditCollection.tsx
+++ b/app/components/edit/EditCollection.tsx
@@ -131,7 +131,7 @@ export default function editCollectionHOC<T extends BaseItem>(
               className="trash-button icon-button"
               onClick={() => this.removeItem(index, item)}
             >
-              <i className="material-icons">&#xE872;</i>
+              <i className="material-symbols-outlined">&#xE872;</i>
             </button>
           </div>
         ));
diff --git a/app/components/edit/EditNote.tsx b/app/components/edit/EditNote.tsx
index 6fd5d6847..8fab6ba4e 100644
--- a/app/components/edit/EditNote.tsx
+++ b/app/components/edit/EditNote.tsx
@@ -65,7 +65,7 @@ class EditNote extends Component<Props, State> {
             className="delete-note"
             onClick={() => removeNote(index)}
           >
-            <i className="material-icons">&#xE872;</i>
+            <i className="material-symbols-outlined">&#xE872;</i>
           </button>
         </li>
       );
diff --git a/app/components/edit/EditNotes.tsx b/app/components/edit/EditNotes.tsx
index 527e867d8..9ed95187e 100644
--- a/app/components/edit/EditNotes.tsx
+++ b/app/components/edit/EditNotes.tsx
@@ -96,7 +96,7 @@ const EditNotes = ({ notes = [], handleNotesChange }: Props) => {
         className="edit--section--list--item--button"
         onClick={addNote}
       >
-        <i className="material-icons">add_box</i> Add Note
+        <i className="material-symbols-outlined">add_box</i> Add Note
       </button>
     </li>
   );
diff --git a/app/components/edit/EditScheduleDay.tsx b/app/components/edit/EditScheduleDay.tsx
index 3f4113ad5..c74413971 100644
--- a/app/components/edit/EditScheduleDay.tsx
+++ b/app/components/edit/EditScheduleDay.tsx
@@ -84,7 +84,7 @@ const TimeInputRow = ({
               onClick={() => removeTime()}
               className="remove-time icon-button"
             >
-              <i className="material-icons">delete</i>
+              <i className="material-symbols-outlined">delete</i>
             </button>
           )}
         </div>
@@ -200,7 +200,7 @@ class EditScheduleDay extends Component<EditScheduleDayProps> {
               className="icon-button"
               onClick={this.addTime}
             >
-              <i className="material-icons">add</i>
+              <i className="material-symbols-outlined">add</i>
             </button>
           )}
         </div>
diff --git a/app/components/edit/EditServices.tsx b/app/components/edit/EditServices.tsx
index f974f718c..1c30ab679 100644
--- a/app/components/edit/EditServices.tsx
+++ b/app/components/edit/EditServices.tsx
@@ -44,7 +44,7 @@ const EditServices = ({
       id="new-service-button"
       onClick={addService}
     >
-      <i className="material-icons">add_box</i>
+      <i className="material-symbols-outlined">add_box</i>
       Add New Service
     </button>
   </li>
diff --git a/app/components/edit/EditSidebar.tsx b/app/components/edit/EditSidebar.tsx
index 3958f40e3..443f01053 100644
--- a/app/components/edit/EditSidebar.tsx
+++ b/app/components/edit/EditSidebar.tsx
@@ -152,7 +152,7 @@ const EditSidebar = ({
             onClick={addService}
             disabled={newResource}
           >
-            <i className="material-icons">add_circle_outline</i>
+            <i className="material-symbols-outlined">add_circle</i>
           </button>
         </h3>
         {newResource && (
diff --git a/app/components/listing/MapOfLocations.tsx b/app/components/listing/MapOfLocations.tsx
index 9cb78fa05..9c999e96e 100644
--- a/app/components/listing/MapOfLocations.tsx
+++ b/app/components/listing/MapOfLocations.tsx
@@ -64,7 +64,7 @@ export const MapOfLocations = ({
                         </td>
                         <td className="iconcell">
                           <div className="selector">
-                            <i className="material-icons">
+                            <i className="material-symbols-outlined">
                               keyboard_arrow_down
                             </i>
                           </div>
diff --git a/app/components/listing/ServiceDetails.tsx b/app/components/listing/ServiceDetails.tsx
index 01dcd3721..cb3e5dd78 100644
--- a/app/components/listing/ServiceDetails.tsx
+++ b/app/components/listing/ServiceDetails.tsx
@@ -38,7 +38,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => {
         {infoHidden && (
           <span>
             More Info
-            <i className="material-icons">keyboard_arrow_down</i>
+            <i className="material-symbols-outlined">keyboard_arrow_down</i>
           </span>
         )}
       </div>
@@ -72,7 +72,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => {
           >
             <span>
               Less Info
-              <i className="material-icons">keyboard_arrow_up</i>
+              <i className="material-symbols-outlined">keyboard_arrow_up</i>
             </span>
           </div>
         </div>
diff --git a/app/components/search/SearchMap/SearchEntry.tsx b/app/components/search/SearchMap/SearchEntry.tsx
index 77f2bb67d..94dfe00ef 100644
--- a/app/components/search/SearchMap/SearchEntry.tsx
+++ b/app/components/search/SearchMap/SearchEntry.tsx
@@ -88,7 +88,7 @@ export default class SearchEntry extends Component<Props> {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <i className="material-icons">directions_outlined</i>
+                  <i className="material-symbols-outlined">directions</i>
                   Go
                 </a>
               </li>
diff --git a/app/components/ui/BookmarkModal/BookmarkModal.module.scss b/app/components/ui/BookmarkModal/BookmarkModal.module.scss
index e03fad508..1dddab34f 100644
--- a/app/components/ui/BookmarkModal/BookmarkModal.module.scss
+++ b/app/components/ui/BookmarkModal/BookmarkModal.module.scss
@@ -43,7 +43,7 @@
   column-gap: 20px;
   padding: 15px;
   .bookmarkIcon {
-    // Nested style to override default material-icons styles
+    // Nested style to override default material-symbols-outlined styles
     grid-area: icon;
     width: 60px;
     height: auto;
diff --git a/app/components/ui/BookmarkModal/BookmarkModal.tsx b/app/components/ui/BookmarkModal/BookmarkModal.tsx
index 321aa7648..89309b6e3 100644
--- a/app/components/ui/BookmarkModal/BookmarkModal.tsx
+++ b/app/components/ui/BookmarkModal/BookmarkModal.tsx
@@ -157,7 +157,9 @@ export const BookmarkModal = ({
       <div className={styles.modalContent}>
         <div>
           <div className={styles.bookmarkDescription}>
-            <i className={`material-icons ${styles.bookmarkIcon}`}>star</i>
+            <i className={`material-symbols-outlined ${styles.bookmarkIcon}`}>
+              star
+            </i>
             <div className={styles.bookmarkNameContainer}>
               <input
                 value={bookmarkName}
@@ -173,7 +175,7 @@ export const BookmarkModal = ({
                 type="button"
                 className={styles.clearBookmarkButton}
               >
-                <i className={`material-icons ${styles.clearBookmarkText}`}>
+                <i className={`material-symbols-outlined ${styles.clearBookmarkText}`}>
                   cancel
                 </i>
               </button>
@@ -201,7 +203,7 @@ export const BookmarkModal = ({
               <span className={selectedFolder?.name ? "" : styles.placeholder}>
                 {selectedFolder?.name ?? "Select Folder"}
               </span>
-              <i className="material-icons">arrow_drop_down</i>
+              <i className="material-symbols-outlined">arrow_drop_down</i>
             </p>
             {expandFolders && (
               <ul className={styles.bookmarkFoldersList}>
@@ -216,7 +218,9 @@ export const BookmarkModal = ({
                         setExpandFolders(false);
                       }}
                     >
-                      <i className={`material-icons ${styles.folderIcon}`}>
+                      <i
+                        className={`material-symbols-outlined ${styles.folderIcon}`}
+                      >
                         folder
                       </i>
                       {folder.name}
diff --git a/app/components/ui/BookmarksMenu/BookmarksMenu.tsx b/app/components/ui/BookmarksMenu/BookmarksMenu.tsx
index 35dfedb1a..95250ecb2 100644
--- a/app/components/ui/BookmarksMenu/BookmarksMenu.tsx
+++ b/app/components/ui/BookmarksMenu/BookmarksMenu.tsx
@@ -134,7 +134,7 @@ const BookmarksInnerMenu = ({
         {activeFolder === null ? (
           ""
         ) : (
-          <i className="material-icons">arrow_left</i>
+          <i className="material-symbols-outlined">arrow_left</i>
         )}
         {activeFolder === null
           ? "All Folders"
@@ -160,7 +160,7 @@ const BookmarksInnerMenu = ({
 const FolderItem = ({ folder }: { folder: Folder }) => (
   <>
     <div className={styles.itemIconBox}>
-      <i className={`material-icons ${styles.folderIcon}`}>folder</i>
+      <i className={`material-symbols-outlined ${styles.folderIcon}`}>folder</i>
       <p className={styles.folderCount}>{folder.bookmarks.length}</p>
     </div>
     <p className={styles.folderName}>{folder.name}</p>
@@ -191,7 +191,7 @@ const FoldersList = ({
 const BookmarkItem = ({ name }: { name: string }) => (
   <>
     <div className={`${styles.itemIconBox} ${styles.bookmarkIconBox}`}>
-      <i className={`material-icons ${styles.bookmarkIcon}`}>star</i>
+      <i className={`material-symbols-outlined ${styles.bookmarkIcon}`}>star</i>
     </div>
     <p className={styles.folderName}>{name}</p>
   </>
diff --git a/app/components/ui/NewsArticles/NewsArticles.tsx b/app/components/ui/NewsArticles/NewsArticles.tsx
index 09c7955f8..c0e90e2a6 100644
--- a/app/components/ui/NewsArticles/NewsArticles.tsx
+++ b/app/components/ui/NewsArticles/NewsArticles.tsx
@@ -47,7 +47,9 @@ const ArticleItem = ({ article }: { article: NewsArticle }) => (
         <span className={styles.linkText}>Read more →</span>
         <span className={styles.linkText_mobile}>
           More{" "}
-          <i className={`material-icons ${styles.mobileLinkChevron}`}>
+          <i
+            className={`material-symbols-outlined ${styles.mobileLinkChevron}`}
+          >
             keyboard_arrow_right
           </i>
         </span>
@@ -90,7 +92,7 @@ export const NewsArticles = () => {
           onClick={() => setCollapseCarousel(!collapseCarousel)}
         >
           <i
-            className={`material-icons ${
+            className={`material-symbols-outlined ${
               collapseCarousel
                 ? styles.expandCarouselChev
                 : styles.collapseCarouselChev
@@ -127,14 +129,18 @@ export const NewsArticles = () => {
             <ButtonBack
               className={`${styles.carouselButton} ${styles.carouselButton_prev}`}
             >
-              <i className={`material-icons ${styles.chevronControls}`}>
+              <i
+                className={`material-symbols-outlined ${styles.chevronControls}`}
+              >
                 keyboard_arrow_left
               </i>
             </ButtonBack>
             <ButtonNext
               className={`${styles.carouselButton}  ${styles.chevronControls} ${styles.carouselButton_next}`}
             >
-              <i className={`material-icons ${styles.chevronControls}`}>
+              <i
+                className={`material-symbols-outlined ${styles.chevronControls}`}
+              >
                 keyboard_arrow_right
               </i>
             </ButtonNext>
diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
index f99e9337e..465fd552f 100644
--- a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
+++ b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
@@ -245,7 +245,9 @@ const SavedSearchCard = ({ savedSearch }: { savedSearch: SavedSearch }) => {
       <img src={SearchIcon} alt="Saved Search Icon" />
       <p>Results for &quot;{savedSearch.name}&quot;</p>
       <button type="button" className={styles.savedSearchEditButton}>
-        <span className={`material-icons ${styles.savedSearchEditIcon}`}>
+        <span
+          className={`material-symbols-outlined ${styles.savedSearchEditIcon}`}
+        >
           minimize
         </span>
       </button>
@@ -284,7 +286,7 @@ const BookmarkFolderCard = ({
 
   return (
     <div className={styles.cardItem}>
-      <i className="material-icons">folder</i>
+      <i className="material-symbols-outlined">folder</i>
       <p>{folder.name}</p>
       <div className={styles.bookmarkUpdated}>
         {dateString ? (
diff --git a/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx b/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx
index a57327d13..8cfaeabe3 100644
--- a/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx
+++ b/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx
@@ -290,7 +290,7 @@ const Header = ({ onGoBack }: { onGoBack: () => void }) => (
       onClick={onGoBack}
       tabIndex={0}
     >
-      <i className="material-icons">keyboard_arrow_left</i>
+      <i className="material-symbols-outlined">keyboard_arrow_left</i>
       All resource guides
     </div>
   </div>
diff --git a/app/styles/utils/_helpers.scss b/app/styles/utils/_helpers.scss
index 54eec6e8f..ed0018d47 100644
--- a/app/styles/utils/_helpers.scss
+++ b/app/styles/utils/_helpers.scss
@@ -50,7 +50,7 @@ table {
 ////////////////////////////////////////////////////////////////////////////////////////
 // TYPEFACES
 
-@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap");
 
 $font-family-base: "Open Sans", "Helvetica Neue", "Arial", sans-serif;
@@ -176,13 +176,16 @@ p.message {
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////
-// MATERIAL ICONS
+// MATERIAL SYMBOLS
 
-.material-icons {
+.material-symbols-outlined {
   vertical-align: middle;
   position: relative;
   top: -2px;
 
+  // Special CSS property for configuring Material Symbols
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+
   &.blue {
     color: $color-brand;
   }