diff --git a/package-lock.json b/package-lock.json
index cc3679ce36..6cfa4398f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@edx/frontend-enterprise-utils": "3.4.0",
         "@edx/frontend-platform": "4.6.3",
         "@edx/paragon": "^21.5.6",
+        "@material-symbols/svg-400": "^0.17.3",
         "@tanstack/react-query": "4.28.0",
         "@tanstack/react-query-devtools": "4.29.0",
         "algoliasearch": "4.6.0",
@@ -4205,6 +4206,11 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@material-symbols/svg-400": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.17.3.tgz",
+      "integrity": "sha512-PO5EF1vKJtGZ8Ng7hqmyoDrjqlS/qlZRfURRijYW5/XI+TpaTyFsm1agJfKpKZi0uN3gnKyrFpdnZ96TCSRzbA=="
+    },
     "node_modules/@newrelic/publish-sourcemap": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-5.1.0.tgz",
diff --git a/package.json b/package.json
index 37f1150a05..24087729e6 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@edx/frontend-enterprise-utils": "3.4.0",
     "@edx/frontend-platform": "4.6.3",
     "@edx/paragon": "^21.5.6",
+    "@material-symbols/svg-400": "^0.17.3",
     "@tanstack/react-query": "4.28.0",
     "@tanstack/react-query-devtools": "4.29.0",
     "algoliasearch": "4.6.0",
diff --git a/src/components/course/course-header/CourseHeader.jsx b/src/components/course/course-header/CourseHeader.jsx
index afc5a3b55e..e433e28dae 100644
--- a/src/components/course/course-header/CourseHeader.jsx
+++ b/src/components/course/course-header/CourseHeader.jsx
@@ -10,7 +10,8 @@ import {
 } from '@edx/paragon';
 import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-import { AccessTimeFilled, School } from '@edx/paragon/icons';
+import { AccessTimeFilled } from '@edx/paragon/icons';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
 
 import { CourseContext } from '../CourseContextProvider';
 import CourseSkills from '../CourseSkills';
