diff --git a/src/app/components/Avatar.tsx b/src/app/components/Avatar.tsx
new file mode 100644
index 0000000..83a3f5d
--- /dev/null
+++ b/src/app/components/Avatar.tsx
@@ -0,0 +1,49 @@
+import {useReducer} from 'react';
+
+// Module-level cache shared by every Avatar instance for the life of the
+// page. The same user often appears in many places at once (member stacks,
+// team panels, admin lists), so once we know a URL is broken we never want
+// to flash a fallback again.
+const failedAvatarUrls = new Set<string>();
+
+export interface AvatarProps {
+  displayName: string;
+  avatarUrl?: string | null;
+  className?: string;
+}
+
+export function Avatar({displayName, avatarUrl, className}: AvatarProps) {
+  const [, forceRender] = useReducer((count: number) => count + 1, 0);
+  const failed = Boolean(avatarUrl) && failedAvatarUrls.has(avatarUrl!);
+  const showImage = Boolean(avatarUrl) && !failed;
+
+  return (
+    <span className={className ? `avatar ${className}` : 'avatar'} title={displayName}>
+      {showImage ? (
+        <img
+          key={avatarUrl}
+          src={avatarUrl!}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          referrerPolicy="no-referrer"
+          onError={() => {
+            failedAvatarUrls.add(avatarUrl!);
+            forceRender();
+          }}
+        />
+      ) : (
+        initials(displayName)
+      )}
+    </span>
+  );
+}
+
+function initials(value: string) {
+  return value
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+}
diff --git a/src/app/components/ProjectCard.tsx b/src/app/components/ProjectCard.tsx
index 3c1edb2..a12f7c8 100644
--- a/src/app/components/ProjectCard.tsx
+++ b/src/app/components/ProjectCard.tsx
@@ -1,11 +1,13 @@
 import {Link} from 'wouter';
 
 import type {ProjectSummary} from '../../shared/projects';
