diff --git a/ui/pages/add-collectible/add-collectible.js b/ui/pages/add-collectible/add-collectible.js
index bea9d2046..c5192cec3 100644
--- a/ui/pages/add-collectible/add-collectible.js
+++ b/ui/pages/add-collectible/add-collectible.js
@@ -103,7 +103,7 @@ export default function AddCollectible() {
             <ActionableMessage
               type="danger"
               useIcon
-              iconFillColor="#d73a49"
+              iconFillColor="var(--color-error-default)"
               message={
                 <Box display={DISPLAY.INLINE_FLEX}>
                   <Typography
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index 04d5e1574..ccbc85b8b 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@@ -232,7 +232,7 @@ export default class ConfirmDecryptMessage extends Component {
               <div className="request-decrypt-message__message-copy-text">
                 {t('decryptCopy')}
               </div>
-              <Copy size={17} color="#3098DC" />
+              <Copy size={17} color="var(--color-primary-default)" />
             </Tooltip>
           </div>
         ) : (
diff --git a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
index 88a8e49b6..c47530242 100644
--- a/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
+++ b/ui/pages/confirm-transaction-base/transaction-alerts/transaction-alerts.js
@@ -42,7 +42,7 @@ const TransactionAlerts = ({
         <ActionableMessage
           message={<I18nValue messageKey="simulationErrorMessageV2" />}
           useIcon
-          iconFillColor="#d73a49"
+          iconFillColor="var(--color-error-default)"
           type="danger"
           primaryActionV2={
             userAcknowledgedGasMissing === true
@@ -91,7 +91,7 @@ const TransactionAlerts = ({
             </Typography>
           }
           useIcon
-          iconFillColor="#f8c000"
+          iconFillColor="var(--color-warning-default)"
           type="warning"
         />
       )}
@@ -142,7 +142,7 @@ const TransactionAlerts = ({
             </Typography>
           }
           useIcon
-          iconFillColor="#f8c000"
+          iconFillColor="var(--color-warning-default)"
           type="warning"
         />
       )}
@@ -158,7 +158,7 @@ const TransactionAlerts = ({
               <I18nValue messageKey="networkIsBusy" />
             </Typography>
           }
-          iconFillColor="#f8c000"
+          iconFillColor="var(--color-warning-default)"
           type="warning"
           useIcon
         />
diff --git a/ui/pages/import-token/import-token.component.js b/ui/pages/import-token/import-token.component.js
index 77cc89657..33e0a0bb2 100644
--- a/ui/pages/import-token/import-token.component.js
+++ b/ui/pages/import-token/import-token.component.js
@@ -368,7 +368,7 @@ class ImportToken extends Component {
           type="warning"
           withRightButton
           useIcon
-          iconFillColor="#f8c000"
+          iconFillColor="var(--color-warning-default)"
         />
         <TextField
           id="custom-address"
@@ -478,7 +478,7 @@ class ImportToken extends Component {
             ])}
             withRightButton
             useIcon
-            iconFillColor="#037DD6"
+            iconFillColor="var(--color-primary-default)"
             className="import-token__token-detection-announcement"
           />
         )}
diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
index 7012fe70d..0482a3669 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
@@ -89,7 +89,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
                 icon={
                   <i
                     className={`far fa-eye${hiddenPhrase ? '' : '-slash'}`}
-                    color="#3098DC"
+                    color="var(--color-primary-default)"
                   />
                 }
                 className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__hide-seed"
@@ -103,7 +103,11 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
                 onClick={() => {
                   handleCopy(secretRecoveryPhrase);
                 }}
-                icon={copied ? null : <Copy size={20} color="#3098DC" />}
+                icon={
+                  copied ? null : (
+                    <Copy size={20} color="var(--color-primary-default)" />
+                  )
+                }
                 className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard"
                 type="link"
               >
diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
index bcc6e9adc..214726c76 100644
--- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -68,7 +68,7 @@ function ViewContact({
                   handleCopy(checkSummedAddress);
                 }}
               >
-                <Copy size={20} color="#3098DC" />
+                <Copy size={20} color="var(--color-primary-default)" />
               </button>
             </Tooltip>
           </div>
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
index 0b57233c7..533910d65 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form.js
@@ -549,7 +549,7 @@ const NetworksForm = ({
         <ActionableMessage
           type="warning"
           message={t('onlyAddTrustedNetworks')}
-          iconFillColor="#f8c000"
+          iconFillColor="var(--color-warning-default)"
           useIcon
           withRightButton
         />
diff --git a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
index c3da0b2a1..ed1b0dd74 100644
--- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
+++ b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
@@ -78,7 +78,7 @@ const NetworksListItem = ({
       >
         {label || t(labelKey)}
         {currentProviderType !== NETWORK_TYPE_RPC && (
-          <LockIcon width="14px" height="17px" fill="#cdcdcd" />
+          <LockIcon width="14px" height="17px" fill="var(--color-icon-muted)" />
         )}
       </div>
       <IconCaretRight className="networks-tab__networks-list-arrow" />
diff --git a/ui/pages/settings/networks-tab/networks-tab.js b/ui/pages/settings/networks-tab/networks-tab.js
index fed8adea5..df7f052ac 100644
--- a/ui/pages/settings/networks-tab/networks-tab.js
+++ b/ui/pages/settings/networks-tab/networks-tab.js
@@ -44,7 +44,7 @@ const NetworksTab = ({ addNewNetwork }) => {
   const frequentRpcNetworkListDetails = frequentRpcListDetail.map((rpc) => {
     return {
       label: rpc.nickname,
-      iconColor: '#6A737D',
+      iconColor: 'var(--color-icon-default)',
       providerType: NETWORK_TYPE_RPC,
       rpcUrl: rpc.rpcUrl,
       chainId: rpc.chainId,
diff --git a/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap b/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
index bb0b0b5ae..45985fd2e 100644
--- a/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
+++ b/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
@@ -13,12 +13,12 @@ exports[`SwapStepIcon renders the component with step 1 by default 1`] = `
       cx="7"
       cy="7"
       r="6.25"
-      stroke="#037DD6"
+      stroke="var(--color-primary-default)"
       stroke-width="1.5"
     />
     <path
       d="M6.50983 5.192H5.27783L6.14183 4H7.71783V9.68H6.50983V5.192Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
@@ -37,12 +37,12 @@ exports[`SwapStepIcon renders the component with step 2 1`] = `
       cx="7"
       cy="7"
       r="6.25"
-      stroke="#037DD6"
+      stroke="var(--color-primary-default)"
       stroke-width="1.5"
     />
     <path
       d="M8.92 9.776H5V9.368C5 9.048 5.056 8.77067 5.168 8.536C5.28 8.296 5.42133 8.08533 5.592 7.904C5.768 7.71733 5.96267 7.54933 6.176 7.4C6.39467 7.25067 6.608 7.10133 6.816 6.952C6.928 6.872 7.03467 6.78933 7.136 6.704C7.24267 6.61867 7.33333 6.53067 7.408 6.44C7.488 6.34933 7.552 6.256 7.6 6.16C7.648 6.064 7.672 5.96533 7.672 5.864C7.672 5.67733 7.616 5.52 7.504 5.392C7.39733 5.25867 7.22933 5.192 7 5.192C6.88267 5.192 6.776 5.21333 6.68 5.256C6.584 5.29333 6.50133 5.344 6.432 5.408C6.368 5.472 6.31733 5.54667 6.28 5.632C6.248 5.71733 6.232 5.808 6.232 5.904H5.024C5.024 5.62667 5.07467 5.37067 5.176 5.136C5.27733 4.90133 5.41867 4.70133 5.6 4.536C5.78133 4.36533 5.99467 4.23467 6.24 4.144C6.48533 4.048 6.752 4 7.04 4C7.28 4 7.50933 4.03733 7.728 4.112C7.952 4.18667 8.14933 4.29867 8.32 4.448C8.49067 4.59733 8.62667 4.784 8.728 5.008C8.82933 5.22667 8.88 5.48267 8.88 5.776C8.88 6.032 8.85067 6.25867 8.792 6.456C8.73333 6.648 8.65067 6.824 8.544 6.984C8.44267 7.13867 8.32 7.28 8.176 7.408C8.032 7.536 7.87733 7.66133 7.712 7.784C7.64267 7.832 7.55733 7.888 7.456 7.952C7.36 8.016 7.26133 8.08267 7.16 8.152C7.064 8.22133 6.97333 8.29333 6.888 8.368C6.80267 8.44267 6.74133 8.51467 6.704 8.584H8.92V9.776Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/awaiting-signatures/swap-step-icon.js b/ui/pages/swaps/awaiting-signatures/swap-step-icon.js
index 3e5d50665..9fdae46cb 100644
--- a/ui/pages/swaps/awaiting-signatures/swap-step-icon.js
+++ b/ui/pages/swaps/awaiting-signatures/swap-step-icon.js
@@ -11,10 +11,16 @@ export default function SwapStepIcon({ stepNumber = 1 }) {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <circle cx="7" cy="7" r="6.25" stroke="#037DD6" strokeWidth="1.5" />
+          <circle
+            cx="7"
+            cy="7"
+            r="6.25"
+            stroke="var(--color-primary-default)"
+            strokeWidth="1.5"
+          />
           <path
             d="M6.50983 5.192H5.27783L6.14183 4H7.71783V9.68H6.50983V5.192Z"
-            fill="#037DD6"
+            fill="var(--color-primary-default)"
           />
         </svg>
       );
@@ -27,10 +33,16 @@ export default function SwapStepIcon({ stepNumber = 1 }) {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <circle cx="7" cy="7" r="6.25" stroke="#037DD6" strokeWidth="1.5" />
+          <circle
+            cx="7"
+            cy="7"
+            r="6.25"
+            stroke="var(--color-primary-default)"
+            strokeWidth="1.5"
+          />
           <path
             d="M8.92 9.776H5V9.368C5 9.048 5.056 8.77067 5.168 8.536C5.28 8.296 5.42133 8.08533 5.592 7.904C5.768 7.71733 5.96267 7.54933 6.176 7.4C6.39467 7.25067 6.608 7.10133 6.816 6.952C6.928 6.872 7.03467 6.78933 7.136 6.704C7.24267 6.61867 7.33333 6.53067 7.408 6.44C7.488 6.34933 7.552 6.256 7.6 6.16C7.648 6.064 7.672 5.96533 7.672 5.864C7.672 5.67733 7.616 5.52 7.504 5.392C7.39733 5.25867 7.22933 5.192 7 5.192C6.88267 5.192 6.776 5.21333 6.68 5.256C6.584 5.29333 6.50133 5.344 6.432 5.408C6.368 5.472 6.31733 5.54667 6.28 5.632C6.248 5.71733 6.232 5.808 6.232 5.904H5.024C5.024 5.62667 5.07467 5.37067 5.176 5.136C5.27733 4.90133 5.41867 4.70133 5.6 4.536C5.78133 4.36533 5.99467 4.23467 6.24 4.144C6.48533 4.048 6.752 4 7.04 4C7.28 4 7.50933 4.03733 7.728 4.112C7.952 4.18667 8.14933 4.29867 8.32 4.448C8.49067 4.59733 8.62667 4.784 8.728 5.008C8.82933 5.22667 8.88 5.48267 8.88 5.776C8.88 6.032 8.85067 6.25867 8.792 6.456C8.73333 6.648 8.65067 6.824 8.544 6.984C8.44267 7.13867 8.32 7.28 8.176 7.408C8.032 7.536 7.87733 7.66133 7.712 7.784C7.64267 7.832 7.55733 7.888 7.456 7.952C7.36 8.016 7.26133 8.08267 7.16 8.152C7.064 8.22133 6.97333 8.29333 6.888 8.368C6.80267 8.44267 6.74133 8.51467 6.704 8.584H8.92V9.776Z"
-            fill="#037DD6"
+            fill="var(--color-primary-default)"
           />
         </svg>
       );
diff --git a/ui/pages/swaps/awaiting-swap/__snapshots__/quotes-timeout-icon.test.js.snap b/ui/pages/swaps/awaiting-swap/__snapshots__/quotes-timeout-icon.test.js.snap
index d117414fa..2345cc961 100644
--- a/ui/pages/swaps/awaiting-swap/__snapshots__/quotes-timeout-icon.test.js.snap
+++ b/ui/pages/swaps/awaiting-swap/__snapshots__/quotes-timeout-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`QuotesTimeoutIcon renders the component 1`] = `
   >
     <path
       d="M22 0C9.96768 0 0.178406 9.78928 0.178406 21.8216C0.178406 33.8539 9.96768 43.6432 22 43.6432C34.0323 43.6432 43.8216 33.8539 43.8216 21.8216C43.8216 9.78929 34.0323 0 22 0ZM22 3.27324C32.2633 3.27324 40.5484 11.5583 40.5484 21.8216C40.5484 32.0849 32.2633 40.3699 22 40.3699C11.7367 40.3699 3.45164 32.0849 3.45164 21.8216C3.45164 11.5583 11.7367 3.27324 22 3.27324ZM22 6.00094C21.0961 6.00094 20.3634 6.73371 20.3634 7.63756V21.8216C20.3634 22.4269 20.6932 22.9534 21.1817 23.2366L32.5187 29.783C33.3014 30.235 34.3001 29.9692 34.752 29.1864C35.2039 28.4036 34.938 27.405 34.1553 26.953L23.6366 20.8839V7.63756C23.6366 6.73371 22.9039 6.00094 22 6.00094Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/awaiting-swap/__snapshots__/swap-failure-icon.test.js.snap b/ui/pages/swaps/awaiting-swap/__snapshots__/swap-failure-icon.test.js.snap
index 3d195032b..c5accc26d 100644
--- a/ui/pages/swaps/awaiting-swap/__snapshots__/swap-failure-icon.test.js.snap
+++ b/ui/pages/swaps/awaiting-swap/__snapshots__/swap-failure-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`SwapFailureIcon renders the component 1`] = `
   >
     <path
       d="M22.203 0.424438L0.285706 38.2816H44.1203L22.203 0.424438ZM22.203 8.39436L37.2064 34.2966H7.19961L22.203 8.39436ZM20.2105 16.3643V24.3342H24.1955V16.3643H20.2105ZM20.2105 28.3192V32.3041H24.1955V28.3192"
-      fill="#D73A49"
+      fill="var(--color-error-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/awaiting-swap/__snapshots__/swap-success-icon.test.js.snap b/ui/pages/swaps/awaiting-swap/__snapshots__/swap-success-icon.test.js.snap
index f5c27628d..fb9043445 100644
--- a/ui/pages/swaps/awaiting-swap/__snapshots__/swap-success-icon.test.js.snap
+++ b/ui/pages/swaps/awaiting-swap/__snapshots__/swap-success-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`SwapSuccessIcon renders the component 1`] = `
   >
     <path
       d="M34.1429 19C34.1429 23.0161 32.5474 26.8678 29.7076 29.7076C26.8678 32.5474 23.0161 34.1428 19 34.1428C14.9839 34.1428 11.1322 32.5474 8.29238 29.7076C5.45254 26.8678 3.85714 23.0161 3.85714 19C3.85714 14.9838 5.45254 11.1322 8.29238 8.29237C11.1322 5.45253 14.9839 3.85713 19 3.85713C20.4386 3.85713 21.8393 4.06534 23.1643 4.44391L26.1361 1.47213C23.9404 0.563554 21.5364 0.0714111 19 0.0714111C16.5143 0.0714111 14.0529 0.561013 11.7563 1.51226C9.45983 2.46351 7.37316 3.85778 5.61548 5.61546C2.06568 9.16526 0.0714264 13.9798 0.0714264 19C0.0714264 24.0201 2.06568 28.8347 5.61548 32.3845C7.37316 34.1422 9.45983 35.5364 11.7563 36.4877C14.0529 37.4389 16.5143 37.9286 19 37.9286C24.0202 37.9286 28.8347 35.9343 32.3845 32.3845C35.9343 28.8347 37.9286 24.0201 37.9286 19H34.1429ZM11.2582 15.3657L8.58928 18.0536L17.1071 26.5714L36.0357 7.64284L33.3668 4.95498L17.1071 21.2146L11.2582 15.3657Z"
-      fill="#28A745"
+      fill="var(--color-success-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/awaiting-swap/quotes-timeout-icon.js b/ui/pages/swaps/awaiting-swap/quotes-timeout-icon.js
index 7a2783e4b..5d715e584 100644
--- a/ui/pages/swaps/awaiting-swap/quotes-timeout-icon.js
+++ b/ui/pages/swaps/awaiting-swap/quotes-timeout-icon.js
@@ -11,7 +11,7 @@ export default function QuotesTimeoutIcon() {
     >
       <path
         d="M22 0C9.96768 0 0.178406 9.78928 0.178406 21.8216C0.178406 33.8539 9.96768 43.6432 22 43.6432C34.0323 43.6432 43.8216 33.8539 43.8216 21.8216C43.8216 9.78929 34.0323 0 22 0ZM22 3.27324C32.2633 3.27324 40.5484 11.5583 40.5484 21.8216C40.5484 32.0849 32.2633 40.3699 22 40.3699C11.7367 40.3699 3.45164 32.0849 3.45164 21.8216C3.45164 11.5583 11.7367 3.27324 22 3.27324ZM22 6.00094C21.0961 6.00094 20.3634 6.73371 20.3634 7.63756V21.8216C20.3634 22.4269 20.6932 22.9534 21.1817 23.2366L32.5187 29.783C33.3014 30.235 34.3001 29.9692 34.752 29.1864C35.2039 28.4036 34.938 27.405 34.1553 26.953L23.6366 20.8839V7.63756C23.6366 6.73371 22.9039 6.00094 22 6.00094Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/awaiting-swap/swap-failure-icon.js b/ui/pages/swaps/awaiting-swap/swap-failure-icon.js
index a5cb34480..5d8ef4e18 100644
--- a/ui/pages/swaps/awaiting-swap/swap-failure-icon.js
+++ b/ui/pages/swaps/awaiting-swap/swap-failure-icon.js
@@ -11,7 +11,7 @@ export default function SwapFailureIcon() {
     >
       <path
         d="M22.203 0.424438L0.285706 38.2816H44.1203L22.203 0.424438ZM22.203 8.39436L37.2064 34.2966H7.19961L22.203 8.39436ZM20.2105 16.3643V24.3342H24.1955V16.3643H20.2105ZM20.2105 28.3192V32.3041H24.1955V28.3192"
-        fill="#D73A49"
+        fill="var(--color-error-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/awaiting-swap/swap-success-icon.js b/ui/pages/swaps/awaiting-swap/swap-success-icon.js
index ffe46d5cb..0ec8ca746 100644
--- a/ui/pages/swaps/awaiting-swap/swap-success-icon.js
+++ b/ui/pages/swaps/awaiting-swap/swap-success-icon.js
@@ -11,7 +11,7 @@ export default function SwapSuccessIcon() {
     >
       <path
         d="M34.1429 19C34.1429 23.0161 32.5474 26.8678 29.7076 29.7076C26.8678 32.5474 23.0161 34.1428 19 34.1428C14.9839 34.1428 11.1322 32.5474 8.29238 29.7076C5.45254 26.8678 3.85714 23.0161 3.85714 19C3.85714 14.9838 5.45254 11.1322 8.29238 8.29237C11.1322 5.45253 14.9839 3.85713 19 3.85713C20.4386 3.85713 21.8393 4.06534 23.1643 4.44391L26.1361 1.47213C23.9404 0.563554 21.5364 0.0714111 19 0.0714111C16.5143 0.0714111 14.0529 0.561013 11.7563 1.51226C9.45983 2.46351 7.37316 3.85778 5.61548 5.61546C2.06568 9.16526 0.0714264 13.9798 0.0714264 19C0.0714264 24.0201 2.06568 28.8347 5.61548 32.3845C7.37316 34.1422 9.45983 35.5364 11.7563 36.4877C14.0529 37.4389 16.5143 37.9286 19 37.9286C24.0202 37.9286 28.8347 35.9343 32.3845 32.3845C35.9343 28.8347 37.9286 24.0201 37.9286 19H34.1429ZM11.2582 15.3657L8.58928 18.0536L17.1071 26.5714L36.0357 7.64284L33.3668 4.95498L17.1071 21.2146L11.2582 15.3657Z"
-        fill="#28A745"
+        fill="var(--color-success-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/countdown-timer/__snapshots__/timer-icon.test.js.snap b/ui/pages/swaps/countdown-timer/__snapshots__/timer-icon.test.js.snap
index e6649485e..0cdcd52e0 100644
--- a/ui/pages/swaps/countdown-timer/__snapshots__/timer-icon.test.js.snap
+++ b/ui/pages/swaps/countdown-timer/__snapshots__/timer-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`TimerIcon renders the TimerIcon component 1`] = `
   >
     <path
       d="M7.49835 0.510498C3.75226 0.510498 0.717102 3.54565 0.717102 7.29175C0.717102 11.0378 3.75226 14.073 7.49835 14.073C11.2444 14.073 14.2796 11.0378 14.2796 7.29175C14.2796 3.54565 11.2444 0.510498 7.49835 0.510498ZM7.49835 12.7605C4.4632 12.7605 2.0296 10.3269 2.0296 7.29175C2.0296 4.28394 4.4632 1.823 7.49835 1.823C10.5062 1.823 12.9671 4.28394 12.9671 7.29175C12.9671 10.3269 10.5062 12.7605 7.49835 12.7605ZM9.16632 9.91675C9.33038 10.0261 9.52179 9.99878 9.63116 9.83472L10.1507 9.15112C10.2601 8.98706 10.2327 8.79565 10.0687 8.68628L8.26398 7.34644V3.46362C8.26398 3.29956 8.09991 3.1355 7.93585 3.1355H7.06085C6.86945 3.1355 6.73273 3.29956 6.73273 3.46362V7.97534C6.73273 8.05737 6.76007 8.16675 6.8421 8.22144L9.16632 9.91675Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/countdown-timer/timer-icon.js b/ui/pages/swaps/countdown-timer/timer-icon.js
index 8f4974f72..65dc5875c 100644
--- a/ui/pages/swaps/countdown-timer/timer-icon.js
+++ b/ui/pages/swaps/countdown-timer/timer-icon.js
@@ -11,7 +11,7 @@ export default function TimerIcon() {
     >
       <path
         d="M7.49835 0.510498C3.75226 0.510498 0.717102 3.54565 0.717102 7.29175C0.717102 11.0378 3.75226 14.073 7.49835 14.073C11.2444 14.073 14.2796 11.0378 14.2796 7.29175C14.2796 3.54565 11.2444 0.510498 7.49835 0.510498ZM7.49835 12.7605C4.4632 12.7605 2.0296 10.3269 2.0296 7.29175C2.0296 4.28394 4.4632 1.823 7.49835 1.823C10.5062 1.823 12.9671 4.28394 12.9671 7.29175C12.9671 10.3269 10.5062 12.7605 7.49835 12.7605ZM9.16632 9.91675C9.33038 10.0261 9.52179 9.99878 9.63116 9.83472L10.1507 9.15112C10.2601 8.98706 10.2327 8.79565 10.0687 8.68628L8.26398 7.34644V3.46362C8.26398 3.29956 8.09991 3.1355 7.93585 3.1355H7.06085C6.86945 3.1355 6.73273 3.29956 6.73273 3.46362V7.97534C6.73273 8.05737 6.76007 8.16675 6.8421 8.22144L9.16632 9.91675Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
index d66be935a..36e9f773c 100644
--- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
+++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
@@ -59,7 +59,8 @@ export const WhiteOnBlue = (args) => {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)',
+        background:
+          'linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-muted) 101.32%)',
       }}
     >
       <ExchangeRateDisplay {...args} />
diff --git a/ui/pages/swaps/fee-card/pig-icon.js b/ui/pages/swaps/fee-card/pig-icon.js
index fe6a4278f..c5b53ed1e 100644
--- a/ui/pages/swaps/fee-card/pig-icon.js
+++ b/ui/pages/swaps/fee-card/pig-icon.js
@@ -11,43 +11,43 @@ export default function PigIcon() {
     >
       <path
         d="M1.86541 24.7218L1.79469 24.7925C1.02602 25.5611 0.602468 26.5834 0.602936 27.6702L1.86541 24.7218ZM1.86541 24.7218L1.93612 24.7925M1.86541 24.7218L1.93612 24.7925M1.93612 24.7925L2.34305 25.1994L2.74999 25.6063L2.82067 25.677M1.93612 24.7925L2.82067 25.677M2.82067 25.677L2.75002 25.7477M2.82067 25.677L2.75002 25.7477M2.75002 25.7477C2.23672 26.2615 1.95374 26.944 1.95374 27.6702C1.95374 28.3964 2.23672 29.0789 2.75002 29.5927L2.67928 29.6633L2.74995 29.5926C3.16102 30.0032 3.67296 30.2457 4.20842 30.3365M2.75002 25.7477L4.20842 30.3365M4.20842 30.3365V29.3801C4.20842 28.7473 4.29699 28.1236 4.44701 27.5174C5.26558 24.2082 8.15856 21.4247 11.5089 21.0552L11.5089 21.0551L11.5122 21.0549L11.5232 21.054C11.5234 21.054 11.5236 21.054 11.5238 21.054C14.4515 20.7946 17.4246 20.7241 20.3655 20.8456L20.3662 20.8456C20.4027 20.8474 20.4448 20.8518 20.4826 20.8558C20.4848 20.856 20.487 20.8562 20.4891 20.8564C21.3008 19.8016 22.4769 19.1281 23.7918 19.1281H24.3672H24.4672V19.2281V22.4872C25.6604 23.4555 26.6321 24.7942 27.2053 26.3565C27.6693 26.3858 28.1337 26.418 28.5993 26.4518L28.6 26.4519C29.8669 26.5531 30.8947 27.6691 30.8947 28.9423V33.532C30.8947 34.8021 29.8707 35.9275 28.6044 36.0438L28.6037 36.0439C28.0461 36.0912 27.4876 36.1351 26.9282 36.1755C26.2881 37.557 25.3323 38.7259 24.2059 39.5696V40.9581C24.2059 42.0522 23.3155 42.9421 22.2215 42.9421H21.2956C20.2321 42.9421 19.3615 42.1011 19.3137 41.0491C18.732 41.0644 18.149 41.0745 17.5651 41.0745C16.1032 41.0745 14.6374 41.0272 13.1767 40.9337V40.9581C13.1767 42.0522 12.2863 42.9421 11.1922 42.9421H10.2664C9.17234 42.9421 8.28244 42.0522 8.28244 40.9581V39.6399C5.89461 38.1267 4.20795 35.3776 4.20842 32.4825V31.7103C3.32631 31.6097 2.47056 31.2229 1.79516 30.5475C1.02648 29.7792 0.602947 28.757 0.602936 27.6702L4.20842 30.3365ZM11.5108 40.8072L11.5108 40.8072L11.5084 40.8069C10.8614 40.7357 10.2331 40.5697 9.63278 40.3321V40.9581C9.63278 41.307 9.91701 41.5913 10.2659 41.5913H11.1918C11.5412 41.5913 11.8254 41.307 11.8254 40.9581V40.8312C11.7948 40.8289 11.7636 40.8266 11.7324 40.8243C11.6578 40.8189 11.5824 40.8133 11.5108 40.8072ZM26.0661 27.2019C25.7283 26.1136 25.1685 25.1424 24.4672 24.3492V25.3928V25.4928H24.3672H23.2164H23.1164V25.3928V20.5711C21.7447 20.9526 20.6961 22.4798 20.6961 24.3256C20.6961 24.6853 20.7363 25.0339 20.8135 25.3705L20.8416 25.4928H20.716H19.5442H19.4607L19.4458 25.4107C19.3819 25.0577 19.3458 24.6961 19.3458 24.3256C19.3458 23.5585 19.4925 22.8324 19.7487 22.1769C19.0205 22.1527 18.291 22.138 17.5604 22.138C15.5864 22.138 13.6074 22.2251 11.6502 22.3983C10.0333 22.5788 8.51004 23.482 7.38991 24.765C6.26962 26.0482 5.55899 27.704 5.55923 29.3796V32.4825V32.5581C5.58001 34.2087 6.28668 35.835 7.38969 37.0991C8.5094 38.3822 10.031 39.2847 11.6432 39.4628C14.5132 39.7172 17.428 39.7865 20.3054 39.6673C22.5772 39.5684 24.8105 37.8103 25.8469 35.2745L25.8469 35.2744L25.9827 34.9431L26.0063 34.8856L26.0684 34.8813L26.4258 34.8565L26.4258 34.8565C27.1144 34.809 27.8016 34.7558 28.4842 34.698C29.0557 34.6452 29.5434 34.1087 29.5434 33.5316V28.9419C29.5434 28.3691 29.0595 27.8434 28.4958 27.7984C27.8886 27.7541 27.2797 27.713 26.6703 27.6762L26.6702 27.6762L26.2735 27.6519L26.2046 27.6477L26.1842 27.5818L26.0661 27.2019L26.0661 27.2019ZM22.8546 40.9581V40.3811C22.1527 40.7107 21.4138 40.9209 20.6629 40.9915C20.6803 41.325 20.9574 41.5913 21.2952 41.5913H22.221C22.5705 41.5913 22.8546 41.307 22.8546 40.9581Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
         strokeWidth="0.2"
       />
       <path
         d="M15.4018 19.837C12.3221 19.837 9.81661 17.332 9.81661 14.2523C9.81661 11.1726 12.3217 8.66703 15.4018 8.66703C18.4811 8.66703 20.9866 11.1721 20.9866 14.2523C20.9866 17.3315 18.4816 19.837 15.4018 19.837ZM15.4018 10.0174C13.0673 10.0174 11.1674 11.9172 11.1674 14.2518C11.1674 16.5864 13.0673 18.4862 15.4018 18.4862C17.7364 18.4862 19.6358 16.5868 19.6358 14.2518C19.6358 11.9172 17.7369 10.0174 15.4018 10.0174Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
         strokeWidth="0.2"
       />
       <path
         d="M15.4022 17.8575C13.4136 17.8575 11.7957 16.24 11.7957 14.2514C11.7957 12.2627 13.4136 10.6453 15.4022 10.6453C17.3909 10.6453 19.0083 12.2632 19.0083 14.2514C19.0083 16.2395 17.3909 17.8575 15.4022 17.8575ZM15.4022 11.9961C14.1583 11.9961 13.1465 13.0079 13.1465 14.2519C13.1465 15.4958 14.1582 16.5071 15.4022 16.5071C16.6458 16.5071 17.6575 15.4954 17.6575 14.2519C17.6575 13.0083 16.6457 11.9961 15.4022 11.9961Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
         strokeWidth="0.2"
       />
       <path
         d="M14.6099 0.842163V0.742163H14.7099H15.8607H15.9607V0.842163V7.35593V7.45593H15.8607H14.7099H14.6099V7.35593V0.842163Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
         strokeWidth="0.2"
       />
       <path
         d="M17.2175 4.59747V4.49747H17.3175H18.4683H18.5683V4.59747V8.34996V8.44996H18.4683H17.3175H17.2175V8.34996V4.59747Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
         strokeWidth="0.2"
       />
       <path
         d="M24.4364 28.7993L24.4362 28.7993C24.3635 28.7716 24.2949 28.7581 24.2283 28.7581C23.9048 28.7581 23.6419 29.0179 23.6368 29.3397L23.6378 29.3474L23.6397 29.3614C23.6411 29.372 23.6431 29.3873 23.6447 29.4046L23.6448 29.4054C23.6735 29.7092 23.925 29.9417 24.2283 29.9417C24.5551 29.9417 24.8198 29.6769 24.8198 29.3501C24.8198 29.1005 24.6631 28.8854 24.4364 28.7993ZM23.6367 29.3501C23.6367 29.35 23.6367 29.3499 23.6367 29.3497V29.3501Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
       />
       <path
         d="M17.967 23.5994H12.8346C12.61 23.5994 12.4253 23.7836 12.4251 24.0094V24.1723C12.4251 24.3974 12.6091 24.5814 12.8342 24.5814H17.967C18.1924 24.5814 18.3766 24.397 18.3766 24.1723V24.009C18.3766 23.7836 18.1923 23.5994 17.967 23.5994Z"
-        fill="#037DD6"
-        stroke="#037DD6"
+        fill="var(--color-primary-default)"
+        stroke="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
index c94a42158..4f42f56c1 100644
--- a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
+++ b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
@@ -103,7 +103,7 @@ exports[`MainQuoteSummary renders the component with initial props 4`] = `
       >
         <path
           d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
-          fill="#037DD6"
+          fill="var(--color-primary-default)"
         />
       </svg>
     </div>
diff --git a/ui/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
index f4da8b5f6..ceab8ef75 100644
--- a/ui/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
@@ -118,7 +118,7 @@ export default function MainQuoteSummary({
             secondaryTokenValue={destinationValue}
             secondaryTokenDecimals={destinationDecimals}
             secondaryTokenSymbol={destinationSymbol}
-            arrowColor="#037DD6"
+            arrowColor="var(--color-primary-default)"
             boldSymbols={false}
             className="main-quote-summary__exchange-rate-display"
           />
diff --git a/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap b/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
index b73581f3e..f0810c9cf 100644
--- a/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
+++ b/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
@@ -40,7 +40,7 @@ exports[`SortList renders the component with initial props 1`] = `
     >
       <path
         d="M0.7948 4.96973C0.365112 4.96973 0.150269 5.47754 0.462769 5.77051L2.78699 8.09473C2.96277 8.29004 3.25574 8.29004 3.45105 8.09473L5.77527 5.77051C6.06824 5.47754 5.85339 4.96973 5.44324 4.96973H0.7948ZM5.77527 2.91895L3.45105 0.594727C3.25574 0.418945 2.96277 0.418945 2.78699 0.594727L0.462769 2.91895C0.150269 3.23145 0.365112 3.71973 0.7948 3.71973H5.44324C5.85339 3.71973 6.06824 3.23145 5.77527 2.91895Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   </div>
@@ -79,7 +79,7 @@ exports[`SortList renders the component with initial props 2`] = `
   >
     <path
       d="M0.7948 4.96973C0.365112 4.96973 0.150269 5.47754 0.462769 5.77051L2.78699 8.09473C2.96277 8.29004 3.25574 8.29004 3.45105 8.09473L5.77527 5.77051C6.06824 5.47754 5.85339 4.96973 5.44324 4.96973H0.7948ZM5.77527 2.91895L3.45105 0.594727C3.25574 0.418945 2.96277 0.418945 2.78699 0.594727L0.462769 2.91895C0.150269 3.23145 0.365112 3.71973 0.7948 3.71973H5.44324C5.85339 3.71973 6.06824 3.23145 5.77527 2.91895Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
index 58064e365..4f1f9077d 100644
--- a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
+++ b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.js
@@ -17,7 +17,7 @@ const ToggleArrows = () => (
   >
     <path
       d="M0.7948 4.96973C0.365112 4.96973 0.150269 5.47754 0.462769 5.77051L2.78699 8.09473C2.96277 8.29004 3.25574 8.29004 3.45105 8.09473L5.77527 5.77051C6.06824 5.47754 5.85339 4.96973 5.44324 4.96973H0.7948ZM5.77527 2.91895L3.45105 0.594727C3.25574 0.418945 2.96277 0.418945 2.78699 0.594727L0.462769 2.91895C0.150269 3.23145 0.365112 3.71973 0.7948 3.71973H5.44324C5.85339 3.71973 6.06824 3.23145 5.77527 2.91895Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 );
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/canceled-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/canceled-icon.test.js.snap
index 00aef8022..68b473d40 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/canceled-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/canceled-icon.test.js.snap
@@ -11,12 +11,12 @@ exports[`CanceledIcon renders the CanceledIcon component 1`] = `
   >
     <path
       d="M34.5805 6.55143C36.1394 8.11033 37.3994 9.91222 38.3237 11.8681C38.7066 12.6782 39.0318 13.5148 39.2968 14.3714L39.3242 14.4606C39.4816 14.9785 39.6171 15.5037 39.73 16.0347C40.6511 20.3654 40.0335 24.9029 37.9511 28.8509C35.6001 33.308 31.5749 36.6487 26.7609 38.138C24.3773 38.8754 21.8717 39.1361 19.3873 38.9052C16.9029 38.6743 14.4883 37.9563 12.2813 36.7922C10.2608 35.7264 8.52045 34.3588 7.08333 32.7636C5.61245 31.1448 4.43054 29.2824 3.59178 27.2574C3.32329 26.6092 2.89685 25.2767 2.89685 25.2767H6.89583C7.68667 27.4068 8.96033 29.362 10.6288 30.9609L10.6318 30.96C11.5096 31.8005 12.501 32.5516 13.595 33.1786C15.8742 34.483 18.4736 35.1864 21.1455 35.1864C25.1768 35.1864 29.0429 33.585 31.8935 30.7345C34.744 27.8839 36.3455 24.0177 36.3455 19.9865C36.3455 18.7267 36.1891 17.483 35.8871 16.2814C35.8206 16.017 35.7471 15.7546 35.6666 15.4945C34.4752 11.6432 31.8027 8.42306 28.237 6.54231C24.6713 4.66156 20.5045 4.27429 16.6533 5.46571C12.8837 6.63189 9.71868 9.21706 7.82253 12.6699L12.8961 15.307L3.28331 18.3447L0.245605 8.73191L4.45005 10.9171C6.81537 6.56278 10.7905 3.30177 15.5303 1.83546C17.3658 1.26761 19.2587 0.986653 21.1455 0.986694C26.1846 0.986694 31.0173 2.98824 34.5805 6.55143Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
     <path
       clip-rule="evenodd"
       d="M18.1252 22.1036L14.7107 18.689L12.0926 21.3257L18.1252 27.3584L30.2322 15.2515L27.614 12.6148L18.1252 22.1036Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
       fill-rule="evenodd"
     />
   </svg>
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/timer-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/timer-icon.test.js.snap
index 393317824..3596a5195 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/timer-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/timer-icon.test.js.snap
@@ -11,7 +11,7 @@ exports[`TimerIcon renders the TimerIcon component 1`] = `
   >
     <path
       d="M7.36621 0.0810547C3.62012 0.0810547 0.584961 3.11621 0.584961 6.8623C0.584961 10.6084 3.62012 13.6436 7.36621 13.6436C11.1123 13.6436 14.1475 10.6084 14.1475 6.8623C14.1475 3.11621 11.1123 0.0810547 7.36621 0.0810547ZM7.36621 12.3311C4.33105 12.3311 1.89746 9.89746 1.89746 6.8623C1.89746 3.85449 4.33105 1.39355 7.36621 1.39355C10.374 1.39355 12.835 3.85449 12.835 6.8623C12.835 9.89746 10.374 12.3311 7.36621 12.3311ZM9.03418 9.4873C9.19824 9.59668 9.38965 9.56934 9.49902 9.40527L10.0186 8.72168C10.1279 8.55762 10.1006 8.36621 9.93652 8.25684L8.13184 6.91699V3.03418C8.13184 2.87012 7.96777 2.70605 7.80371 2.70605H6.92871C6.7373 2.70605 6.60059 2.87012 6.60059 3.03418V7.5459C6.60059 7.62793 6.62793 7.7373 6.70996 7.79199L9.03418 9.4873Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/smart-transaction-status/__snapshots__/unknown-icon.test.js.snap b/ui/pages/swaps/smart-transaction-status/__snapshots__/unknown-icon.test.js.snap
index f79373635..bef8625bc 100644
--- a/ui/pages/swaps/smart-transaction-status/__snapshots__/unknown-icon.test.js.snap
+++ b/ui/pages/swaps/smart-transaction-status/__snapshots__/unknown-icon.test.js.snap
@@ -13,12 +13,12 @@ exports[`UnknownIcon renders the UnknownIcon component 1`] = `
       cx="19.1533"
       cy="19.2715"
       r="17.1"
-      stroke="#037DD6"
+      stroke="var(--color-primary-default)"
       stroke-width="3.8"
     />
     <path
       d="M16.712 21.5034C16.712 20.7834 16.88 20.1834 17.216 19.7034C17.568 19.2074 18.08 18.7274 18.752 18.2634C19.008 18.0874 19.264 17.9274 19.52 17.7834C19.776 17.6394 20 17.4874 20.192 17.3274C20.4 17.1514 20.56 16.9674 20.672 16.7754C20.8 16.5674 20.864 16.3194 20.864 16.0314C20.864 15.5354 20.688 15.1594 20.336 14.9034C20 14.6474 19.592 14.5194 19.112 14.5194C18.616 14.5194 18.16 14.6794 17.744 14.9994C17.344 15.3034 17.144 15.7674 17.144 16.3914H13.52C13.52 15.6394 13.664 14.9354 13.952 14.2794C14.24 13.6074 14.632 13.0314 15.128 12.5514C15.64 12.0554 16.232 11.6634 16.904 11.3754C17.592 11.0874 18.328 10.9434 19.112 10.9434C19.896 10.9434 20.616 11.0794 21.272 11.3514C21.944 11.6234 22.512 11.9834 22.976 12.4314C23.456 12.8794 23.824 13.3994 24.08 13.9914C24.352 14.5674 24.488 15.1754 24.488 15.8154C24.488 16.2314 24.456 16.6234 24.392 16.9914C24.344 17.3594 24.24 17.7114 24.08 18.0474C23.936 18.3834 23.728 18.7114 23.456 19.0314C23.184 19.3514 22.84 19.6634 22.424 19.9674C21.784 20.4474 21.272 20.8234 20.888 21.0954C20.52 21.3674 20.336 21.6474 20.336 21.9354V21.9594H16.712V21.5034ZM18.512 28.4634C18.16 28.4634 17.824 28.3994 17.504 28.2714C17.2 28.1274 16.928 27.9434 16.688 27.7194C16.464 27.4794 16.28 27.2074 16.136 26.9034C16.008 26.5834 15.944 26.2474 15.944 25.8954C15.944 25.5434 16.008 25.2154 16.136 24.9114C16.28 24.5914 16.464 24.3194 16.688 24.0954C16.928 23.8554 17.2 23.6714 17.504 23.5434C17.824 23.3994 18.16 23.3274 18.512 23.3274C18.864 23.3274 19.192 23.3994 19.496 23.5434C19.816 23.6714 20.088 23.8554 20.312 24.0954C20.552 24.3194 20.736 24.5914 20.864 24.9114C21.008 25.2154 21.08 25.5434 21.08 25.8954C21.08 26.2474 21.008 26.5834 20.864 26.9034C20.736 27.2074 20.552 27.4794 20.312 27.7194C20.088 27.9434 19.816 28.1274 19.496 28.2714C19.192 28.3994 18.864 28.4634 18.512 28.4634Z"
-      fill="#037DD6"
+      fill="var(--color-primary-default)"
     />
   </svg>
 </div>
diff --git a/ui/pages/swaps/smart-transaction-status/canceled-icon.js b/ui/pages/swaps/smart-transaction-status/canceled-icon.js
index 9d40bc2d7..edd359c4f 100644
--- a/ui/pages/swaps/smart-transaction-status/canceled-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/canceled-icon.js
@@ -11,13 +11,13 @@ export default function CanceledIcon() {
     >
       <path
         d="M34.5805 6.55143C36.1394 8.11033 37.3994 9.91222 38.3237 11.8681C38.7066 12.6782 39.0318 13.5148 39.2968 14.3714L39.3242 14.4606C39.4816 14.9785 39.6171 15.5037 39.73 16.0347C40.6511 20.3654 40.0335 24.9029 37.9511 28.8509C35.6001 33.308 31.5749 36.6487 26.7609 38.138C24.3773 38.8754 21.8717 39.1361 19.3873 38.9052C16.9029 38.6743 14.4883 37.9563 12.2813 36.7922C10.2608 35.7264 8.52045 34.3588 7.08333 32.7636C5.61245 31.1448 4.43054 29.2824 3.59178 27.2574C3.32329 26.6092 2.89685 25.2767 2.89685 25.2767H6.89583C7.68667 27.4068 8.96033 29.362 10.6288 30.9609L10.6318 30.96C11.5096 31.8005 12.501 32.5516 13.595 33.1786C15.8742 34.483 18.4736 35.1864 21.1455 35.1864C25.1768 35.1864 29.0429 33.585 31.8935 30.7345C34.744 27.8839 36.3455 24.0177 36.3455 19.9865C36.3455 18.7267 36.1891 17.483 35.8871 16.2814C35.8206 16.017 35.7471 15.7546 35.6666 15.4945C34.4752 11.6432 31.8027 8.42306 28.237 6.54231C24.6713 4.66156 20.5045 4.27429 16.6533 5.46571C12.8837 6.63189 9.71868 9.21706 7.82253 12.6699L12.8961 15.307L3.28331 18.3447L0.245605 8.73191L4.45005 10.9171C6.81537 6.56278 10.7905 3.30177 15.5303 1.83546C17.3658 1.26761 19.2587 0.986653 21.1455 0.986694C26.1846 0.986694 31.0173 2.98824 34.5805 6.55143Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M18.1252 22.1036L14.7107 18.689L12.0926 21.3257L18.1252 27.3584L30.2322 15.2515L27.614 12.6148L18.1252 22.1036Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/smart-transaction-status/timer-icon.js b/ui/pages/swaps/smart-transaction-status/timer-icon.js
index d5f625aee..1f29942f0 100644
--- a/ui/pages/swaps/smart-transaction-status/timer-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/timer-icon.js
@@ -11,7 +11,7 @@ export default function TimerIcon() {
     >
       <path
         d="M7.36621 0.0810547C3.62012 0.0810547 0.584961 3.11621 0.584961 6.8623C0.584961 10.6084 3.62012 13.6436 7.36621 13.6436C11.1123 13.6436 14.1475 10.6084 14.1475 6.8623C14.1475 3.11621 11.1123 0.0810547 7.36621 0.0810547ZM7.36621 12.3311C4.33105 12.3311 1.89746 9.89746 1.89746 6.8623C1.89746 3.85449 4.33105 1.39355 7.36621 1.39355C10.374 1.39355 12.835 3.85449 12.835 6.8623C12.835 9.89746 10.374 12.3311 7.36621 12.3311ZM9.03418 9.4873C9.19824 9.59668 9.38965 9.56934 9.49902 9.40527L10.0186 8.72168C10.1279 8.55762 10.1006 8.36621 9.93652 8.25684L8.13184 6.91699V3.03418C8.13184 2.87012 7.96777 2.70605 7.80371 2.70605H6.92871C6.7373 2.70605 6.60059 2.87012 6.60059 3.03418V7.5459C6.60059 7.62793 6.62793 7.7373 6.70996 7.79199L9.03418 9.4873Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/smart-transaction-status/unknown-icon.js b/ui/pages/swaps/smart-transaction-status/unknown-icon.js
index d4750ba2d..3ca2e572a 100644
--- a/ui/pages/swaps/smart-transaction-status/unknown-icon.js
+++ b/ui/pages/swaps/smart-transaction-status/unknown-icon.js
@@ -13,12 +13,12 @@ export default function UnknownIcon() {
         cx="19.1533"
         cy="19.2715"
         r="17.1"
-        stroke="#037DD6"
+        stroke="var(--color-primary-default)"
         strokeWidth="3.8"
       />
       <path
         d="M16.712 21.5034C16.712 20.7834 16.88 20.1834 17.216 19.7034C17.568 19.2074 18.08 18.7274 18.752 18.2634C19.008 18.0874 19.264 17.9274 19.52 17.7834C19.776 17.6394 20 17.4874 20.192 17.3274C20.4 17.1514 20.56 16.9674 20.672 16.7754C20.8 16.5674 20.864 16.3194 20.864 16.0314C20.864 15.5354 20.688 15.1594 20.336 14.9034C20 14.6474 19.592 14.5194 19.112 14.5194C18.616 14.5194 18.16 14.6794 17.744 14.9994C17.344 15.3034 17.144 15.7674 17.144 16.3914H13.52C13.52 15.6394 13.664 14.9354 13.952 14.2794C14.24 13.6074 14.632 13.0314 15.128 12.5514C15.64 12.0554 16.232 11.6634 16.904 11.3754C17.592 11.0874 18.328 10.9434 19.112 10.9434C19.896 10.9434 20.616 11.0794 21.272 11.3514C21.944 11.6234 22.512 11.9834 22.976 12.4314C23.456 12.8794 23.824 13.3994 24.08 13.9914C24.352 14.5674 24.488 15.1754 24.488 15.8154C24.488 16.2314 24.456 16.6234 24.392 16.9914C24.344 17.3594 24.24 17.7114 24.08 18.0474C23.936 18.3834 23.728 18.7114 23.456 19.0314C23.184 19.3514 22.84 19.6634 22.424 19.9674C21.784 20.4474 21.272 20.8234 20.888 21.0954C20.52 21.3674 20.336 21.6474 20.336 21.9354V21.9594H16.712V21.5034ZM18.512 28.4634C18.16 28.4634 17.824 28.3994 17.504 28.2714C17.2 28.1274 16.928 27.9434 16.688 27.7194C16.464 27.4794 16.28 27.2074 16.136 26.9034C16.008 26.5834 15.944 26.2474 15.944 25.8954C15.944 25.5434 16.008 25.2154 16.136 24.9114C16.28 24.5914 16.464 24.3194 16.688 24.0954C16.928 23.8554 17.2 23.6714 17.504 23.5434C17.824 23.3994 18.16 23.3274 18.512 23.3274C18.864 23.3274 19.192 23.3994 19.496 23.5434C19.816 23.6714 20.088 23.8554 20.312 24.0954C20.552 24.3194 20.736 24.5914 20.864 24.9114C21.008 25.2154 21.08 25.5434 21.08 25.8954C21.08 26.2474 21.008 26.5834 20.864 26.9034C20.736 27.2074 20.552 27.4794 20.312 27.7194C20.088 27.9434 19.816 28.1274 19.496 28.2714C19.192 28.3994 18.864 28.4634 18.512 28.4634Z"
-        fill="#037DD6"
+        fill="var(--color-primary-default)"
       />
     </svg>
   );
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
index 60b161093..c0c5a47b6 100644
--- a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -64,7 +64,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
       >
         <path
           d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
-          fill="#037DD6"
+          fill="var(--color-primary-default)"
         />
       </svg>
     </div>
@@ -136,7 +136,7 @@ exports[`ViewQuote renders the component with initial props 2`] = `
       >
         <path
           d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
-          fill="#037DD6"
+          fill="var(--color-primary-default)"
         />
       </svg>
     </div>
diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js
index bc775e0d6..853832811 100644
--- a/ui/pages/token-details/token-details-page.js
+++ b/ui/pages/token-details/token-details-page.js
@@ -141,7 +141,7 @@ export default function TokenDetailsPage() {
                 handleCopy(token.address);
               }}
             >
-              <CopyIcon size={11} color="#037DD6" />
+              <CopyIcon size={11} color="var(--color-primary-default)" />
             </Button>
           </Tooltip>
         </Box>
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index b64a024ed..7612526a4 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -128,7 +128,7 @@ export default class UnlockPage extends Component {
 
   renderSubmitButton() {
     const style = {
-      backgroundColor: '#037dd6',
+      backgroundColor: 'var(--color-primary-default)',
       color: 'white',
       marginTop: '20px',
       height: '60px',