diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx
index e96884eb21899..dbbaf2761af7c 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.native.tsx
@@ -5,7 +5,7 @@ import AttachmentCarouselPager from '@components/Attachments/AttachmentCarousel/
 import type {AttachmentCarouselPagerHandle} from '@components/Attachments/AttachmentCarousel/Pager';
 import type {AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
@@ -30,6 +30,7 @@ function AttachmentCarouselView({
     const {translate} = useLocalize();
     const canUseTouchScreen = canUseTouchScreenUtil();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource>(attachmentID ?? source);
 
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
@@ -80,7 +81,7 @@ function AttachmentCarouselView({
         >
             {page === -1 ? (
                 <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
+                    icon={illustrations.ToddBehindCloud}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx
index 92a7a7b92d364..b988206adcca7 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx
@@ -13,8 +13,8 @@ import type {UpdatePageProps} from '@components/Attachments/AttachmentCarousel/t
 import useCarouselContextEvents from '@components/Attachments/AttachmentCarousel/useCarouselContextEvents';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import * as Illustrations from '@components/Icon/Illustrations';
 import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -62,6 +62,7 @@ function AttachmentCarouselView({
 }: AttachmentCarouselViewProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     const canUseTouchScreen = canUseTouchScreenUtil();
     const {isFullScreenRef} = useFullScreenContext();
     const isPagerScrolling = useSharedValue(false);
@@ -239,7 +240,7 @@ function AttachmentCarouselView({
         >
             {page === -1 ? (
                 <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
+                    icon={illustrations.ToddBehindCloud}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
                     title={translate('notFound.notHere')}
diff --git a/src/components/AutoSubmitModal.tsx b/src/components/AutoSubmitModal.tsx
index 401675d66ccef..e78953d07f964 100644
--- a/src/components/AutoSubmitModal.tsx
+++ b/src/components/AutoSubmitModal.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback} from 'react';
 import {InteractionManager, View} from 'react-native';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -12,6 +13,7 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import Icon from './Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
@@ -33,6 +35,7 @@ function AutoSubmitModal() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['ReceiptsStackedOnPin'] as const);
 
     const onClose = useCallback((willShowAgain: boolean) => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -50,7 +53,7 @@ function AutoSubmitModal() {
             title={translate('autoSubmitModal.title')}
             description={translate('autoSubmitModal.description')}
             confirmText={translate('common.buttonConfirm')}
-            image={Illustrations.ReceiptsStackedOnPin}
+            image={illustrations.ReceiptsStackedOnPin}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
             imageWidth={variables.changePolicyEducationModalIconWidth}
diff --git a/src/components/BlockingViews/FullPageErrorView.tsx b/src/components/BlockingViews/FullPageErrorView.tsx
index a46556d3744fa..858324d4987dc 100644
--- a/src/components/BlockingViews/FullPageErrorView.tsx
+++ b/src/components/BlockingViews/FullPageErrorView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextStyle} from 'react-native';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import BlockingView from './BlockingView';
@@ -33,6 +33,7 @@ type FullPageErrorViewProps = {
 // eslint-disable-next-line rulesdir/no-negated-variables
 function FullPageErrorView({testID, children = null, shouldShow = false, title = '', subtitle = '', shouldForceFullScreen = false, subtitleStyle}: FullPageErrorViewProps) {
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass'] as const);
 
     if (shouldShow) {
         return (
@@ -42,7 +43,7 @@ function FullPageErrorView({testID, children = null, shouldShow = false, title =
                     testID={testID}
                 >
                     <BlockingView
-                        icon={Illustrations.BrokenMagnifyingGlass}
+                        icon={illustrations.BrokenMagnifyingGlass}
                         iconWidth={variables.errorPageIconWidth}
                         iconHeight={variables.errorPageIconHeight}
                         title={title}
diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx
index 046fc4718b595..cf986fb1652a4 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.tsx
+++ b/src/components/BlockingViews/FullPageNotFoundView.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextStyle} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -85,6 +85,7 @@ function FullPageNotFoundView({
     const styles = useThemeStyles();
     const {isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
 
     if (shouldShow) {
         StatsCounter('FullPageNotFoundView');
@@ -100,7 +101,7 @@ function FullPageNotFoundView({
                     testID={testID}
                 >
                     <BlockingView
-                        icon={Illustrations.ToddBehindCloud}
+                        icon={illustrations.ToddBehindCloud}
                         iconWidth={variables.modalTopIconWidth}
                         iconHeight={variables.modalTopIconHeight}
                         title={translate(titleKey)}
diff --git a/src/components/BookTravelButton.tsx b/src/components/BookTravelButton.tsx
index 7979da4b19db4..fe505228e76cd 100644
--- a/src/components/BookTravelButton.tsx
+++ b/src/components/BookTravelButton.tsx
@@ -4,6 +4,7 @@ import type {ReactElement} from 'react';
 import React, {useCallback, useEffect, useState} from 'react';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
@@ -23,7 +24,6 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import Button from './Button';
 import ConfirmModal from './ConfirmModal';
 import DotIndicatorMessage from './DotIndicatorMessage';
-import {RocketDude} from './Icon/Illustrations';
 import RenderHTML from './RenderHTML';
 
 type BookTravelButtonProps = {
@@ -49,6 +49,7 @@ const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
 function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, setShouldScrollToBottom}: BookTravelButtonProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['RocketDude'] as const);
     const {translate} = useLocalize();
     const {environmentURL} = useEnvironment();
     const phoneErrorMethodsRoute = `${environmentURL}/${ROUTES.SETTINGS_CONTACT_METHODS.getRoute(Navigation.getActiveRoute())}`;
@@ -189,7 +190,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
                 titleContainerStyles={styles.mb2}
                 onConfirm={hidePreventionModal}
                 onCancel={hidePreventionModal}
-                image={RocketDude}
+                image={illustrations.RocketDude}
                 imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
                 isVisible={isPreventionModalVisible}
                 prompt={translate('travel.blockedFeatureModal.message')}
@@ -203,7 +204,7 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, se
                 titleContainerStyles={styles.mb2}
                 onConfirm={hideVerificationModal}
                 onCancel={hideVerificationModal}
-                image={RocketDude}
+                image={illustrations.RocketDude}
                 imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
                 isVisible={isVerificationModalVisible}
                 prompt={translate('travel.verifyCompany.message')}
diff --git a/src/components/ContactPermissionModal/index.native.tsx b/src/components/ContactPermissionModal/index.native.tsx
index 113bd7f3e9d49..d03604679d6a5 100644
--- a/src/components/ContactPermissionModal/index.native.tsx
+++ b/src/components/ContactPermissionModal/index.native.tsx
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {InteractionManager} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -17,6 +17,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
 
     useEffect(() => {
         if (hasDeniedContactImportPrompt) {
@@ -77,7 +78,7 @@ function ContactPermissionModal({onDeny, onGrant, onFocusTextInput}: ContactPerm
             title={translate('contact.importContactsTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
             titleStyles={[styles.textHeadline]}
-            iconSource={Illustrations.ToddWithPhones}
+            iconSource={illustrations.ToddWithPhones}
             iconFill={false}
             iconWidth={176}
             iconHeight={178}
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx
index 4d914f8ead598..c50581b6b650f 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.tsx
@@ -2,10 +2,11 @@ import {emailSelector} from '@selectors/Session';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
@@ -22,6 +23,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['RocketBlue'] as const);
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: emailSelector, canBeMissing: true});
     return (
         <View style={styles.deeplinkWrapperContainer}>
@@ -30,7 +32,7 @@ function DeeplinkRedirectLoadingIndicator({openLinkInBrowser}: DeeplinkRedirectL
                     <Icon
                         width={200}
                         height={164}
-                        src={Illustrations.RocketBlue}
+                        src={illustrations.RocketBlue}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>
diff --git a/src/components/EmptySelectionListContent.tsx b/src/components/EmptySelectionListContent.tsx
index 103fa62a632e7..8e74e8cfdb320 100644
--- a/src/components/EmptySelectionListContent.tsx
+++ b/src/components/EmptySelectionListContent.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BlockingView from './BlockingViews/BlockingView';
-import * as Illustrations from './Icon/Illustrations';
 import ScrollView from './ScrollView';
 import Text from './Text';
 
@@ -24,6 +24,7 @@ function isContentType(contentType: unknown): contentType is ContentType {
 
 function EmptySelectionListContent({contentType}: EmptySelectionListContentProps) {
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones'] as const);
     const {translate} = useLocalize();
 
     if (!isContentType(contentType)) {
@@ -36,7 +37,7 @@ function EmptySelectionListContent({contentType}: EmptySelectionListContentProps
         <ScrollView contentContainerStyle={[styles.flexGrow1]}>
             <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}>
                 <BlockingView
-                    icon={Illustrations.ToddWithPhones}
+                    icon={illustrations.ToddWithPhones}
                     iconWidth={variables.emptySelectionListIconWidth}
                     iconHeight={variables.emptySelectionListIconHeight}
                     title={translate(`emptyList.${translationKeyContentType}.title`)}
diff --git a/src/components/FocusModeNotification.tsx b/src/components/FocusModeNotification.tsx
index 8a8387d9ed104..223710f3f817c 100644
--- a/src/components/FocusModeNotification.tsx
+++ b/src/components/FocusModeNotification.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {View} from 'react-native';
 import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import ConfirmModal from './ConfirmModal';
-import {ThreeLeggedLaptopWoman} from './Icon/Illustrations';
 import RenderHTML from './RenderHTML';
 
 type FocusModeNotificationProps = {
@@ -16,6 +16,7 @@ type FocusModeNotificationProps = {
 function FocusModeNotification({onClose}: FocusModeNotificationProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['ThreeLeggedLaptopWoman'] as const);
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
     const priorityModePageUrl = `${environmentURL}/settings/preferences/priority-mode`;
@@ -34,7 +35,7 @@ function FocusModeNotification({onClose}: FocusModeNotificationProps) {
                 </View>
             }
             isVisible
-            image={ThreeLeggedLaptopWoman}
+            image={illustrations.ThreeLeggedLaptopWoman}
             imageStyles={StyleUtils.getBackgroundColorStyle(colors.pink800)}
             titleStyles={[styles.textHeadline, styles.mbn3]}
         />
diff --git a/src/components/HoldSubmitterEducationalModal.tsx b/src/components/HoldSubmitterEducationalModal.tsx
index 925af76a65806..a1469e941f06f 100644
--- a/src/components/HoldSubmitterEducationalModal.tsx
+++ b/src/components/HoldSubmitterEducationalModal.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import useBeforeRemove from '@hooks/useBeforeRemove';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import HoldMenuSectionList from './HoldMenuSectionList';
-import * as Illustrations from './Icon/Illustrations';
 
 type HoldSubmitterEducationalModalProps = {
     /** Method to trigger when pressing outside of the popover menu to close it */
@@ -19,6 +19,7 @@ type HoldSubmitterEducationalModalProps = {
 function HoldSubmitterEducationalModal({onClose, onConfirm}: HoldSubmitterEducationalModalProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['HoldExpense'] as const);
 
     useBeforeRemove(onClose);
 
@@ -27,7 +28,7 @@ function HoldSubmitterEducationalModal({onClose, onConfirm}: HoldSubmitterEducat
             title={translate('iou.holdEducationalTitle')}
             description={translate('iou.whatIsHoldExplain')}
             confirmText={translate('common.buttonConfirm')}
-            image={Illustrations.HoldExpense}
+            image={illustrations.HoldExpense}
             contentFitImage="cover"
             width={variables.holdEducationModalWidth}
             illustrationAspectRatio={CONST.ILLUSTRATION_ASPECT_RATIO}
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 456e4ae1a0552..05ebee1667ba7 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -29,29 +29,6 @@ import LaptopOnDeskWithCoffeeAndKey from '@assets/images/laptop-on-desk-with-cof
 import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-second-screen-and-hourglass.svg';
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
-import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
-import BrokenCompanyCardBankConnection from '@assets/images/product-illustrations/broken-humpty-dumpty.svg';
-import BrokenMagnifyingGlass from '@assets/images/product-illustrations/broken-magnifying-glass.svg';
-import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
-import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
-import ReceiptFairy from '@assets/images/product-illustrations/emptystate__receiptfairy.svg';
-import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
-import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
-import CardReplacementSuccess from '@assets/images/product-illustrations/illustration__card-replacement-success.svg';
-import MagicCode from '@assets/images/product-illustrations/magic-code.svg';
-import ModalHoldOrReject from '@assets/images/product-illustrations/modal-hold-or-reject.svg';
-import MushroomTopHat from '@assets/images/product-illustrations/mushroom-top-hat.svg';
-import PaymentHands from '@assets/images/product-illustrations/payment-hands.svg';
-import ReceiptsStackedOnPin from '@assets/images/product-illustrations/receipts-stacked-on-pin.svg';
-import RocketBlue from '@assets/images/product-illustrations/rocket--blue.svg';
-import RocketDude from '@assets/images/product-illustrations/rocket-dude.svg';
-import SewerDino from '@assets/images/product-illustrations/sewer_dino.svg';
-import SmartScan from '@assets/images/product-illustrations/simple-illustration__smartscan.svg';
-import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg';
-import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
-import ToddInCar from '@assets/images/product-illustrations/todd-in-car.svg';
-import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg';
-import RunningTurtle from '@assets/images/running-turtle.svg';
 import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces.svg';
 import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
 import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
@@ -115,29 +92,16 @@ import ExpensifyApprovedLogo from '@assets/images/subscription-details__approved
 import TurtleInShell from '@assets/images/turtle-in-shell.svg';
 
 export {
-    Abracadabra,
     Encryption,
-    BrokenMagnifyingGlass,
     ChatBubbles,
     PinkCar,
     Computer,
     EmailAddress,
     EmptyCardState,
-    EmptyStateExpenses,
     EnvelopeReceipt,
     ExpensifyCardImage,
-    PaymentHands,
-    MagicCode,
     Mailbox,
-    MushroomTopHat,
-    RocketBlue,
-    RocketDude,
-    ToddBehindCloud,
-    SewerDino,
-    ToddWithPhones,
-    ToddInCar,
     ShieldYellow,
-    BrokenCompanyCardBankConnection,
     CreditCardsNewGreen,
     LaptopWithSecondScreenAndHourglass,
     LaptopWithSecondScreenSync,
@@ -148,9 +112,7 @@ export {
     ConciergeBubble,
     TreasureChest,
     ThumbsUpStars,
-    Hands,
     HeadSet,
-    SmartScan,
     Hourglass,
     CommentBubbles,
     TrashCan,
@@ -161,11 +123,8 @@ export {
     Gears,
     QRCode,
     RealtimeReport,
-    HoldExpense,
-    ReceiptFairy,
     Approval,
     PendingBank,
-    ThreeLeggedLaptopWoman,
     House,
     Buildings,
     Alert,
@@ -189,11 +148,9 @@ export {
     CheckmarkCircle,
     CreditCardEyes,
     LockClosedOrange,
-    FolderWithPapers,
     VirtualCard,
     Tire,
     Filters,
-    RunningTurtle,
     CompanyCardsPendingState,
     VisaCompanyCardDetail,
     MasterCardCompanyCardDetail,
@@ -219,13 +176,10 @@ export {
     WellsFargoCompanyCardDetailLarge,
     Flash,
     ExpensifyMobileApp,
-    ModalHoldOrReject,
     ThumbsDown,
     PlaidCompanyCardDetailLarge,
     PlaidCompanyCardDetail,
-    ReceiptsStackedOnPin,
     PaperAirplane,
-    CardReplacementSuccess,
     EmptyShelves,
     BlueShield,
     OpenSafe,
diff --git a/src/components/Icon/chunks/illustrations.chunk.ts b/src/components/Icon/chunks/illustrations.chunk.ts
index b1f566acf4462..034186ecf9948 100644
--- a/src/components/Icon/chunks/illustrations.chunk.ts
+++ b/src/components/Icon/chunks/illustrations.chunk.ts
@@ -18,9 +18,29 @@ import LaptopWithSecondScreenAndHourglass from '@assets/images/laptop-with-secon
 import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen-sync.svg';
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
 // Product Illustrations
+import Abracadabra from '@assets/images/product-illustrations/abracadabra.svg';
+import BrokenCompanyCardBankConnection from '@assets/images/product-illustrations/broken-humpty-dumpty.svg';
+import BrokenMagnifyingGlass from '@assets/images/product-illustrations/broken-magnifying-glass.svg';
+import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
+import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
+import ReceiptFairy from '@assets/images/product-illustrations/emptystate__receiptfairy.svg';
+import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
+import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
+import CardReplacementSuccess from '@assets/images/product-illustrations/illustration__card-replacement-success.svg';
+import MagicCode from '@assets/images/product-illustrations/magic-code.svg';
 import ModalHoldOrReject from '@assets/images/product-illustrations/modal-hold-or-reject.svg';
+import MushroomTopHat from '@assets/images/product-illustrations/mushroom-top-hat.svg';
+import PaymentHands from '@assets/images/product-illustrations/payment-hands.svg';
+import ReceiptsStackedOnPin from '@assets/images/product-illustrations/receipts-stacked-on-pin.svg';
+import RocketBlue from '@assets/images/product-illustrations/rocket--blue.svg';
+import RocketDude from '@assets/images/product-illustrations/rocket-dude.svg';
+import SewerDino from '@assets/images/product-illustrations/sewer_dino.svg';
+import SmartScan from '@assets/images/product-illustrations/simple-illustration__smartscan.svg';
 import TeleScope from '@assets/images/product-illustrations/telescope.svg';
+import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg';
 import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
+import ToddInCar from '@assets/images/product-illustrations/todd-in-car.svg';
+import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import RunningTurtle from '@assets/images/running-turtle.svg';
 import Shutter from '@assets/images/shutter.svg';
@@ -102,10 +122,30 @@ const Illustrations = {
     ExpensifyCardIllustration,
 
     // Product Illustrations
+    Abracadabra,
+    BrokenCompanyCardBankConnection,
+    BrokenMagnifyingGlass,
+    EmptyStateExpenses,
+    HoldExpense,
+    ReceiptFairy,
+    FolderWithPapers,
+    Hands,
+    CardReplacementSuccess,
+    MagicCode,
     ModalHoldOrReject,
+    MushroomTopHat,
+    PaymentHands,
+    ReceiptsStackedOnPin,
+    RocketBlue,
+    RocketDude,
+    SewerDino,
+    SmartScan,
     TeleScope,
     Telescope: TeleScope, // Alias for consistency
+    ThreeLeggedLaptopWoman,
     ToddBehindCloud,
+    ToddInCar,
+    ToddWithPhones,
 
     // Educational Illustrations
     MultiScan,
diff --git a/src/components/OnboardingMergingAccountBlockedView.tsx b/src/components/OnboardingMergingAccountBlockedView.tsx
index ac114724a11ae..164233308fae6 100644
--- a/src/components/OnboardingMergingAccountBlockedView.tsx
+++ b/src/components/OnboardingMergingAccountBlockedView.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,7 +10,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import BlockingView from './BlockingViews/BlockingView';
 import Button from './Button';
-import {ToddBehindCloud} from './Icon/Illustrations';
 
 type OnboardingMergingAccountBlockedViewProps = {
     // Work email to display in the subtitle
@@ -22,6 +22,7 @@ type OnboardingMergingAccountBlockedViewProps = {
 function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergingAccountBlockedViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     const [onboardingErrorMessage] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE_TRANSLATION_KEY, {canBeMissing: true});
 
     const getErrorSubtitle = () => {
@@ -35,7 +36,7 @@ function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergi
     return (
         <>
             <BlockingView
-                icon={ToddBehindCloud}
+                icon={illustrations.ToddBehindCloud}
                 iconWidth={variables.modalTopIconWidth}
                 iconHeight={variables.modalTopIconHeight}
                 title={translate('onboarding.mergeBlockScreen.title')}
diff --git a/src/components/SAMLLoadingIndicator.tsx b/src/components/SAMLLoadingIndicator.tsx
index 2be7b76e6cae1..2de503985e7d0 100644
--- a/src/components/SAMLLoadingIndicator.tsx
+++ b/src/components/SAMLLoadingIndicator.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from './Icon/Expensicons';
-import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
 function SAMLLoadingIndicator() {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['RocketBlue'] as const);
     const {translate} = useLocalize();
     return (
         <View style={[StyleSheet.absoluteFillObject, styles.deeplinkWrapperContainer]}>
@@ -20,7 +22,7 @@ function SAMLLoadingIndicator() {
                     <Icon
                         width={200}
                         height={164}
-                        src={Illustrations.RocketBlue}
+                        src={illustrations.RocketBlue}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('samlSignIn.launching')}</Text>
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx
index 18172544d9d11..1499be0948d11 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx
@@ -1,24 +1,26 @@
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
-import * as Session from '@userActions/Session';
+import {beginSignIn} from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 function ExpiredValidateCodeModal() {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS, {canBeMissing: true});
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     return (
         <View style={styles.deeplinkWrapperContainer}>
             <View style={styles.deeplinkWrapperMessage}>
@@ -26,7 +28,7 @@ function ExpiredValidateCodeModal() {
                     <Icon
                         width={variables.modalTopIconWidth}
                         height={variables.modalTopIconHeight}
-                        src={Illustrations.ToddBehindCloud}
+                        src={illustrations.ToddBehindCloud}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.expiredCodeTitle')}</Text>
@@ -37,7 +39,7 @@ function ExpiredValidateCodeModal() {
                             {translate('validateCodeModal.or')}{' '}
                             <TextLink
                                 onPress={() => {
-                                    Session.beginSignIn(credentials?.login ?? '');
+                                    beginSignIn(credentials?.login ?? '');
                                     Navigation.setNavigationActionToMicrotaskQueue(Navigation.goBack);
                                 }}
                             >
diff --git a/src/components/ValidateCode/ValidateCodeModal.tsx b/src/components/ValidateCode/ValidateCodeModal.tsx
index 302c3097326d8..a0b7437d83e28 100644
--- a/src/components/ValidateCode/ValidateCodeModal.tsx
+++ b/src/components/ValidateCode/ValidateCodeModal.tsx
@@ -3,9 +3,9 @@ import {View} from 'react-native';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ExpensifyWordmark from '@components/ExpensifyWordmark';
 import Icon from '@components/Icon';
-import {MagicCode} from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -27,6 +27,7 @@ type ValidateCodeModalProps = {
 function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['MagicCode'] as const);
     const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
     const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE, {canBeMissing: true});
     const signInHere = useCallback(() => signInWithValidateCode(accountID, code, preferredLocale), [accountID, code, preferredLocale]);
@@ -51,7 +52,7 @@ function ValidateCodeModal({code, accountID}: ValidateCodeModalProps) {
                         <Icon
                             width={variables.modalTopIconWidth}
                             height={variables.modalTopIconHeight}
-                            src={MagicCode}
+                            src={illustrations.MagicCode}
                         />
                     </View>
                     <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
diff --git a/src/pages/ChangePolicyEducationalModal.tsx b/src/pages/ChangePolicyEducationalModal.tsx
index ecc8d1fd4a760..ce2a638eb375f 100644
--- a/src/pages/ChangePolicyEducationalModal.tsx
+++ b/src/pages/ChangePolicyEducationalModal.tsx
@@ -1,8 +1,8 @@
 import React, {useCallback} from 'react';
 import ChangeWorkspaceMenuSectionList from '@components/ChangeWorkspaceMenuSectionList';
 import FeatureTrainingModal from '@components/FeatureTrainingModal';
-import * as Illustrations from '@components/Icon/Illustrations';
 import useBeforeRemove from '@hooks/useBeforeRemove';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,6 +15,7 @@ function ChangePolicyEducationalModal() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['ReceiptFairy'] as const);
 
     const onConfirm = useCallback(() => {
         dismissChangePolicyModal();
@@ -27,7 +28,7 @@ function ChangePolicyEducationalModal() {
             title={translate('iou.changePolicyEducational.title')}
             description={translate('iou.changePolicyEducational.description')}
             confirmText={translate('common.buttonConfirm')}
-            image={Illustrations.ReceiptFairy}
+            image={illustrations.ReceiptFairy}
             imageWidth={variables.changePolicyEducationModalIconWidth}
             imageHeight={variables.changePolicyEducationModalIconHeight}
             contentFitImage="cover"
diff --git a/src/pages/EnablePayments/VerifyIdentity/VerifyIdentity.tsx b/src/pages/EnablePayments/VerifyIdentity/VerifyIdentity.tsx
index 0978a1c8d9ec4..ccd5d747210f7 100644
--- a/src/pages/EnablePayments/VerifyIdentity/VerifyIdentity.tsx
+++ b/src/pages/EnablePayments/VerifyIdentity/VerifyIdentity.tsx
@@ -5,20 +5,20 @@ import FixedFooter from '@components/FixedFooter';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
-import * as Illustrations from '@components/Icon/Illustrations';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import Onfido from '@components/Onfido';
 import type {OnfidoData} from '@components/Onfido/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ErrorUtils from '@libs/ErrorUtils';
+import {getLatestErrorMessage} from '@libs/ErrorUtils';
 import Growl from '@libs/Growl';
-import * as BankAccounts from '@userActions/BankAccounts';
-import * as Wallet from '@userActions/Wallet';
+import {openOnfidoFlow, updateAddPersonalBankAccountDraft, verifyIdentity} from '@userActions/BankAccounts';
+import {updateCurrentStep} from '@userActions/Wallet';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -27,33 +27,30 @@ const ONFIDO_ERROR_DISPLAY_DURATION = 10000;
 function VerifyIdentity() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [walletOnfidoData] = useOnyx(ONYXKEYS.WALLET_ONFIDO, {initWithStoredValues: false});
-
-    const openOnfidoFlow = () => {
-        BankAccounts.openOnfidoFlow();
-    };
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
+    const [walletOnfidoData] = useOnyx(ONYXKEYS.WALLET_ONFIDO, {canBeMissing: true, initWithStoredValues: false});
 
     const handleOnfidoSuccess = useCallback(
         (onfidoData: OnfidoData) => {
-            BankAccounts.verifyIdentity({
+            verifyIdentity({
                 onfidoData: JSON.stringify({
                     ...onfidoData,
                     applicantID: walletOnfidoData?.applicantID,
                 }),
             });
-            BankAccounts.updateAddPersonalBankAccountDraft({isOnfidoSetupComplete: true});
+            updateAddPersonalBankAccountDraft({isOnfidoSetupComplete: true});
         },
         [walletOnfidoData?.applicantID],
     );
 
-    const onfidoError = ErrorUtils.getLatestErrorMessage(walletOnfidoData) ?? '';
+    const onfidoError = getLatestErrorMessage(walletOnfidoData) ?? '';
 
     const handleOnfidoError = () => {
         Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION);
     };
 
     const goBack = () => {
-        Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS);
+        updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS);
     };
 
     return (
@@ -81,7 +78,7 @@ function VerifyIdentity() {
                         <>
                             <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.m5, styles.ph5]}>
                                 <Icon
-                                    src={Illustrations.ToddBehindCloud}
+                                    src={illustrations.ToddBehindCloud}
                                     width={100}
                                     height={100}
                                 />
diff --git a/src/pages/ErrorPage/SessionExpiredPage.tsx b/src/pages/ErrorPage/SessionExpiredPage.tsx
index 31f6210a0d31e..afa92be1d1c02 100644
--- a/src/pages/ErrorPage/SessionExpiredPage.tsx
+++ b/src/pages/ErrorPage/SessionExpiredPage.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,6 +16,7 @@ function SessionExpiredPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const theme = useTheme();
+    const illustrations = useMemoizedLazyIllustrations(['RocketBlue'] as const);
 
     return (
         <View style={styles.deeplinkWrapperContainer}>
@@ -23,7 +25,7 @@ function SessionExpiredPage() {
                     <Icon
                         width={200}
                         height={164}
-                        src={Illustrations.RocketBlue}
+                        src={illustrations.RocketBlue}
                     />
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>
diff --git a/src/pages/ReferralDetailsPage.tsx b/src/pages/ReferralDetailsPage.tsx
index 5fe1ce92c61b3..6a8635eac29c0 100644
--- a/src/pages/ReferralDetailsPage.tsx
+++ b/src/pages/ReferralDetailsPage.tsx
@@ -2,10 +2,11 @@ import React, {useRef} from 'react';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderPageLayout from '@components/HeaderPageLayout';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PaymentHands} from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -27,8 +28,9 @@ type ReferralDetailsPageProps = PlatformStackScreenProps<ReferralDetailsNavigato
 function ReferralDetailsPage({route}: ReferralDetailsPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['PaymentHands'] as const);
     const {translate} = useLocalize();
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
     const popoverAnchor = useRef(null);
     const {isExecuting, singleExecution} = useSingleExecution();
     let {contentType} = route.params;
@@ -49,7 +51,7 @@ function ReferralDetailsPage({route}: ReferralDetailsPageProps) {
             title={translate('common.referral')}
             headerContent={
                 <Icon
-                    src={PaymentHands}
+                    src={illustrations.PaymentHands}
                     width={589}
                     height={232}
                 />
diff --git a/src/pages/Travel/TravelTerms.tsx b/src/pages/Travel/TravelTerms.tsx
index aee995c8b989c..bc081210f3053 100644
--- a/src/pages/Travel/TravelTerms.tsx
+++ b/src/pages/Travel/TravelTerms.tsx
@@ -8,11 +8,10 @@ import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import ConfirmModal from '@components/ConfirmModal';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-// eslint-disable-next-line no-restricted-imports
-import {RocketDude} from '@components/Icon/Illustrations';
 import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
@@ -38,6 +37,7 @@ function TravelTerms({route}: TravelTermsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['RocketDude'] as const);
     const {isBetaEnabled} = usePermissions();
     const isBlockedFromSpotnanaTravel = isBetaEnabled(CONST.BETAS.PREVENT_SPOTNANA_TRAVEL);
     const [hasAcceptedTravelTerms, setHasAcceptedTravelTerms] = useState(false);
@@ -168,7 +168,7 @@ function TravelTerms({route}: TravelTermsPageProps) {
                 promptStyles={styles.mb2}
                 confirmText={translate('travel.verifyCompany.confirmText')}
                 shouldShowCancelButton={false}
-                image={RocketDude}
+                image={illustrations.RocketDude}
                 imageStyles={StyleUtils.getBackgroundColorStyle(colors.ice600)}
             />
         </>
diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx
index 1250e2970da78..39932c5cace67 100644
--- a/src/pages/iou/request/step/IOURequestStepCategory.tsx
+++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx
@@ -6,11 +6,11 @@ import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOffli
 import Button from '@components/Button';
 import CategoryPicker from '@components/CategoryPicker';
 import FixedFooter from '@components/FixedFooter';
-import * as Illustrations from '@components/Icon/Illustrations';
 import {useSearchContext} from '@components/Search/SearchContext';
 import type {ListItem} from '@components/SelectionListWithSections/types';
 import Text from '@components/Text';
 import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -50,6 +50,7 @@ function IOURequestStepCategory({
 }: IOURequestStepCategoryProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['EmptyStateExpenses'] as const);
 
     const isUnreportedExpense = isExpenseUnreported(transaction);
     const {policyForMovingExpenses, policyForMovingExpensesID} = usePolicyForMovingExpenses();
@@ -172,7 +173,7 @@ function IOURequestStepCategory({
                 <View style={[styles.flex1]}>
                     <WorkspaceEmptyStateSection
                         shouldStyleAsCard={false}
-                        icon={Illustrations.EmptyStateExpenses}
+                        icon={illustrations.EmptyStateExpenses}
                         title={translate('workspace.categories.emptyCategories.title')}
                         subtitle={translate('workspace.categories.emptyCategories.subtitle')}
                         containerStyle={[styles.flex1, styles.justifyContentCenter]}
diff --git a/src/pages/iou/request/step/IOURequestStepDestination.tsx b/src/pages/iou/request/step/IOURequestStepDestination.tsx
index fd31662399188..d7a0d65a93e65 100644
--- a/src/pages/iou/request/step/IOURequestStepDestination.tsx
+++ b/src/pages/iou/request/step/IOURequestStepDestination.tsx
@@ -5,11 +5,11 @@ import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOffli
 import Button from '@components/Button';
 import DestinationPicker from '@components/DestinationPicker';
 import FixedFooter from '@components/FixedFooter';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import type {ListItem} from '@components/SelectionListWithSections/types';
 import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -67,6 +67,7 @@ function IOURequestStepDestination({
     const selectedDestination = transaction?.comment?.customUnit?.customUnitRateID;
 
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['EmptyStateExpenses'] as const);
     const {translate} = useLocalize();
 
     // eslint-disable-next-line rulesdir/no-negated-variables
@@ -168,7 +169,7 @@ function IOURequestStepDestination({
                     <View style={[styles.flex1]}>
                         <WorkspaceEmptyStateSection
                             shouldStyleAsCard={false}
-                            icon={Illustrations.EmptyStateExpenses}
+                            icon={illustrations.EmptyStateExpenses}
                             title={translate('workspace.perDiem.emptyList.title')}
                             subtitle={translate('workspace.perDiem.emptyList.subtitle')}
                             containerStyle={[styles.flex1, styles.justifyContentCenter]}
diff --git a/src/pages/iou/request/step/IOURequestStepTag.tsx b/src/pages/iou/request/step/IOURequestStepTag.tsx
index ed30d8b9e7152..3766901060643 100644
--- a/src/pages/iou/request/step/IOURequestStepTag.tsx
+++ b/src/pages/iou/request/step/IOURequestStepTag.tsx
@@ -2,11 +2,11 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
-import {EmptyStateExpenses} from '@components/Icon/Illustrations';
 import {useSearchContext} from '@components/Search/SearchContext';
 import TagPicker from '@components/TagPicker';
 import Text from '@components/Text';
 import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
@@ -52,6 +52,7 @@ function IOURequestStepTag({
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: false});
 
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['EmptyStateExpenses'] as const);
     const {currentSearchHash} = useSearchContext();
     const {translate} = useLocalize();
     useRestartOnReceiptFailure(transaction, reportIDFromRoute, iouType, action);
@@ -146,7 +147,7 @@ function IOURequestStepTag({
                 <View style={[styles.flex1]}>
                     <WorkspaceEmptyStateSection
                         shouldStyleAsCard={false}
-                        icon={EmptyStateExpenses}
+                        icon={illustrations.EmptyStateExpenses}
                         title={translate('workspace.tags.emptyTags.title')}
                         subtitle={translate('workspace.tags.emptyTags.subtitle')}
                         containerStyle={[styles.flex1, styles.justifyContentCenter]}
diff --git a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
index 6d9d62c7f644f..c6cfff8ab1c2b 100644
--- a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
+++ b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
@@ -5,9 +5,9 @@ import Icon from '@components//Icon';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import {MushroomTopHat} from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -35,6 +35,7 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['MushroomTopHat'] as const);
     const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT, {canBeMissing: true});
     const [exitSurveyResponse] = useOnyx(ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM, {
         selector: exitResponseSelector,
@@ -77,7 +78,7 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
                 {!isOffline && (
                     <>
                         <Icon
-                            src={MushroomTopHat}
+                            src={illustrations.MushroomTopHat}
                             width={variables.mushroomTopHatWidth}
                             height={variables.mushroomTopHatHeight}
                         />
diff --git a/src/pages/settings/ExitSurvey/ExitSurveyOffline.tsx b/src/pages/settings/ExitSurvey/ExitSurveyOffline.tsx
index 3363867ad4bbc..74ceb13e3a4be 100644
--- a/src/pages/settings/ExitSurvey/ExitSurveyOffline.tsx
+++ b/src/pages/settings/ExitSurvey/ExitSurveyOffline.tsx
@@ -1,8 +1,8 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
-import {ToddBehindCloud} from '@components/Icon/Illustrations';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -10,12 +10,13 @@ import variables from '@styles/variables';
 function ExitSurveyOffline() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddBehindCloud'] as const);
     return (
         <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
             <Icon
                 width={variables.modalTopIconWidth}
                 height={variables.modalTopIconHeight}
-                src={ToddBehindCloud}
+                src={illustrations.ToddBehindCloud}
             />
             <Text style={[styles.headerAnonymousFooter, styles.textAlignCenter]}>{translate('exitSurvey.offlineTitle')}</Text>
             <Text style={[styles.mt2, styles.textAlignCenter]}>{translate('exitSurvey.offline')}</Text>
diff --git a/src/pages/settings/Wallet/SuccessReportCardLost.tsx b/src/pages/settings/Wallet/SuccessReportCardLost.tsx
index 06648792107fc..0438394691691 100644
--- a/src/pages/settings/Wallet/SuccessReportCardLost.tsx
+++ b/src/pages/settings/Wallet/SuccessReportCardLost.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
-import {CardReplacementSuccess} from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -11,12 +11,13 @@ function SuccessReportCardLost({cardID}: {cardID: string}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['CardReplacementSuccess'] as const);
 
     return (
         <ConfirmationPage
             heading={translate('reportCardLostOrDamaged.successTitle')}
             description={translate('reportCardLostOrDamaged.successDescription')}
-            illustration={CardReplacementSuccess}
+            illustration={illustrations.CardReplacementSuccess}
             shouldShowButton
             onButtonPress={() => {
                 Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(cardID));
diff --git a/src/pages/workspace/accounting/intacct/import/SageIntacctUserDimensionsPage.tsx b/src/pages/workspace/accounting/intacct/import/SageIntacctUserDimensionsPage.tsx
index c1aa616bb788a..c092a11af0a38 100644
--- a/src/pages/workspace/accounting/intacct/import/SageIntacctUserDimensionsPage.tsx
+++ b/src/pages/workspace/accounting/intacct/import/SageIntacctUserDimensionsPage.tsx
@@ -4,26 +4,28 @@ import Button from '@components/Button';
 import ConnectionLayout from '@components/ConnectionLayout';
 import FixedFooter from '@components/FixedFooter';
 import Icon from '@components/Icon';
-import * as Illustrations from '@components/Icon/Illustrations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import {areSettingsInErrorFields, settingsPendingAction} from '@libs/PolicyUtils';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
-import * as Link from '@userActions/Link';
+import {openExternalLink} from '@userActions/Link';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
 function SageIntacctUserDimensionsPage({policy}: WithPolicyProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['FolderWithPapers'] as const);
 
+    // eslint-disable-next-line rulesdir/no-default-id-values
     const policyID = policy?.id ?? '-1';
     const config = policy?.connections?.intacct?.config;
     const userDimensions = policy?.connections?.intacct?.config?.mappings?.dimensions ?? [];
@@ -44,7 +46,7 @@ function SageIntacctUserDimensionsPage({policy}: WithPolicyProps) {
             {userDimensions?.length === 0 ? (
                 <View style={[styles.alignItemsCenter, styles.flex1, styles.justifyContentCenter]}>
                     <Icon
-                        src={Illustrations.FolderWithPapers}
+                        src={illustrations.FolderWithPapers}
                         width={160}
                         height={100}
                     />
@@ -59,7 +61,7 @@ function SageIntacctUserDimensionsPage({policy}: WithPolicyProps) {
                                 <TextLink
                                     style={styles.link}
                                     onPress={() => {
-                                        Link.openExternalLink(CONST.SAGE_INTACCT_INSTRUCTIONS);
+                                        openExternalLink(CONST.SAGE_INTACCT_INSTRUCTIONS);
                                     }}
                                 >
                                     {translate('workspace.intacct.detailedInstructionsLink')}
@@ -76,7 +78,7 @@ function SageIntacctUserDimensionsPage({policy}: WithPolicyProps) {
                             <TextLink
                                 style={styles.link}
                                 onPress={() => {
-                                    Link.openExternalLink(CONST.SAGE_INTACCT_INSTRUCTIONS);
+                                    openExternalLink(CONST.SAGE_INTACCT_INSTRUCTIONS);
                                 }}
                             >
                                 {translate('workspace.intacct.detailedInstructionsLink')}
diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldPage.tsx
index 2bbcff955377b..8a776ab29b231 100644
--- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldPage.tsx
+++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldPage.tsx
@@ -5,13 +5,13 @@ import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import ConnectionLayout from '@components/ConnectionLayout';
 import FixedFooter from '@components/FixedFooter';
-import * as Illustrations from '@components/Icon/Illustrations';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -67,9 +67,11 @@ function NetSuiteImportCustomFieldPage({
         params: {importCustomField},
     },
 }: NetSuiteImportCustomFieldPageProps) {
+    // eslint-disable-next-line rulesdir/no-default-id-values
     const policyID = policy?.id ?? '-1';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['FolderWithPapers'] as const);
 
     const config = policy?.connections?.netsuite?.options?.config;
     const data = config?.syncOptions?.[importCustomField] ?? [];
@@ -79,7 +81,7 @@ function NetSuiteImportCustomFieldPage({
             <WorkspaceEmptyStateSection
                 shouldStyleAsCard={false}
                 title={translate(`workspace.netsuite.import.importCustomFields.${importCustomField}.emptyTitle`)}
-                icon={Illustrations.FolderWithPapers}
+                icon={illustrations.FolderWithPapers}
                 subtitleComponent={
                     <HelpLinkComponent
                         importCustomField={importCustomField}
@@ -91,7 +93,7 @@ function NetSuiteImportCustomFieldPage({
                 containerStyle={[styles.flex1, styles.justifyContentCenter]}
             />
         ),
-        [importCustomField, styles, translate],
+        [importCustomField, styles, translate, illustrations.FolderWithPapers],
     );
 
     const listHeaderComponent = useMemo(
diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
index 67644637126ea..48dd3e2fd343e 100644
--- a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
+++ b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
@@ -7,7 +7,6 @@ import CopyTextToClipboard from '@components/CopyTextToClipboard';
 import FixedFooter from '@components/FixedFooter';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ImageSVG from '@components/ImageSVG';
 import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -33,7 +32,7 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
-    const illustrations = useMemoizedLazyIllustrations(['LaptopWithSecondScreenSync'] as const);
+    const illustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass', 'LaptopWithSecondScreenSync'] as const);
     const policyID: string = route.params.policyID;
     const [hasError, setHasError] = useState(false);
     const [codatSetupLink, setCodatSetupLink] = useState<string>('');
@@ -95,7 +94,7 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
                 {shouldShowError && (
                     <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5, styles.mb9]}>
                         <Icon
-                            src={Illustrations.BrokenMagnifyingGlass}
+                            src={illustrations.BrokenMagnifyingGlass}
                             width={116}
                             height={168}
                         />
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation.tsx
index ac2885e169f13..fb77475703201 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsErrorConfirmation.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
-import {BrokenCompanyCardBankConnection} from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useCardFeeds from '@hooks/useCardFeeds';
 import useCardsList from '@hooks/useCardsList';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -24,6 +24,7 @@ type WorkspaceCompanyCardsErrorConfirmationProps = {
 function WorkspaceCompanyCardsErrorConfirmation({policyID, newFeed}: WorkspaceCompanyCardsErrorConfirmationProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['BrokenCompanyCardBankConnection'] as const);
     const policy = usePolicy(policyID);
     const isExpensifyCardFeatureEnabled = !!policy?.areExpensifyCardsEnabled;
     const [cardsList] = useCardsList(policyID, newFeed);
@@ -98,7 +99,7 @@ function WorkspaceCompanyCardsErrorConfirmation({policyID, newFeed}: WorkspaceCo
                     </TextLink>
                 </Text>
             }
-            illustration={BrokenCompanyCardBankConnection}
+            illustration={illustrations.BrokenCompanyCardBankConnection}
             shouldShowButton
             illustrationStyle={styles.errorStateCardIllustration}
             onButtonPress={onButtonPress}
diff --git a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
index 3f37cc818492a..268c0e309805e 100644
--- a/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
@@ -2,7 +2,6 @@ import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import Icon from '@components/Icon';
-import {BrokenMagnifyingGlass} from '@components/Icon/Illustrations';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import PlaidCardFeedIcon from '@components/PlaidCardFeedIcon';
@@ -13,6 +12,7 @@ import Text from '@components/Text';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useCardFeeds from '@hooks/useCardFeeds';
 import useCardsList from '@hooks/useCardsList';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
@@ -39,6 +39,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const illustrations = useThemeIllustrations();
+    const lazyIllustrations = useMemoizedLazyIllustrations(['BrokenMagnifyingGlass'] as const);
     const [searchText, setSearchText] = useState('');
     const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: false});
     const [list] = useCardsList(policyID, feed);
@@ -129,7 +130,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
             {!cardListOptions.length ? (
                 <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5, styles.mb9, safeAreaPaddingBottomStyle]}>
                     <Icon
-                        src={BrokenMagnifyingGlass}
+                        src={lazyIllustrations.BrokenMagnifyingGlass}
                         width={116}
                         height={168}
                     />
diff --git a/src/pages/workspace/downgrade/DowngradeConfirmation.tsx b/src/pages/workspace/downgrade/DowngradeConfirmation.tsx
index 4da94928e7286..dc602205c1fbe 100644
--- a/src/pages/workspace/downgrade/DowngradeConfirmation.tsx
+++ b/src/pages/workspace/downgrade/DowngradeConfirmation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
-import {MushroomTopHat} from '@components/Icon/Illustrations';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {hasOtherControlWorkspaces as hasOtherControlWorkspacesPolicyUtils} from '@libs/PolicyUtils';
@@ -13,13 +13,14 @@ type Props = {
 function DowngradeConfirmation({onConfirmDowngrade, policyID}: Props) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['MushroomTopHat'] as const);
     const hasOtherControlWorkspaces = hasOtherControlWorkspacesPolicyUtils(policyID);
 
     return (
         <ConfirmationPage
             heading={translate('workspace.downgrade.completed.headline')}
             description={hasOtherControlWorkspaces ? translate('workspace.downgrade.completed.description') : undefined}
-            illustration={MushroomTopHat}
+            illustration={illustrations.MushroomTopHat}
             shouldShowButton
             onButtonPress={onConfirmDowngrade}
             buttonText={translate('workspace.downgrade.completed.gotIt')}
diff --git a/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx b/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
index 403bbd06c7aaf..54f47c8c19ae3 100644
--- a/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
+++ b/src/pages/workspace/receiptPartners/EditInviteReceiptPartnerPolicyPage.tsx
@@ -3,8 +3,8 @@ import type {TupleToUnion, ValueOf} from 'type-fest';
 import Badge from '@components/Badge';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionListWithSections';
@@ -12,6 +12,7 @@ import type {ListItem} from '@components/SelectionListWithSections/types';
 import UserListItem from '@components/SelectionListWithSections/UserListItem';
 import TabSelector from '@components/TabSelector/TabSelector';
 import useDebouncedState from '@hooks/useDebouncedState';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -44,6 +45,7 @@ type UberEmployeeStatus = ValueOf<typeof CONST.POLICY.RECEIPT_PARTNERS.UBER_EMPL
 function EditInviteReceiptPartnerPolicyPage({route}: EditInviteReceiptPartnerPolicyPageProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const illustrations = useMemoizedLazyIllustrations(['SewerDino'] as const);
     const {translate, localeCompare} = useLocalize();
     const {isOffline} = useNetwork();
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
@@ -259,7 +261,7 @@ function EditInviteReceiptPartnerPolicyPage({route}: EditInviteReceiptPartnerPol
     const listEmptyContent = useMemo(
         () => (
             <BlockingView
-                icon={Illustrations.SewerDino}
+                icon={illustrations.SewerDino}
                 iconWidth={variables.uberEmptyListIconWidth}
                 iconHeight={variables.uberEmptyListIconHeight}
                 title={translate('workspace.receiptPartners.uber.emptyContent.title')}
@@ -270,7 +272,7 @@ function EditInviteReceiptPartnerPolicyPage({route}: EditInviteReceiptPartnerPol
                 contentFitImage="contain"
             />
         ),
-        [translate, styles.textSupporting, styles.mb2, styles.pb5, styles.ph5],
+        [translate, styles.textSupporting, styles.mb2, styles.pb5, styles.ph5, illustrations.SewerDino],
     );
 
     return (
diff --git a/src/pages/workspace/receiptPartners/InviteReceiptPartnerPolicyPage.tsx b/src/pages/workspace/receiptPartners/InviteReceiptPartnerPolicyPage.tsx
index 2537c484e5aea..ec75d297a328e 100644
--- a/src/pages/workspace/receiptPartners/InviteReceiptPartnerPolicyPage.tsx
+++ b/src/pages/workspace/receiptPartners/InviteReceiptPartnerPolicyPage.tsx
@@ -1,13 +1,14 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionListWithSections';
 import UserListItem from '@components/SelectionListWithSections/UserListItem';
 import Text from '@components/Text';
 import useDebouncedState from '@hooks/useDebouncedState';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -32,6 +33,7 @@ type InviteReceiptPartnerPolicyPageProps = PlatformStackScreenProps<WorkspaceSpl
 
 function InviteReceiptPartnerPolicyPage({route}: InviteReceiptPartnerPolicyPageProps) {
     const styles = useThemeStyles();
+    const illustrations = useMemoizedLazyIllustrations(['ToddInCar'] as const);
     const {translate, localeCompare} = useLocalize();
     const {isOffline} = useNetwork();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -206,7 +208,7 @@ function InviteReceiptPartnerPolicyPage({route}: InviteReceiptPartnerPolicyPageP
                     onBackButtonPress={() => Navigation.dismissModal()}
                 />
                 <ConfirmationPage
-                    illustration={Illustrations.ToddInCar}
+                    illustration={illustrations.ToddInCar}
                     illustrationStyle={styles.uberConfirmationIllustrationContainer}
                     heading={translate('workspace.receiptPartners.uber.readyToRoll')}
                     description={translate('workspace.receiptPartners.uber.takeBusinessRideMessage')}
diff --git a/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx
index 326cc6e229afa..a160e6454f27e 100644
--- a/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx
+++ b/src/pages/workspace/reports/ReportFieldsListValuesPage.tsx
@@ -6,8 +6,8 @@ import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import SearchBar from '@components/SearchBar';
@@ -18,6 +18,7 @@ import type {ListItem} from '@components/SelectionListWithSections/types';
 import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Switch from '@components/Switch';
 import Text from '@components/Text';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import useOnyx from '@hooks/useOnyx';
@@ -75,6 +76,7 @@ function ReportFieldsListValuesPage({
     const {isSmallScreenWidth} = useResponsiveLayout();
     const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT, {canBeMissing: true});
     const isMobileSelectionModeEnabled = useMobileSelectionMode();
+    const illustrations = useMemoizedLazyIllustrations(['FolderWithPapers'] as const);
 
     const [selectedValues, setSelectedValues] = useState<Record<string, boolean>>({});
     const [deleteValuesConfirmModalVisible, setDeleteValuesConfirmModalVisible] = useState(false);
@@ -380,7 +382,7 @@ function ReportFieldsListValuesPage({
                             subtitle={translate('workspace.reportFields.emptyReportFieldsValues.subtitle')}
                             SkeletonComponent={TableListItemSkeleton}
                             headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
-                            headerMedia={Illustrations.FolderWithPapers}
+                            headerMedia={illustrations.FolderWithPapers}
                             headerStyles={styles.emptyFolderDarkBG}
                             headerContentStyles={styles.emptyStateFolderWithPaperIconSize}
                         />
diff --git a/tests/ui/components/FeatureTrainingModalTest.tsx b/tests/ui/components/FeatureTrainingModalTest.tsx
index 6a7b2acbb6d99..7c5f180a34c58 100644
--- a/tests/ui/components/FeatureTrainingModalTest.tsx
+++ b/tests/ui/components/FeatureTrainingModalTest.tsx
@@ -5,11 +5,11 @@ import Onyx from 'react-native-onyx';
 import ReceiptDoc from '@assets/images/receipt-doc.png';
 import ComposeProviders from '@components/ComposeProviders';
 import FeatureTrainingModal from '@components/FeatureTrainingModal';
-import * as Illustrations from '@components/Icon/Illustrations';
 import {FullScreenContextProvider} from '@components/VideoPlayerContexts/FullScreenContext';
 import {PlaybackContextProvider} from '@components/VideoPlayerContexts/PlaybackContext';
 import {VideoPopoverMenuContextProvider} from '@components/VideoPlayerContexts/VideoPopoverMenuContext';
 import {VolumeContextProvider} from '@components/VideoPlayerContexts/VolumeContext';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -56,10 +56,11 @@ describe('FeatureTrainingModal', () => {
             expect(screen.getByTestId(CONST.VIDEO_PLAYER_TEST_ID)).toBeOnTheScreen();
         });
         it('renders svg image', () => {
+            const illustrations = useMemoizedLazyIllustrations(['HoldExpense'] as const);
             render(
                 <FeatureTrainingModal
                     confirmText={CONFIRM_TEXT}
-                    image={Illustrations.HoldExpense}
+                    image={illustrations.HoldExpense}
                 />,
             );