+import {Avatar} from './Avatar';
 import {Markdown} from './Markdown';
 
 interface ProjectListMember {
   id: string;
   displayName: string;
+  avatarUrl: string | null;
 }
 
 export function ProjectCard({
@@ -139,20 +141,13 @@ function MemberStack({
       aria-label={members.map(({displayName}) => displayName).join(', ')}
     >
       {members.slice(0, 4).map((member) => (
-        <span key={member.id} title={member.displayName}>
-          {initials(member.displayName)}
-        </span>
+        <Avatar
+          key={member.id}
+          displayName={member.displayName}
+          avatarUrl={member.avatarUrl}
+        />
       ))}
       {members.length > 4 && <span>+{members.length - 4}</span>}
     </span>
   );
 }
-
-function initials(value: string) {
-  return value
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part[0])
-    .join('')
-    .toUpperCase();
-}
diff --git a/src/app/routes/ProjectDetailsPage.tsx b/src/app/routes/ProjectDetailsPage.tsx
index 1222567..35fa964 100644
--- a/src/app/routes/ProjectDetailsPage.tsx
+++ b/src/app/routes/ProjectDetailsPage.tsx
@@ -3,6 +3,7 @@ import {useQuery} from '@tanstack/react-query';
 import {Link, useLocation, useParams} from 'wouter';
 
 import {QueryState} from '../components/AppLayout';
+import {Avatar} from '../components/Avatar';
 import {Markdown} from '../components/Markdown';
 import {ProjectVoting} from '../components/ProjectVoting';
 import {useBallotStatus} from '../queries/administration';
@@ -138,7 +139,10 @@ export function ProjectDetailsPage() {
               <ul>
                 {project.data.project.members.map((member) => (
                   <li key={member.id}>
-                    <span>{initials(member.displayName)}</span>
+                    <Avatar
+                      displayName={member.displayName}
+                      avatarUrl={member.avatarUrl}
+                    />
                     <a href={`mailto:${member.email}`}>
                       <strong>{member.displayName}</strong>
                       <small>{member.email}</small>
@@ -272,15 +276,6 @@ export function ProjectDetailsPage() {
   );
 }
 
-function initials(value: string) {
-  return value
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((part) => part[0])
-    .join('')
-    .toUpperCase();
-}
-
 function isImageMediaType(mediaType: string | null) {
   return mediaType?.toLowerCase().startsWith('image/') ?? false;
 }
diff --git a/src/app/styles.css b/src/app/styles.css
index 9c6b2fa..45dfdad 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1089,6 +1089,18 @@ main {
   color: var(--ink);
   background: var(--pink);
 }
+.avatar {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  flex: none;
+}
+.avatar img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .openSeat {
   color: var(--blurple);
   font-weight: 500;
diff --git a/src/shared/videos.ts b/src/shared/videos.ts
index d690055..7658e1e 100644
--- a/src/shared/videos.ts
+++ b/src/shared/videos.ts
@@ -88,7 +88,7 @@ export interface PlaylistItem {
   projectName: string;
   groupId: string | null;
   groupName: string | null;
-  teamMembers: Array<{id: string; displayName: string}>;
+  teamMembers: Array<{id: string; displayName: string; avatarUrl: string | null}>;
   durationSeconds: number;
   gainDb: number;
   position: number;
diff --git a/src/worker/services/videos.ts b/src/worker/services/videos.ts
index cf9454d..ab60284 100644
--- a/src/worker/services/videos.ts
+++ b/src/worker/services/videos.ts
@@ -132,10 +132,13 @@ export async function listPlaylist(
     }>();
   if (!results.length) return [];
 
-  const membersByProject = new Map<string, Array<{id: string; displayName: string}>>();
+  const membersByProject = new Map<
+    string,
+    Array<{id: string; displayName: string; avatarUrl: string | null}>
+  >();
   const members = await db
     .prepare(
-      `SELECT pm.project_id, u.id user_id, u.display_name
+      `SELECT pm.project_id, u.id user_id, u.display_name, u.avatar_url
        FROM project_members pm
        JOIN users u ON u.id = pm.user_id
        JOIN projects p ON p.id = pm.project_id
@@ -147,10 +150,19 @@ export async function listPlaylist(
        ORDER BY pm.project_id, u.display_name COLLATE NOCASE, u.id`,
     )
     .bind(yearId)
-    .all<{project_id: string; user_id: string; display_name: string}>();
+    .all<{
+      project_id: string;
+      user_id: string;
+      display_name: string;
+      avatar_url: string | null;
+    }>();
   for (const member of members.results) {
     const projectMembers = membersByProject.get(member.project_id) ?? [];
-    projectMembers.push({id: member.user_id, displayName: member.display_name});
+    projectMembers.push({
+      id: member.user_id,
+      displayName: member.display_name,
+      avatarUrl: member.avatar_url,
+    });
     membersByProject.set(member.project_id, projectMembers);
   }
 
diff --git a/test/player/controller.test.tsx b/test/player/controller.test.tsx
index 5ca6028..817fca1 100644
--- a/test/player/controller.test.tsx
+++ b/test/player/controller.test.tsx
@@ -160,8 +160,8 @@ const playlist: PlaylistItem[] = [
     groupId: 'europe',
     groupName: 'Europe',
     teamMembers: [
-      {id: 'ada', displayName: 'Ada'},
-      {id: 'grace', displayName: 'Grace'},
+      {id: 'ada', displayName: 'Ada', avatarUrl: null},
+      {id: 'grace', displayName: 'Grace', avatarUrl: null},
     ],
     durationSeconds: 10,
     gainDb: 6,
@@ -173,7 +173,7 @@ const playlist: PlaylistItem[] = [
     projectName: 'Second',
     groupId: 'americas',
     groupName: 'Americas',
-    teamMembers: [{id: 'linus', displayName: 'Linus'}],
+    teamMembers: [{id: 'linus', displayName: 'Linus', avatarUrl: null}],
     durationSeconds: 20,
     gainDb: -3,
     position: 1,
diff --git a/test/video-ui/video-ui.test.tsx b/test/video-ui/video-ui.test.tsx
index 3f10666..690457b 100644
--- a/test/video-ui/video-ui.test.tsx
+++ b/test/video-ui/video-ui.test.tsx
@@ -466,8 +466,8 @@ const playlist: PlaylistItem[] = [
     groupId: 'europe',
     groupName: 'Europe',
     teamMembers: [
-      {id: 'ada', displayName: 'Ada Lovelace'},
-      {id: 'grace', displayName: 'Grace Hopper'},
+      {id: 'ada', displayName: 'Ada Lovelace', avatarUrl: null},
+      {id: 'grace', displayName: 'Grace Hopper', avatarUrl: null},
     ],
     durationSeconds: 30,
     gainDb: 0,
@@ -479,7 +479,7 @@ const playlist: PlaylistItem[] = [
     projectName: 'Second project',
     groupId: 'americas',
     groupName: 'Americas',
-    teamMembers: [{id: 'linus', displayName: 'Linus Torvalds'}],
+    teamMembers: [{id: 'linus', displayName: 'Linus Torvalds', avatarUrl: null}],
     durationSeconds: 45,
     gainDb: -1,
     position: 1,