From 21225c979edb9a2c9cc00c4649363c0aab8058f1 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Fri, 13 Mar 2026 14:09:51 +0100
Subject: [PATCH] fix: language changes when searching for some icons (#5224)

---
 .../src/icon-picker/icon-picker.tsx                 | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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 = ({
           <InputBase
             flex={1}
             rightSection={<Combobox.Chevron />}
-            leftSection={previewUrl ? <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} /> : null}
+            leftSection={
+              shouldShowPreview(previewUrl) ? <img src={previewUrl} alt="" style={{ width: 20, height: 20 }} /> : null
+            }
             value={search}
             onChange={(event) => {
               combobox.openDropdown();
@@ -204,3 +207,11 @@ export const IconPicker = ({
     </Combobox>
   );
 };
+
+// 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);
+};