[$125] Update export icons to use the colored versions

[JS00001]

Coming from https://expensify.slack.com/archives/C03TME82F/p1768924429823039

For consistency, lets update the More > Export dropdown to use the colored versions of the export integration icons.

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-21 13:26:52 UTC.

Proposal

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

The "More > Export" dropdown menu displays monochrome icons for export integration options (Export to Sage Intacct, Mark as exported). For consistency with other parts of the app, these should use the colored versions of the integration icons.

What is the root cause of that problem?

In MoneyReportHeader.tsx, the export submenu options use getIntegrationExportIcon() which returns monochrome export icons (XeroExport, QBOExport, NetSuiteExport, SageIntacctExport) instead of the colored square icons.

App/src/components/MoneyReportHeader.tsx

Lines 866 to 869 in c9e36d3

	icon: (() => {
	const iconName = getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback);
	return iconName ? expensifyIcons[iconName] : undefined;
	})(),

App/src/components/MoneyReportHeader.tsx

Lines 885 to 888 in c9e36d3

	icon: (() => {
	const iconName = getIntegrationExportIcon(connectedIntegration ?? connectedIntegrationFallback);
	return iconName ? expensifyIcons[iconName] : undefined;
	})(),

The getIntegrationExportIcon() function returns monochrome export icons, while getIntegrationIcon() returns the colored square icons (XeroSquare, QBOSquare, NetSuiteSquare, IntacctSquare).

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

Replace getIntegrationExportIcon() with getIntegrationIcon() in MoneyReportHeader.tsx for the export submenu options:

icon: (() => {
    return getIntegrationIcon(connectedIntegration ?? connectedIntegrationFallback, expensifyIcons);
})(),

This applies to both EXPORT_TO_INTEGRATION and MARK_AS_EXPORTED options (lines 866-869 and 885-888).

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @samranahm Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[linhvovan29546]

@JS00001 If we use the colored versions of the export integration icons, what color should be displayed on hover or should the color remain unchanged?

[linhvovan29546]

@daledah your proposal is incorrect(it reverses the expected behavior), the More → Export dropdown is located in MoneyReportHeader.

[JS00001]

Just the normal icon would remain on hover

[daledah]

thanks for your review @linhvovan29546, i updated my proposal