diff --git a/src/components/Chart/ExpandedChart.tsx b/src/components/Chart/ExpandedChart.tsx
index ea652d2025..07ccf1599b 100644
--- a/src/components/Chart/ExpandedChart.tsx
+++ b/src/components/Chart/ExpandedChart.tsx
@@ -2,7 +2,7 @@ import { Grid, Link, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/m
 import { Modal, Tooltip } from "@olympusdao/component-library";
 import React, { useEffect } from "react";
 import { ResponsiveContainer } from "recharts";
-import { ReactComponent as GraphLogo } from "src/assets/icons/graph-grt-logo.svg";
+import GraphLogo from "src/assets/icons/graph-grt-logo.svg?react";
 
 const ExpandedChart = ({
   open,
diff --git a/src/components/ConnectButton/ConnectButton.tsx b/src/components/ConnectButton/ConnectButton.tsx
index 2f7492068d..f3b95c4f81 100644
--- a/src/components/ConnectButton/ConnectButton.tsx
+++ b/src/components/ConnectButton/ConnectButton.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
 import { Icon, OHMButtonProps, PrimaryButton } from "@olympusdao/component-library";
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { trackGAEvent } from "src/helpers/analytics/trackGAEvent";
 
 const fireAnalyticsEvent = () => {
diff --git a/src/components/Sidebar/NavContent.tsx b/src/components/Sidebar/NavContent.tsx
index 902461b1aa..ae110e01dc 100644
--- a/src/components/Sidebar/NavContent.tsx
+++ b/src/components/Sidebar/NavContent.tsx
@@ -3,8 +3,8 @@ import { styled } from "@mui/material/styles";
 import { Icon } from "@olympusdao/component-library";
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
-import { ReactComponent as OlympusIcon } from "src/assets/icons/olympus-nav-header.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
+import OlympusIcon from "src/assets/icons/olympus-nav-header.svg?react";
 import NavItem from "src/components/library/NavItem";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useTestableNetworks } from "src/hooks/useTestableNetworks";
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
index 4a51f1c88a..cc14ea3c3c 100644
--- a/src/components/TopBar/TopBar.tsx
+++ b/src/components/TopBar/TopBar.tsx
@@ -1,7 +1,7 @@
 // import "src/components/TopBar/TopBar.scss";
 
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
-import { ReactComponent as MenuIcon } from "src/assets/icons/hamburger.svg";
+import MenuIcon from "src/assets/icons/hamburger.svg?react";
 import ConnectButton from "src/components/ConnectButton/ConnectButton";
 import ThemeSwitcher from "src/components/TopBar/ThemeSwitch";
 
diff --git a/src/views/Bond/components/BondList.tsx b/src/views/Bond/components/BondList.tsx
index 979ea6b177..a33c3d3a67 100644
--- a/src/views/Bond/components/BondList.tsx
+++ b/src/views/Bond/components/BondList.tsx
@@ -12,7 +12,7 @@ import {
 } from "@mui/material";
 import { TertiaryButton, TokenStack } from "@olympusdao/component-library";
 import { NavLink } from "react-router-dom";
-import { ReactComponent as ArrowUp } from "src/assets/icons/arrow-up.svg";
+import ArrowUp from "src/assets/icons/arrow-up.svg?react";
 import { sortByDiscount } from "src/helpers/bonds/sortByDiscount";
 import { Token } from "src/helpers/contracts/Token";
 import { useScreenSize } from "src/hooks/useScreenSize";
diff --git a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
index 5b870534d3..2baacd7662 100644
--- a/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
+++ b/src/views/Lending/Cooler/positions/CreateOrRepayLoan.tsx
@@ -2,7 +2,7 @@ import { Box, Divider, SvgIcon } from "@mui/material";
 import { Modal, OHMSwapCardProps, PrimaryButton, SwapCard, SwapCollection } from "@olympusdao/component-library";
 import { BigNumber, ethers } from "ethers";
 import { useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { formatNumber } from "src/helpers";
@@ -253,11 +253,11 @@ export const CreateOrRepayLoan = ({
                     ? Number(paymentAmount) > Number(loanPayable)
                       ? `Payback Amount exceeds Loan`
                       : Number(paymentAmount.toString()) > Number(maxYouCanBorrow)
-                      ? `Insufficient Funds for Repayment`
-                      : `Repay Loan`
+                        ? `Insufficient Funds for Repayment`
+                        : `Repay Loan`
                     : Number(paymentAmount.toString()) > maxYouCanBorrow
-                    ? `Amount requested exceeds capacity`
-                    : `Borrow DAI & Open Position`}
+                      ? `Amount requested exceeds capacity`
+                      : `Borrow DAI & Open Position`}
                 </PrimaryButton>
               </TokenAllowanceGuard>
             )}
diff --git a/src/views/Lending/Cooler/positions/DelegateVoting.tsx b/src/views/Lending/Cooler/positions/DelegateVoting.tsx
index 44027ceca2..d28e1b2a2a 100644
--- a/src/views/Lending/Cooler/positions/DelegateVoting.tsx
+++ b/src/views/Lending/Cooler/positions/DelegateVoting.tsx
@@ -2,7 +2,7 @@ import { Box, Link, SvgIcon } from "@mui/material";
 import { Input, Modal, PrimaryButton } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import { useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { WalletConnectedGuard } from "src/components/WalletConnectedGuard";
 import { useDelegateVoting } from "src/views/Lending/Cooler/hooks/useDelegateVoting";
 import { useNetwork } from "wagmi";
diff --git a/src/views/Lending/Cooler/positions/ExtendLoan.tsx b/src/views/Lending/Cooler/positions/ExtendLoan.tsx
index 9baabb5f8f..9e7780c1ce 100644
--- a/src/views/Lending/Cooler/positions/ExtendLoan.tsx
+++ b/src/views/Lending/Cooler/positions/ExtendLoan.tsx
@@ -2,7 +2,7 @@ import { Box, Skeleton, SvgIcon, Typography } from "@mui/material";
 import { Icon, Input, Metric, Modal, PrimaryButton } from "@olympusdao/component-library";
 import { BigNumber, ethers } from "ethers";
 import { useMemo, useState } from "react";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { TokenAllowanceGuard } from "src/components/TokenAllowanceGuard/TokenAllowanceGuard";
 import { formatNumber } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
diff --git a/src/views/MyBalances/MyCoolerLoans.tsx b/src/views/MyBalances/MyCoolerLoans.tsx
index 4932993af9..49523888fd 100644
--- a/src/views/MyBalances/MyCoolerLoans.tsx
+++ b/src/views/MyBalances/MyCoolerLoans.tsx
@@ -2,7 +2,7 @@ import { Box, Divider, LinearProgress, Link, SvgIcon, Typography, useTheme } fro
 import { Token } from "@olympusdao/component-library";
 import { ethers } from "ethers";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as lendAndBorrowIcon } from "src/assets/icons/lendAndBorrow.svg";
+import lendAndBorrowIcon from "src/assets/icons/lendAndBorrow.svg?react";
 import { formatCurrency } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useCurrentIndex } from "src/hooks/useCurrentIndex";
diff --git a/src/views/MyBalances/MyGohmBalances.tsx b/src/views/MyBalances/MyGohmBalances.tsx
index c74cc21dfc..0c1ac075a4 100644
--- a/src/views/MyBalances/MyGohmBalances.tsx
+++ b/src/views/MyBalances/MyGohmBalances.tsx
@@ -1,7 +1,7 @@
 import { Box, Divider, Link, SvgIcon, Typography, useTheme } from "@mui/material";
 import { PrimaryButton, SecondaryButton, TextButton, Token } from "@olympusdao/component-library";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { formatCurrency } from "src/helpers";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useGohmBalance } from "src/hooks/useBalance";
