[Tracking][New Feature][Avatar] - Expensify Avatar Customization

[grgia]

Mini Feature: Custom Expensify Avatars [OCT 20 DEADLINE]

Background

[Slack convo]

Mini-feature request: Build an avatar customization page.

Figma

User has not set avatar (using a default):

Using has a custom avatar:

User will see various pre-existing options and options using the first letter of their first name. Not set or if SMS log in, we will not show these options.

Video Mock

CleanShot.2025-10-01.at.14.52.34.mp4

Detailed Design Constraints [OUTDATED - Pending update as of Oct 2 11am BST]

Due to the nature of this feature (NON-CRITICAL), we will limit scope and complexity. The design is actively being discussed.

Page Details

Route:
<*>new.expensify.com:8082/settings/profile/avatar

Components

1. Move existing avatar components into a new folder for organization

• Old: /src/pages/settings/Profile/ProfileAvatar.tsx
• New: /src/pages/settings/Profile/Avatar/ProfileAvatar.tsx

2. Create: /src/pages/settings/Profile/Avatar/AvatarPage.tsx - page for updating the profile picture
   - Build the UI with a preview, an avatar grid, and a color selector.
   - Manage user's selection in local state.
   - On "Save", call the generator and the upload action.
   Navigation:
   - Add AvatarPage to the settings navigator.
   - Add a link from ProfilePage.tsx to this new page.

3. Create: /src/pages/settings/Profile/Avatar/AvatarGenerator.tsx - dedicated component to render the selected avatar for capturing
   - Render the selected SVG: use existingAvatar component/react-native-svg- Pass the user's selected color as a fill prop to the SVG component.
   - Capture the view: use exisiting react-native-view-shot - Wrap in <ViewShot> component and capture View as a 400x400 png.
   - Generate the image: Expose a capture function via ref that returns the image file URI.
   - Upload the image: Use the existing UpdateUserAvatar action. Convert the image URI from the generator into a file object, similar to how it's done in ProfilePage.js for photo library uploads.

Assets:

• Create src/components/Icon/CustomAvatars.ts.
  - All existing user avatars are in src/components/Icon/DefaultAvatars.ts.
  - Import all new icon options to use in this file

• For the custom initial avatar:

How we grab A-Z for workspace
https://github.com/Expensify/App/blob/4f2680eeda2a101bad5362c96e557ca814114de0/src/components/Icon/WorkspaceDefaultAvatars.ts

How we fetch workspace SVG

App/src/libs/ReportUtils.ts

Lines 2787 to 2805 in 4f2680e

	/**
	* Helper method to return the default avatar associated with the given login
	*/
	function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC<SvgProps> {
	if (!workspaceName) {
	return defaultWorkspaceAvatars.WorkspaceBuilding;
	}
	// Remove all chars not A-Z or 0-9 including underscore
	const alphaNumeric = workspaceName
	.normalize('NFD')
	.replace(/[^0-9a-z]/gi, '')
	.toUpperCase();
	const workspace = `Workspace${alphaNumeric[0]}` as keyof typeof defaultWorkspaceAvatars;
	const defaultWorkspaceAvatar = defaultWorkspaceAvatars[workspace];
	return !alphaNumeric ? defaultWorkspaceAvatars.WorkspaceBuilding : defaultWorkspaceAvatar;
	}

• We can create color map similar to

  App/src/styles/utils/index.ts

  Lines 54 to 73 in fa5e06d

  	const workspaceColorOptions: SVGAvatarColorStyle[] = [
  	{backgroundColor: colors.blue200, fill: colors.blue700},
  	{backgroundColor: colors.blue400, fill: colors.blue800},
  	{backgroundColor: colors.blue700, fill: colors.blue200},
  	{backgroundColor: colors.green200, fill: colors.green700},
  	{backgroundColor: colors.green400, fill: colors.green800},
  	{backgroundColor: colors.green700, fill: colors.green200},
  	{backgroundColor: colors.yellow200, fill: colors.yellow700},
  	{backgroundColor: colors.yellow400, fill: colors.yellow800},
  	{backgroundColor: colors.yellow700, fill: colors.yellow200},
  	{backgroundColor: colors.tangerine200, fill: colors.tangerine700},
  	{backgroundColor: colors.tangerine400, fill: colors.tangerine800},
  	{backgroundColor: colors.tangerine700, fill: colors.tangerine400},
  	{backgroundColor: colors.pink200, fill: colors.pink700},
  	{backgroundColor: colors.pink400, fill: colors.pink800},
  	{backgroundColor: colors.pink700, fill: colors.pink200},
  	{backgroundColor: colors.ice200, fill: colors.ice700},
  	{backgroundColor: colors.ice400, fill: colors.ice800},
  	{backgroundColor: colors.ice700, fill: colors.ice200},
  	];

• See how we color workspace SVGs here

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[grgia]

@Expensify/design

Design questions:

• What does this look like on the previous settings page?
• What does this look like on web/desktop?
• How is saving the changes triggered?
• Does the large avatar always show the user's current avatar?
• If the user has a custom avatar (ie a photo of themself), is that shown as the preview? If they have a custom avatar and then click on the color options, what happens?

[grgia]

One gotcha with the "simple" solution of uploading them as pngs (as if a user uploaded a custom avatar) is that if a user chooses an avatar/custom color, we won't be able to "remember" that selection. I'm gonna say that should be seen as intentional design and a necessary trade off for speed here

[grgia]

The other gotcha is this one:

We currently have a component for workspaces using the A-Z svgs, but not for using actual text to generate. Unsure of added complexity. We may want to either change it to single letter or omit for this deadline.

[dannymcclain]

Yeah I think that initial screen was an early exploration and we'll need to do some tweaking to make it actually functional for our patterns. @Expensify/design who worked on that avatar screen initially? Happy to take this one, but I think we should do a little more jamming to make sure everything is buttoned up here.

[dannymcclain]

I also kinda wonder if we should limit the color selection to only be if you're using the initials, and then let our default avatars just be it's own section (not impacted by color choice). I'll try to do some exploring today on this.

[grgia]

I also kinda wonder if we should limit the color selection to only be if you're using the initials, and then let our default avatars just be it's own section (not impacted by color choice). I'll try to do some exploring today on this.

@dannymcclain that could work. We'll need the design confirmed by friday in order to meet the newsletter deadline. So it does not need to be over-complex.

[dannymcclain]

Ok I will try to get to work on it today—speedy style! 😅

[shawnborton]

who worked on that avatar screen initially?

The mock above is something I made during our 2022 rebrand, so many moons ago! Definitely open to changing things up from that mock, feel free to explore away!

[grgia]

many moons ago,Avatar Customization was forged by master Shawn. Now, rediscovered and unearthed by product architects of today, it is up to master Danny to complete the vision.

Expensify Heritage Design ©2025

[shawnborton]

Its conquest deserves the best of all Dannykind, and its opportunity for peaceful cooperation may never come again.