diff --git a/app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs b/app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs
index 1c586752118..19ee82cde69 100644
--- a/app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs
+++ b/app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs
@@ -1,10 +1,24 @@
-import avatar from "discourse/helpers/bound-avatar-template";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse-common/helpers/d-icon";
+import { avatarUrl, translateSize } from "discourse-common/lib/avatar-utils";
+
+const avatarPx = translateSize("small");
 
 const IconAvatar = <template>
   <div class={{concatClass "icon-avatar" @data.classNames}}>
-    {{avatar @data.avatarTemplate "small"}}
+    {{!--
+        avoiding {{avatar}} helper because its html would be fully
+        re-rendered whenever arguments change, even if the argument values
+        are identical. On some browsers, re-rendering a lazy-loaded image
+        causes a visible flicker.
+      --}}
+    <img
+      lazy="lazy"
+      src={{avatarUrl @data.avatarTemplate "small"}}
+      width={{avatarPx}}
+      height={{avatarPx}}
+      class="avatar"
+    />
     <div class="icon-avatar__icon-wrapper">
       {{icon @data.icon}}
     </div>