[Due for payment 2025-12-03] [$125] Migrate icons expensify branding - sign in icons - empty states & special to lazy loading

[mollfpr]

Background

We're migrating all icons and illustrations to use lazy loading to improve app startup performance by reducing the main bundle size. This is part of a larger initiative tracked in #74599.

What needs to be done

Migrate the following icons and illustrations to use the lazy loading system:

Icons/Illustrations to migrate:

Expensify Branding:

• ExpensifyAppIcon
• ExpensifyCard
• ExpensifyFooterLogo
• ExpensifyFooterLogoVertical
• ExpensifyLogoNew
• ExpensifyWordmark

Sign In Icons:

• AppleLogo
• GoogleLogo

Empty States & Special:

• EmptyStateRoutePending
• EmptyStateSpyPigeon
• MessageInABottle
• ReceiptBody
• SmartScan
• TreasureChest
• Exit

Migration Guide

Please follow the comprehensive migration guide here:
https://github.com/Expensify/App/blob/main/contributingGuides/LAZY_ICONS_AND_ILLUSTRATIONS.md

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990256057259907096
• Upwork Job ID: 1990256057259907096
• Last Price Increase: 2025-11-17

Issue Owner

Current Issue Owner: @CortneyOfstad

[mohammadjafarinejad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Migrate icons and illustrations to use lazy loading for improved app startup performance.

What is the root cause of that problem?

These icons are currently imported and exported in the main Expensicons.ts file, which causes them to be bundled in the main JavaScript bundle instead of being lazy-loaded. This increases the initial bundle size and app startup time.

What changes do you think we should make in order to solve the problem?

1. Update all components that use these icons

Replace direct imports from Expensicons.ts with the useMemoizedLazyExpensifyIcons hook.

Code Example

Before:

import * as Expensicons from "@components/Icon/Expensicons";

function MyComponent() {
  return <Image src={Expensicons.ExpensifyWordmark} />;
}

After:

import { useMemoizedLazyExpensifyIcons } from "@hooks/useLazyAsset";

function MyComponent() {
  const icons = useMemoizedLazyExpensifyIcons(["ExpensifyWordmark"] as const);
  return <Image src={icons.ExpensifyWordmark} />;
}

Known files to update:

• ExpensifyWordmark:

  • src/pages/ErrorPage/SessionExpiredPage.tsx
  • src/pages/ConnectionCompletePage.tsx

• AppleLogo / GoogleLogo:

  • src/components/SignInButtons/IconButton.tsx

• SmartScan:

  • src/pages/Search/SearchPage.tsx
  • src/pages/iou/request/step/IOURequestStepConfirmation.tsx
  • src/pages/iou/request/step/IOURequestStepScan/index.tsx

• TreasureChest:

  • src/pages/settings/InitialSettingsPage.tsx

• MessageInABottle:

  • src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

• EmptyStateSpyPigeon:

  • src/pages/settings/Security/LockAccount/UnlockAccountPage.tsx

• Other icons (ExpensifyAppIcon, ExpensifyCard, ExpensifyFooterLogo, ExpensifyFooterLogoVertical, ExpensifyLogoNew, ReceiptBody, EmptyStateRoutePending, Exit):

  • Search the codebase for all usages and update

What alternative solutions did you explore? (Optional)

None

[mohammadjafarinejad]

Would love to work on it if it's open to externals. Thanks.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Migrate icons and illustrations to lazy loading to reduce the main bundle size and improve app startup performance. These assets are currently imported directly in Illustrations.ts or other files, causing them to be bundled and loaded at startup even when not immediately needed. This is part of a larger initiative tracked in #74599.

What is the root cause of that problem?

Static imports in Illustrations.ts cause webpack to bundle all SVG assets into the main bundle. This increases initial bundle size, startup time, and memory usage. Lazy loading splits these assets into a separate chunk that only loads when needed.

What changes do you think we should make in order to solve the problem?

This migration will strictly follow the step-by-step process outlined in contributingGuides/LAZY_ICONS_AND_ILLUSTRATIONS.md:

1. Add to lazy chunk file: Add all icons/illustrations to the appropriate chunk file:

   • For illustrations: src/components/Icon/chunks/illustrations.chunk.ts
   • For Expensify icons: src/components/Icon/chunks/expensify-icons.chunk.ts
   • Add SVG imports, add to objects, and add cases to switch statements

2. Remove from main file: Remove imports and exports from src/components/Icon/Illustrations.ts, src/components/Icon/Expensicons.ts, and other files where duplicates exist.

3. Consolidate duplicates: Keep the chunk version and remove duplicate imports from other files.

4. Update components: Find all components using these icons/illustrations (via npm run check-lazy-loading or grep) and replace direct imports with useMemoizedLazyIllustrations or useMemoizedLazyExpensifyIcons hooks (for multiple) or useMemoizedLazyAsset with loader functions (for single), following the migration patterns shown in the guide.

Icons/illustrations to migrate (alphabetically):

• AppleLogo
• EmptyStateRoutePending
• EmptyStateSpyPigeon
• Exit
• ExpensifyAppIcon
• ExpensifyCard
• ExpensifyFooterLogo
• ExpensifyFooterLogoVertical
• ExpensifyLogoNew
• ExpensifyWordmark
• GoogleLogo
• MessageInABottle
• ReceiptBody
• SmartScan
• TreasureChest

What alternative solutions did you explore? (Optional)

Keeping assets in the main bundle doesn't solve the performance issue. Manual dynamic imports would work but are error-prone. The centralized lazy loading system provides better consistency and type safety.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021990256057259907096

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)