diff --git a/ui/components/app/approve-content-card/approve-content-card.stories.js b/ui/components/app/approve-content-card/approve-content-card.stories.js
index 0685eecd4..ba8e7a3ba 100644
--- a/ui/components/app/approve-content-card/approve-content-card.stories.js
+++ b/ui/components/app/approve-content-card/approve-content-card.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon, ICON_NAMES } from '../../component-library';
 import ApproveContentCard from './approve-content-card';
 
 export default {
@@ -71,7 +72,7 @@ export default {
   },
   args: {
     showHeader: true,
-    symbol: <i className="fa fa-tag" />,
+    symbol: <Icon name={ICON_NAMES.TAG} />,
     title: 'Transaction fee',
     showEdit: true,
     showAdvanceGasFeeOptions: true,
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 096114815..b61296f89 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -27,7 +27,11 @@ import LedgerInstructionField from '../../../components/app/ledger-instruction-f
 import { TokenStandard } from '../../../../shared/constants/transaction';
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
 import ContractDetailsModal from '../../../components/app/modals/contract-details-modal/contract-details-modal';
-import { ICON_NAMES, ButtonIcon } from '../../../components/component-library';
+import {
+  ICON_NAMES,
+  ButtonIcon,
+  Icon,
+} from '../../../components/component-library';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -601,7 +605,7 @@ export default class ConfirmApproveContent extends Component {
             </Box>
           )}
           {this.renderApproveContentCard({
-            symbol: <i className="fa fa-tag" />,
+            symbol: <Icon name={ICON_NAMES.TAG} />,
             title: t('transactionFee'),
             showEdit: true,
             showAdvanceGasFeeOptions: true,
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index 748d2a67c..0f3c62599 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -60,6 +60,7 @@ import {
 import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
 import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
 import SimulationErrorMessage from '../../components/ui/simulation-error-message';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 
 export default function TokenAllowance({
   origin,
@@ -418,7 +419,7 @@ export default function TokenAllowance({
             </Box>
           )}
           <ApproveContentCard
-            symbol={<i className="fa fa-tag" />}
+            symbol={<Icon name={ICON_NAMES.TAG} />}
             title={t('transactionFee')}
             showEdit
             showAdvanceGasFeeOptions