diff --git a/client/src/components/Admin/AddonManager.tsx b/client/src/components/Admin/AddonManager.tsx
index 41d79a607..92a2acb3e 100644
--- a/client/src/components/Admin/AddonManager.tsx
+++ b/client/src/components/Admin/AddonManager.tsx
@@ -17,6 +17,7 @@ import { SettingsCard, SettingsHint, StatusPill, SETTINGS_BUTTON_PRIMARY } from
import { type Addon, type CollabFeatures, COLLAB_SUB_FEATURES, getAddonLabel, MASKED, RECOMMENDED_MODELS } from './addons/addonModel'
import { useAddonManager } from './addons/useAddonManager'
import { useLlmParsingConfig } from './addons/useLlmParsingConfig'
+import { ImmichIcon, SynologyIcon } from './addons/PhotoProviderIcons'
// Keys are the `icon` column from the addons table (see server seeds.ts); anything
// unknown falls back to Puzzle. Users/Sparkles cover collab and llm_parsing, which
@@ -28,22 +29,6 @@ const ICON_MAP = {
Dawarich: DawarichIcon,
}
-function ImmichIcon({ size = 14 }: { size?: number }) {
- return (
-
- )
-}
-
-function SynologyIcon({ size = 14 }: { size?: number }) {
- return (
-
- )
-}
-
const PROVIDER_ICONS: Record> = {
immich: ImmichIcon,
synologyphotos: SynologyIcon,
diff --git a/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx b/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx
new file mode 100644
index 000000000..bc7d29c52
--- /dev/null
+++ b/client/src/components/Admin/addons/PhotoProviderIcons.test.tsx
@@ -0,0 +1,29 @@
+// FE-ADMIN-PHOTOICONS-001 to FE-ADMIN-PHOTOICONS-002
+import { describe, expect, it } from 'vitest';
+
+import { render } from '../../../../tests/helpers/render';
+import { ImmichIcon, SynologyIcon } from './PhotoProviderIcons';
+
+const marks = [
+ ['ImmichIcon', ImmichIcon],
+ ['SynologyIcon', SynologyIcon],
+] as const;
+
+describe('PhotoProviderIcons', () => {
+ it.each(marks)('FE-ADMIN-PHOTOICONS-001: %s draws a 14px currentColor glyph by default', (_name, Icon) => {
+ const { container } = render();
+ const svg = container.querySelector('svg');
+ expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+ expect(svg).toHaveAttribute('width', '14');
+ expect(svg).toHaveAttribute('height', '14');
+ expect(svg).toHaveStyle({ flexShrink: '0' });
+ expect(container.querySelector('path')).toHaveAttribute('fill', 'currentColor');
+ });
+
+ it.each(marks)('FE-ADMIN-PHOTOICONS-002: %s takes its size from the caller', (_name, Icon) => {
+ const { container } = render();
+ const svg = container.querySelector('svg');
+ expect(svg).toHaveAttribute('width', '22');
+ expect(svg).toHaveAttribute('height', '22');
+ });
+});
diff --git a/client/src/components/Admin/addons/PhotoProviderIcons.tsx b/client/src/components/Admin/addons/PhotoProviderIcons.tsx
new file mode 100644
index 000000000..125080c08
--- /dev/null
+++ b/client/src/components/Admin/addons/PhotoProviderIcons.tsx
@@ -0,0 +1,27 @@
+/**
+ * The photo providers' marks, shared by the desktop and the phone addon manager.
+ * Single-colour glyphs on `currentColor`, like the document provider marks, so
+ * they sit in a row of lucide icons and invert with the theme.
+ */
+
+export function ImmichIcon({ size = 14 }: { size?: number }) {
+ return (
+
+ );
+}
+
+export function SynologyIcon({ size = 14 }: { size?: number }) {
+ return (
+
+ );
+}
diff --git a/client/src/mobile/screens/admin/MAdminAddonManager.tsx b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
index b9731bd8b..95d52d905 100644
--- a/client/src/mobile/screens/admin/MAdminAddonManager.tsx
+++ b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
@@ -21,6 +21,7 @@ import {
} from '../../../components/Admin/addons/addonModel'
import { useAddonManager } from '../../../components/Admin/addons/useAddonManager'
import { useLlmParsingConfig } from '../../../components/Admin/addons/useLlmParsingConfig'
+import { ImmichIcon, SynologyIcon } from '../../../components/Admin/addons/PhotoProviderIcons'
import { MAdminButton, MAdminCard, MAdminField, MAdminInput, MAdminSecretInput } from './MAdminUi'
const ICON_MAP = {
@@ -28,22 +29,6 @@ const ICON_MAP = {
Dawarich: DawarichIcon,
}
-function ImmichIcon({ size = 14 }: { size?: number }) {
- return (
-
- )
-}
-
-function SynologyIcon({ size = 14 }: { size?: number }) {
- return (
-
- )
-}
-
const PROVIDER_ICONS: Record> = {
immich: ImmichIcon,
synologyphotos: SynologyIcon,