@@ -25,7 +26,7 @@ import {
 import { useCoursePartners, useIsCourseAssigned } from '../data/hooks';
 import LicenseRequestedAlert from '../LicenseRequestedAlert';
 import SubsidyRequestButton from '../SubsidyRequestButton';
-import CourseReview from '../CourseReview';
+// import CourseReview from '../CourseReview';
 
 import CoursePreview from './CoursePreview';
 import { UserSubsidyContext } from '../../enterprise-user-subsidy';
@@ -98,8 +99,8 @@ const CourseHeader = () => {
           </Col>
           <Col xs={12} md={7} className="d-flex flex-column justify-content-center">
             <div className="mb-4">
-              <FullChip icon={School} accent="mortar" text="COURSE" />
-              { isEnrolled && (<FullChip icon={School} accent="green" text="Enrolled" />) }
+              <FullChip icon={Book2} accent="mortar" text="COURSE" />
+              { isEnrolled && (<FullChip accent="indigo" text="Enrolled" />) }
             </div>
             <div className={classNames({ 'mb-4': !course.shortDescription, 'd-flex': true, 'align-items-center': true })}>
               <h2>{course.title}</h2>
@@ -112,9 +113,11 @@ const CourseHeader = () => {
                 dangerouslySetInnerHTML={{ __html: course.shortDescription }}
               />
             )}
-            <p className="mb-4">
-              <strong><Icon src={AccessTimeFilled} class="d-inline" /> Access Until: </strong> {accessUntil}
-            </p>
+            <div className="mb-4 d-flex">
+              <Icon src={AccessTimeFilled} />
+              <span className="mx-2"><strong>Access Until:</strong></span>
+              {accessUntil}
+            </div>
             {course.skills?.length > 0 && <CourseSkills />}
             {isPolicyRedemptionEnabled && <CourseRunCards />}
             {catalog.containsContentItems && (
diff --git a/src/components/dashboard/main-content/course-enrollments/course-cards/NewCourseCard.jsx b/src/components/dashboard/main-content/course-enrollments/course-cards/NewCourseCard.jsx
index ff808a976b..7078e118c9 100644
--- a/src/components/dashboard/main-content/course-enrollments/course-cards/NewCourseCard.jsx
+++ b/src/components/dashboard/main-content/course-enrollments/course-cards/NewCourseCard.jsx
@@ -3,14 +3,13 @@ import {
 } from '@edx/paragon';
 import {
   AccessTime,
-  Book,
-  CheckCircle,
   Info,
   List,
   RadioButtonUnchecked,
-  PieChart,
 } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
+import { ReactComponent as IncompleteCircle } from '@material-symbols/svg-400/outlined/incomplete_circle-fill.svg';
 
 import dayjs from '../../../../../utils/dayjs';
 import IconChip from '../../../../search/IconChip';
@@ -23,7 +22,7 @@ const SPACER = '\u00A0';
 const PROGRESS_PROPS_BY_STATUS = {
   [COURSE_STATUSES.inProgress]: {
     accent: 'dark-turquoise',
-    icon: PieChart,
+    icon: IncompleteCircle,
   },
   [COURSE_STATUSES.upcoming]: {
     accent: 'slate',
@@ -55,7 +54,7 @@ const NewCourseCard = ({
 }) => {
   const accent = 'mortar';
   const cardType = 'COURSE';
-  const cardTypeIcon = Book;
+  const cardTypeIcon = Book2;
 
   // NOTE: The Figma design involves showing the course duration in the subtitle.
   // Since the courses are open for multiple years in some cases, this shows strange
diff --git a/src/components/search/IconChip.jsx b/src/components/search/IconChip.jsx
index 905b256d54..f265997ec9 100644
--- a/src/components/search/IconChip.jsx
+++ b/src/components/search/IconChip.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const IconChip = ({ accent, icon, text }) => (
   <div className={`x-small align-items-center d-flex font-weight-bold text-${accent}`}>
-    <Badge variant="secondary" className="p-1 mr-1">
+    <Badge variant={accent} className="p-1 mr-1">
       <Icon src={icon} className="tiny-icon" />
     </Badge>
     <span>{text}</span>
diff --git a/src/components/search/SearchCourseCard.jsx b/src/components/search/SearchCourseCard.jsx
index b5cb191e4d..401392fc75 100644
--- a/src/components/search/SearchCourseCard.jsx
+++ b/src/components/search/SearchCourseCard.jsx
@@ -10,7 +10,8 @@ import {
   Button, Card, Icon, Stack, Truncate,
 } from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
-import { AccessTimeFilled, Book, Calendar } from '@edx/paragon/icons';
+import { AccessTimeFilled, Calendar } from '@edx/paragon/icons';
+import { ReactComponent as Book2 } from '@material-symbols/svg-400/outlined/book_2-fill.svg';
 
 import FullChip from './FullChip';
 import { getPrimaryPartnerLogo, isDefinedAndNotNull } from '../../utils/common';
@@ -131,7 +132,7 @@ const SearchCourseCard = ({
       <Card.Header
         title={(
           <>
-            <FullChip accent="mortar" icon={Book} text="Course" className="mb-3" />
+            <FullChip accent="mortar" icon={Book2} text="Course" className="mb-3" />
             {enrolled && (<FullChip accent="indigo" text="ENROLLED" />)}
             <Truncate maxLine={1}>{course.title}</Truncate>
           </>
diff --git a/src/theme.scss b/src/theme.scss
index 5bca5b7770..fc6c9705d2 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -21,6 +21,7 @@ $chip-border-radius: 6px;
 .tiny-icon {
   width: 14px !important;
   height: 14px !important;
+  fill: currentColor;
 }
 
 .pgn__chip {