diff --git a/ui/src/components/timeline/WorkTimelineChart.test.tsx b/ui/src/components/timeline/WorkTimelineChart.test.tsx
index 73daea7f2d..627f399f42 100644
--- a/ui/src/components/timeline/WorkTimelineChart.test.tsx
+++ b/ui/src/components/timeline/WorkTimelineChart.test.tsx
@@ -49,8 +49,8 @@ function renderChart(
 function timelineSample(): WorkTimelineResult {
   return {
     actors: [
-      { id: "agent:codex", type: "agent", name: "CodexCoder" },
-      { id: "agent:qa", type: "agent", name: "QA" },
+      { id: "agent:codex", type: "agent", name: "CodexCoder", avatar: "code" },
+      { id: "agent:qa", type: "agent", name: "QA", avatar: "shield" },
     ],
     spans: [
       {
@@ -148,6 +148,16 @@ describe("WorkTimelineChart", () => {
     expect(container.querySelector("[data-testid='work-timeline-actor-gutter']")?.textContent).toContain("CodexCoder");
   });
 
+  it("renders configured agent icons in the actor gutter instead of generated initials", () => {
+    renderChart(timelineSample());
+
+    const gutter = container.querySelector<SVGSVGElement>("[data-testid='work-timeline-actor-gutter']");
+
+    expect(gutter?.querySelector(".lucide-code")).not.toBeNull();
+    expect(gutter?.querySelector(".lucide-shield")).not.toBeNull();
+    expect(gutter?.textContent).not.toContain("CC");
+  });
+
   it("does not render created diamonds or comment bubbles from instant events", () => {
     const data = timelineSample();
     data.actors.push({ id: "user:dotta", type: "user", name: "Dotta" });
@@ -248,9 +258,14 @@ describe("WorkTimelineChart", () => {
     expect(layout.connectors[0].x2).toBe(bars.get("run-2")?.x1);
   });
 
-  it("renders kickoff chips for human users but not delegating agents", () => {
+  it("renders kickoff chips with human avatar images but not delegating agents", () => {
     const data = timelineSample();
-    data.actors.push({ id: "user:dotta", type: "user", name: "Dotta" });
+    data.actors.push({
+      id: "user:dotta",
+      type: "user",
+      name: "Dotta",
+      avatar: "/api/assets/dotta-avatar/content",
+    });
     data.edges = [
       {
         fromActorId: "user:dotta",
@@ -272,7 +287,8 @@ describe("WorkTimelineChart", () => {
 
     const kickoffChips = container.querySelectorAll("[data-testid='timeline-kickoff-chip']");
     expect(kickoffChips).toHaveLength(1);
-    expect(kickoffChips[0].textContent).toContain("DO");
+    expect(kickoffChips[0].querySelector("image")?.getAttribute("href")).toBe("/api/assets/dotta-avatar/content");
+    expect(kickoffChips[0].textContent).not.toContain("DO");
   });
 
   it("reserves normal wheel input for panning and uses modifier-wheel for continuous zoom", () => {
diff --git a/ui/src/components/timeline/WorkTimelineChart.tsx b/ui/src/components/timeline/WorkTimelineChart.tsx
index 689f6ead78..932a488611 100644
--- a/ui/src/components/timeline/WorkTimelineChart.tsx
+++ b/ui/src/components/timeline/WorkTimelineChart.tsx
@@ -12,6 +12,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "@/lib/router";
 import type { WorkTimelineActor, WorkTimelineResult } from "@paperclipai/shared";
 import { applyCompanyPrefix, extractCompanyPrefixFromPath } from "@/lib/company-routes";
+import { getAgentIcon } from "@/lib/agent-icons";
 import {
   AXIS_H,
   actorType,
@@ -134,25 +135,70 @@ function truncate(text: string, n = 42): string {
   return text.length > n ? `${text.slice(0, n - 1)}…` : text;
 }
 
-/** An SVG avatar glyph: square for humans, dashed circle for system, circle for agents. */
-function AvatarGlyph({
+function svgFragmentId(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+/** An SVG avatar glyph: agents use their configured sidebar icon, humans use their avatar image. */
+function ActorGlyph({
+  actor,
   cx,
   cy,
   r,
-  label,
-  type,
+  clipId,
 }: {
+  actor: WorkTimelineActor;
   cx: number;
   cy: number;
   r: number;
-  label: string;
-  type: string;
+  clipId: string;
 }) {
+  if (actor.type === "agent") {
+    const Icon = getAgentIcon(actor.avatar);
+    const size = r > 10 ? 16 : 13;
+    return (
+      <Icon
+        data-testid="timeline-agent-icon"
+        x={cx - size / 2}
+        y={cy - size / 2}
+        width={size}
+        height={size}
+        strokeWidth={2.2}
+        color="var(--color-muted-foreground)"
+      />
+    );
+  }
+
   const stroke = "var(--color-foreground)";
-  const fill = type === "system" ? "var(--color-muted)" : "var(--color-card)";
+  const fill = actor.type === "system" ? "var(--color-muted)" : "var(--color-card)";
+  const label = shortLabel(actor.name);
+
+  if (actor.type === "user" && actor.avatar) {
+    return (
+      <g>
+        <defs>
+          <clipPath id={clipId}>
+            <circle cx={cx} cy={cy} r={r} />
+          </clipPath>
+        </defs>
+        <image
+          data-testid="timeline-user-avatar-image"
+          href={actor.avatar}
+          x={cx - r}
+          y={cy - r}
+          width={2 * r}
+          height={2 * r}
+          preserveAspectRatio="xMidYMid slice"
+          clipPath={`url(#${clipId})`}
+        />
+        <circle cx={cx} cy={cy} r={r} fill="none" stroke={stroke} strokeWidth={1.2} opacity={0.5} />
+      </g>
+    );
+  }
+
   return (
     <g>
-      {type === "user" ? (
+      {actor.type === "user" ? (
         <rect x={cx - r} y={cy - r} width={2 * r} height={2 * r} rx={3} fill={fill} stroke={stroke} strokeWidth={1.5} />
       ) : (
         <circle
@@ -162,7 +208,7 @@ function AvatarGlyph({
           fill={fill}
           stroke={stroke}
           strokeWidth={1.5}
-          strokeDasharray={type === "system" ? "3 2" : undefined}
+          strokeDasharray={actor.type === "system" ? "3 2" : undefined}
         />
       )}
       <text x={cx} y={cy + 3.4} fontSize={r > 10 ? 9 : 8} textAnchor="middle" fill={stroke}>
@@ -483,9 +529,10 @@ export function WorkTimelineChart({
           {/* rows: gutter avatar/label, lane baselines, bars, human kickoff chips */}
           {layout.rows.map((row) => {
             const cy = row.y + AXIS_H + row.h / 2;
+            const actorGlyphId = svgFragmentId(`plot-${row.actor.id}`);
             return (
               <g key={`row-${row.actor.id}`}>
-                <AvatarGlyph cx={26} cy={cy} r={AVATAR_R} label={shortLabel(row.actor.name)} type={row.actor.type} />
+                <ActorGlyph actor={row.actor} cx={26} cy={cy} r={AVATAR_R} clipId={actorGlyphId} />
                 <text x={26 + AVATAR_R + 10} y={cy - 2} fontSize={13} fill="var(--color-foreground)">
                   {truncate(row.actor.name, 18)}
                 </text>
@@ -561,12 +608,12 @@ export function WorkTimelineChart({
                       </g>
                       {bar.kickoff && actorType(bar.kickoff) === "user" && (
                         <g className="pointer-events-none" data-testid="timeline-kickoff-chip">
-                          <AvatarGlyph
+                          <ActorGlyph
+                            actor={bar.kickoff as WorkTimelineActor}
                             cx={bar.x1}
                             cy={yTop + bar.height / 2}
                             r={CHIP_R}
-                            label={shortLabel((bar.kickoff as WorkTimelineActor).name)}
-                            type={actorType(bar.kickoff)}
+                            clipId={svgFragmentId(`kickoff-${bar.span.runId}-${bar.kickoff.id}`)}
                           />
                         </g>
                       )}
@@ -623,6 +670,7 @@ function ActorGutter({ rows, height }: { rows: ReturnType<typeof computeLayout>[
       <rect x={0} y={0} width={GEOM.gutter} height={height} fill="var(--color-card)" />
       {rows.map((row, i) => {
         const cy = row.y + AXIS_H + row.h / 2;
+        const actorGlyphId = svgFragmentId(`gutter-${row.actor.id}`);
         return (
           <g key={`gutter-${row.actor.id}`}>
             <rect
@@ -633,7 +681,7 @@ function ActorGutter({ rows, height }: { rows: ReturnType<typeof computeLayout>[
               fill={i % 2 ? "var(--color-muted)" : "var(--color-card)"}
               opacity={i % 2 ? 0.35 : 1}
             />
-            <AvatarGlyph cx={26} cy={cy} r={AVATAR_R} label={shortLabel(row.actor.name)} type={row.actor.type} />
+            <ActorGlyph actor={row.actor} cx={26} cy={cy} r={AVATAR_R} clipId={actorGlyphId} />
             <text x={26 + AVATAR_R + 10} y={cy - 2} fontSize={13} fill="var(--color-foreground)">
               {truncate(row.actor.name, 16)}
             </text>