diff --git a/shell/app/common/__tests__/components/img-holder.test.tsx b/shell/app/common/__tests__/components/img-holder.test.tsx
index 27766c3703..5c6f48342a 100644
--- a/shell/app/common/__tests__/components/img-holder.test.tsx
+++ b/shell/app/common/__tests__/components/img-holder.test.tsx
@@ -35,4 +35,10 @@ describe('ImgHolder', () => {
       `holder.js/40x40?${encodeURI('size=12&text=D&theme=avatar&font=PingFang SC&fontweight=normal')}`,
     );
   });
+  it('render with part of emoji character', () => {
+    const wrapper = mount(<ImgHolder rect="40x40" type="avatar" text={'🍅'.substring(0, 1)} />);
+    expect(wrapper.find('img').prop('data-src')).toBe(
+      `holder.js/40x40?${encodeURI('size=12&text=n&theme=avatar&font=PingFang20%SC&fontweight=normal')}`,
+    );
+  });
 });
diff --git a/shell/app/common/components/img-holder.tsx b/shell/app/common/components/img-holder.tsx
index 540d540dba..81abd7aef5 100644
--- a/shell/app/common/components/img-holder.tsx
+++ b/shell/app/common/components/img-holder.tsx
@@ -90,11 +90,22 @@ export const ImgHolder = (props: IProps) => {
         theme = 'avatar';
       }
     }
-    const holderParams = encodeURI(
-      compact(
-        map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
-      ).join('&'),
-    );
+    let holderParams = '';
+    try {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text, theme, fg, bg, font, fontweight }, (v, k) => (v === undefined ? v : `${k}=${v}`)),
+        ).join('&'),
+      );
+    } catch (error) {
+      holderParams = encodeURI(
+        compact(
+          map({ random, size, text: 'n', theme, fg, bg, font, fontweight }, (v, k) =>
+            v === undefined ? v : `${k}=${v}`,
+          ),
+        ).join('&'),
+      );
+    }
     return (
       <img
         alt="holder"