diff --git a/web/app/components/workflow/comment/icon.tsx b/web/app/components/workflow/comment/icon.tsx
index 932b49591a..c9fc5abd6a 100644
--- a/web/app/components/workflow/comment/icon.tsx
+++ b/web/app/components/workflow/comment/icon.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { memo, useMemo } from 'react'
 import { useReactFlow, useViewport } from 'reactflow'
-import Avatar from '@/app/components/base/avatar'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import type { WorkflowCommentList } from '@/service/workflow-comment'
 
 type CommentIconProps = {
@@ -20,6 +20,18 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick }) =>
     })
   }, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
 
+  // Calculate dynamic width based on number of participants
+  const participantCount = comment.participants?.length || 0
+  const maxVisible = Math.min(3, participantCount)
+  const showCount = participantCount > 3
+  const avatarSize = 24
+  const avatarSpacing = 4 // -space-x-1 is about 4px overlap
+
+  // Width calculation: first avatar + (additional avatars * (size - spacing)) + padding
+  const dynamicWidth = Math.max(40, // minimum width
+    8 + avatarSize + Math.max(0, (showCount ? 2 : maxVisible - 1)) * (avatarSize - avatarSpacing) + 8,
+  )
+
   return (
     <div
       className="absolute z-10 cursor-pointer"
@@ -30,17 +42,17 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick }) =>
       }}
       onClick={onClick}
     >
-      <div className="relative h-10 w-10 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full">
+      <div
+        className={'relative h-10 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full'}
+        style={{ width: dynamicWidth }}
+      >
         <div className="absolute inset-1 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full bg-white">
-          <div className="flex h-full w-full items-center justify-center">
-            <div className="h-6 w-6 overflow-hidden rounded-full">
-              <Avatar
-                avatar={comment.created_by_account.avatar_url || null}
-                name={comment.created_by_account.name}
-                size={24}
-                className="h-full w-full"
-              />
-            </div>
+          <div className="flex h-full w-full items-center justify-center px-1">
+            <UserAvatarList
+              users={comment.participants}
+              maxVisible={3}
+              size={24}
+            />
           </div>
         </div>
       </div>