diff --git a/frontend/__tests__/unit/components/ItemCardList.test.tsx b/frontend/__tests__/unit/components/ItemCardList.test.tsx
index 1abdcd1c1d..d5c9ba522c 100644
--- a/frontend/__tests__/unit/components/ItemCardList.test.tsx
+++ b/frontend/__tests__/unit/components/ItemCardList.test.tsx
@@ -715,7 +715,7 @@ describe('ItemCardList Component', () => {
       expect(avatarImage).toHaveAttribute('alt', `${issueWithoutAuthor.author.login}'s avatar`)
     })
 
-    it('uses generic fallback alt text when author is missing', () => {
+    it('shows fallback icon when author is missing', () => {
       const issueWithoutAuthor = {
         ...mockIssue,
         author: null,
@@ -730,11 +730,11 @@ describe('ItemCardList Component', () => {
         />
       )
 
-      const avatarImage = screen.getByTestId('avatar-image')
-      expect(avatarImage).toHaveAttribute('alt', "Author's avatar")
+      const avatarImage = screen.queryByTestId('avatar-image')
+      expect(avatarImage).not.toBeInTheDocument()
     })
 
-    it('uses generic fallback alt text when author name and login are missing', () => {
+    it('shows fallback icon when author name and login are missing', () => {
       const issueWithEmptyAuthor = {
         ...mockIssue,
         author: {
@@ -753,8 +753,8 @@ describe('ItemCardList Component', () => {
         />
       )
 
-      const avatarImage = screen.getByTestId('avatar-image')
-      expect(avatarImage).toHaveAttribute('alt', "Author's avatar")
+      const avatarImage = screen.queryByTestId('avatar-image')
+      expect(avatarImage).not.toBeInTheDocument()
     })
 
     it('opens external links in new tab', () => {
diff --git a/frontend/__tests__/unit/components/RecentIssues.test.tsx b/frontend/__tests__/unit/components/RecentIssues.test.tsx
index 87d931b3aa..8f20b870fd 100644
--- a/frontend/__tests__/unit/components/RecentIssues.test.tsx
+++ b/frontend/__tests__/unit/components/RecentIssues.test.tsx
@@ -197,7 +197,7 @@ describe('<RecentIssues />', () => {
     expect(screen.getByAltText("User One's avatar")).toBeInTheDocument()
   })
 
-  it('uses fallback alt text when author name and login are missing', () => {
+  it('shows fallback icon when author name and login are missing', () => {
     const issueWithEmptyAuthor = {
       ...baseIssue,
       author: {
@@ -207,6 +207,7 @@ describe('<RecentIssues />', () => {
       },
     }
     render(<RecentIssues data={[issueWithEmptyAuthor]} />)
-    expect(screen.getByAltText("Author's avatar")).toBeInTheDocument()
+    const avatarImage = screen.queryByAltText("Author's avatar")
+    expect(avatarImage).not.toBeInTheDocument()
   })
 })
diff --git a/frontend/src/components/ItemCardList.tsx b/frontend/src/components/ItemCardList.tsx
index c8fd4c7403..d2929ecb65 100644
--- a/frontend/src/components/ItemCardList.tsx
+++ b/frontend/src/components/ItemCardList.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React, { JSX } from 'react'
 import type { IconType } from 'react-icons'
+import { FaUser } from 'react-icons/fa'
 import type { Issue } from 'types/issue'
 import type { Milestone } from 'types/milestone'
 import type { PullRequest } from 'types/pullRequest'
@@ -10,6 +11,47 @@ import type { Release } from 'types/release'
 import SecondaryCard from 'components/SecondaryCard'
 import { TruncatedText } from 'components/TruncatedText'
 
+interface AuthorAvatarProps {
+  author: {
+    avatarUrl: string
+    login: string
+    name: string
+  }
+}
+
+const AuthorAvatar = ({ author }: AuthorAvatarProps): JSX.Element => {
+  const hasAuthorInfo = author?.name || author?.login
+  const hasLogin = author?.login
+  const hasAvatarUrl = Boolean(author?.avatarUrl)
+
+  const fallbackIcon = <FaUser className="mr-2 h-6 w-6 text-gray-400 dark:text-gray-500" />
+
+  if (hasAuthorInfo) {
+    const avatarContent = hasAvatarUrl ? (
+      <Image
+        height={24}
+        width={24}
+        src={author.avatarUrl}
+        alt={`${author.name || author.login}'s avatar`}
+        className="mr-2 rounded-full"
+      />
+    ) : (
+      fallbackIcon
+    )
+
+    if (hasLogin) {
+      return (
+        <Link className="shrink-0 text-blue-400 hover:underline" href={`/members/${author.login}`}>
+          {avatarContent}
+        </Link>
+      )
+    }
+    return <div className="shrink-0">{avatarContent}</div>
+  }
+
+  return <div className="shrink-0">{fallbackIcon}</div>
+}
+
 const ItemCardList = ({
   title,
   data,
@@ -60,22 +102,7 @@ const ItemCardList = ({
                     placement="bottom"
                     showArrow
                   >
-                    <Link
-                      className="shrink-0 text-blue-400 hover:underline"
-                      href={`/members/${item?.author?.login}`}
-                    >
-                      <Image
-                        height={24}
-                        width={24}
-                        src={item?.author?.avatarUrl}
-                        alt={
-                          item.author && (item.author.name || item.author.login)
-                            ? `${item.author.name || item.author.login}'s avatar`
-                            : "Author's avatar"
-                        }
-                        className="mr-2 rounded-full"
-                      />
-                    </Link>
+                    <AuthorAvatar author={item.author} />
                   </Tooltip>
                 )}
                 <h3 className="min-w-0 flex-1 overflow-hidden font-semibold text-ellipsis whitespace-nowrap">