[Due for payment 2026-01-14] [$125] Migrate icons navigations, arrows, and avatars 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:

• AddReaction
• ArrowCircleClockwise
• ArrowCollapse
• ArrowDownLong
• ArrowRightLong
• ArrowRight
• ArrowSplit
• ArrowUpLong
• ArrowsLeftRight
• BackArrow
• CircularArrowBackwards
• CaretUpDown
• Collapse
• DownArrow
• Expand
• UpArrow
• ThreeDots
• All
• ActiveRoomAvatar
• ConciergeAvatar
• FallbackAvatar
• FallbackWorkspaceAvatar
• NotificationsAvatar

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/~021990254641558986497
• Upwork Job ID: 1990254641558986497
• Last Price Increase: 2025-11-17
• Automatic offers:
• apeyada | Contributor | 109498606

Issue Owner

Current Issue Owner: @johncschuster

[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):

• ActiveRoomAvatar
• AddReaction
• All
• ArrowCircleClockwise
• ArrowCollapse
• ArrowDownLong
• ArrowRight
• ArrowRightLong
• ArrowSplit
• ArrowUpLong
• ArrowsLeftRight
• BackArrow
• CaretUpDown
• CircularArrowBackwards
• Collapse
• ConciergeAvatar
• DownArrow
• Expand
• FallbackAvatar
• FallbackWorkspaceAvatar
• NotificationsAvatar
• ThreeDots
• UpArrow

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/~021990254641558986497

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.