diff --git a/packages/forms-collection/src/icon-picker/icon-picker.tsx b/packages/forms-collection/src/icon-picker/icon-picker.tsx
index 1fdf3ee96..0ad036f81 100644
--- a/packages/forms-collection/src/icon-picker/icon-picker.tsx
+++ b/packages/forms-collection/src/icon-picker/icon-picker.tsx
@@ -22,6 +22,7 @@ import { IconUpload } from "@tabler/icons-react";
import { clientApi } from "@homarr/api/client";
import { useSession } from "@homarr/auth/client";
+import { supportedLanguages } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";
import { UploadMedia } from "../upload-media/upload-media";
@@ -137,7 +138,9 @@ export const IconPicker = ({
}
- leftSection={previewUrl ?
: null}
+ leftSection={
+ shouldShowPreview(previewUrl) ?
: null
+ }
value={search}
onChange={(event) => {
combobox.openDropdown();
@@ -204,3 +207,11 @@ export const IconPicker = ({
);
};
+
+// This regex is used to prevent loading a preview like en or /en which would trigger a language change
+// See https://github.com/homarr-labs/homarr/issues/3070
+const localizationPathRegex = new RegExp(`^/?(${supportedLanguages.join("|")})(/.*)?$`, "i" /* ignore casing */);
+const shouldShowPreview = (value: string | null): value is string => {
+ if (!value) return false;
+ return !localizationPathRegex.test(value);
+};