diff --git a/src/views/MyBalances/MyOhmBalances.tsx b/src/views/MyBalances/MyOhmBalances.tsx
index 09753e0eec..4a03fc8abb 100644
--- a/src/views/MyBalances/MyOhmBalances.tsx
+++ b/src/views/MyBalances/MyOhmBalances.tsx
@@ -2,7 +2,7 @@ import { Box, Divider, Link, SvgIcon, Typography } from "@mui/material";
 import { PrimaryButton, SecondaryButton, TextButton, Token } from "@olympusdao/component-library";
 import { useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
+import WalletIcon from "src/assets/icons/wallet.svg?react";
 import { MigrationNotification } from "src/components/MigrationNotification";
 import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
 import { useOhmBalance, useSohmBalance, useV1OhmBalance, useV1SohmBalance } from "src/hooks/useBalance";
diff --git a/src/views/TreasuryDashboard/components/Graph/ChartCard.tsx b/src/views/TreasuryDashboard/components/Graph/ChartCard.tsx
index 4494d4e0f8..8ba2285d80 100644
--- a/src/views/TreasuryDashboard/components/Graph/ChartCard.tsx
+++ b/src/views/TreasuryDashboard/components/Graph/ChartCard.tsx
@@ -1,8 +1,8 @@
 import { Grid, Link, Skeleton, SvgIcon, Typography } from "@mui/material";
 import { InfoTooltip, Tooltip } from "@olympusdao/component-library";
 import { ReactElement } from "react";
-import { ReactComponent as Fullscreen } from "src/assets/icons/fullscreen.svg";
-import { ReactComponent as GraphLogo } from "src/assets/icons/graph-grt-logo.svg";
+import Fullscreen from "src/assets/icons/fullscreen.svg?react";
+import GraphLogo from "src/assets/icons/graph-grt-logo.svg?react";
 
 type ChartCardProps = {
   headerText: string;