diff --git a/app/images/down-arrow.svg b/app/images/down-arrow.svg
deleted file mode 100644
index 9d367dfc9..000000000
--- a/app/images/down-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.66555 3.36981C8.38934 3.36981 8.19599 3.59078 8.18218 3.85319L8.26504 7.11251L4.30138 3.14884C4.10803 2.95549 3.83181 2.95549 3.63846 3.14884L3.19652 3.59078C3.01698 3.77032 3.00317 4.06035 3.19652 4.2537L7.16019 8.21736L3.92849 8.1345C3.65227 8.1345 3.44511 8.34166 3.4313 8.60406V9.21173C3.44511 9.47413 3.65227 9.68129 3.90087 9.68129H9.28703C9.53562 9.68129 9.74278 9.47413 9.74278 9.22554V3.83938C9.74278 3.59078 9.53562 3.38362 9.27322 3.36981H8.66555Z" fill="#D73A49"/>
-</svg>
diff --git a/app/images/level-arrow.svg b/app/images/level-arrow.svg
deleted file mode 100644
index 73101e560..000000000
--- a/app/images/level-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.12476 0.974243C3.92944 1.16956 3.94897 1.46252 4.12476 1.65784L6.48804 3.90393L0.882568 3.90393C0.609131 3.90393 0.413818 4.09924 0.413818 4.37268L0.413818 4.99768C0.413818 5.25159 0.609131 5.46643 0.882568 5.46643L6.48804 5.46643L4.14429 7.69299C3.94897 7.88831 3.94897 8.18127 4.12476 8.37659L4.55444 8.80627C4.74976 8.98206 5.04272 8.98206 5.21851 8.80627L9.0271 4.99768C9.20288 4.8219 9.20288 4.52893 9.0271 4.35315L5.21851 0.544555C5.04272 0.368774 4.74976 0.368774 4.55444 0.544555L4.12476 0.974243Z" fill="#BBC0C5"/>
-</svg>
diff --git a/app/images/up-arrow.svg b/app/images/up-arrow.svg
deleted file mode 100644
index 76449fe0d..000000000
--- a/app/images/up-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.022 4.82c0 .275.22.469.483.482l3.26-.082L3.8 9.183a.451.451 0 0 0 0 .663l.442.442c.18.18.47.193.663 0l3.963-3.964-.082 3.232a.49.49 0 0 0 .47.497h.607a.484.484 0 0 0 .47-.47V4.199a.46.46 0 0 0-.456-.456H4.49a.484.484 0 0 0-.47.47v.607Z" fill="#219E37"/></svg>
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
index 51739f704..ddc0fd1ad 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import { isNullish } from '../../../../helpers/utils/util';
 import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
@@ -11,21 +12,21 @@ function determineTrendInfo(trend, t) {
   switch (trend) {
     case 'up':
       return {
-        className: 'advanced-gas-fee-input-subtext__up',
-        imageSrc: '/images/up-arrow.svg',
-        imageAlt: t('upArrow'),
+        className: 'fa-arrow-up advanced-gas-fee-input-subtext__up',
+        color: 'var(--color-success-default)',
+        title: t('upArrow'),
       };
     case 'down':
       return {
-        className: 'advanced-gas-fee-input-subtext__down',
-        imageSrc: '/images/down-arrow.svg',
-        imageAlt: t('downArrow'),
+        className: 'fa-arrow-down advanced-gas-fee-input-subtext__down',
+        color: 'var(--color-error-default)',
+        title: t('downArrow'),
       };
     case 'level':
       return {
-        className: 'advanced-gas-fee-input-subtext__level',
-        imageSrc: '/images/level-arrow.svg',
-        imageAlt: t('levelArrow'),
+        className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
+        color: 'var(--color-icon-default)',
+        title: t('levelArrow'),
       };
     default:
       return null;
@@ -52,10 +53,11 @@ const AdvancedGasFeeInputSubtext = ({ latest, historical, trend }) => {
             {formatGasFeeOrFeeRange(latest)}
           </span>
           {trendInfo === null ? null : (
-            <span className={trendInfo.className}>
-              <img
-                src={trendInfo.imageSrc}
-                alt={trendInfo.imageAlt}
+            <span className="advanced-gas-fee-input-subtext__icon">
+              <i
+                className={classnames('fa', trendInfo.className)}
+                style={{ color: trendInfo.color }}
+                title={trendInfo.title}
                 data-testid="fee-arrow"
               />
             </span>
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
index 5d779b669..fd9f3994d 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js
@@ -45,7 +45,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('up arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('up arrow')).toBeInTheDocument();
     });
 
     it('should render a fee trend arrow image if given "down" as the trend', () => {
@@ -56,7 +56,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('down arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('down arrow')).toBeInTheDocument();
     });
 
     it('should render a fee trend arrow image if given "level" as the trend', () => {
@@ -67,7 +67,7 @@ describe('AdvancedGasFeeInputSubtext', () => {
         },
       });
 
-      expect(screen.getByAltText('level arrow')).toBeInTheDocument();
+      expect(screen.getByTitle('level arrow')).toBeInTheDocument();
     });
 
     it('should not render a fee trend arrow image if given an invalid trend', () => {
diff --git a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
index 40240d88e..28ef01527 100644
--- a/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
+++ b/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index.scss
@@ -21,7 +21,7 @@
     padding-top: 2px;
   }
 
-  img {
+  &__icon {
     margin-right: 8px;
   }
 }