From 1b99c4109800eba615197dbd3ad3829f0c3a6d9b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 22 Jun 2026 16:15:06 +0100
Subject: [PATCH] feat(webapp): update task and cached task span icons

Update the SVG artwork for the main task icon and the cached task variant
shown on the run trace span view. The cached icon now lives alongside
TaskIcon in TaskIcon.tsx and uses currentColor, so it inherits the
text-tasks theme color like the other span icons.
---
 .server-changes/cached-task-icon-svg.md       |   6 +
 .../app/assets/icons/TaskCachedIcon.tsx       |  49 -------
 apps/webapp/app/assets/icons/TaskIcon.tsx     | 131 +++++++++++++++---
 .../webapp/app/components/runs/v3/RunIcon.tsx |   3 +-
 .../app/routes/storybook.icons/route.tsx      |   3 +-
 5 files changed, 123 insertions(+), 69 deletions(-)
 create mode 100644 .server-changes/cached-task-icon-svg.md
 delete mode 100644 apps/webapp/app/assets/icons/TaskCachedIcon.tsx

diff --git a/.server-changes/cached-task-icon-svg.md b/.server-changes/cached-task-icon-svg.md
new file mode 100644
index 00000000000..7a675e01e13
--- /dev/null
+++ b/.server-changes/cached-task-icon-svg.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Refresh the task and cached-task span icons shown in the run trace view with new SVG artwork.
diff --git a/apps/webapp/app/assets/icons/TaskCachedIcon.tsx b/apps/webapp/app/assets/icons/TaskCachedIcon.tsx
deleted file mode 100644
index 650f9be396a..00000000000
--- a/apps/webapp/app/assets/icons/TaskCachedIcon.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-export function TaskCachedIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_15584_76102)">
-        <path
-          d="M0.5 3.5L0.5 2.5C0.5 1.39543 1.39543 0.5 2.5 0.5H3.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M15.5 12.5L15.5 13.5C15.5 14.6046 14.6046 15.5 13.5 15.5L12.5 15.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12.5 0.5L13.5 0.5C14.6046 0.5 15.5 1.39543 15.5 2.5L15.5 3.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M3.5 15.5L2.5 15.5C1.39543 15.5 0.5 14.6046 0.5 13.5L0.5 12.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path d="M11.1799 4.19V5.598H8.8479V12H7.1649V5.598H4.8219V4.19H11.1799Z" fill="#3B82F6" />
-        <line x1="6" y1="15.5" x2="10" y2="15.5" stroke="#3B82F6" />
-        <line x1="6" y1="0.5" x2="10" y2="0.5" stroke="#3B82F6" />
-        <line x1="15.5" y1="6" x2="15.5" y2="10" stroke="#3B82F6" />
-        <line x1="0.5" y1="6" x2="0.5" y2="10" stroke="#3B82F6" />
-      </g>
-      <defs>
-        <clipPath id="clip0_15584_76102">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx
index ba73c34c502..c0cdc3fd440 100644
--- a/apps/webapp/app/assets/icons/TaskIcon.tsx
+++ b/apps/webapp/app/assets/icons/TaskIcon.tsx
@@ -8,58 +8,157 @@ export function TaskIcon({ className }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="11" y="16" width="2" height="6" rx="1" fill="currentColor" />
-      <rect x="11" y="2" width="2" height="6" rx="1" fill="currentColor" />
+      <rect x="11" y="16" width="2" height="7" rx="1" fill="currentColor" />
+      <rect x="11" y="1" width="2" height="7" rx="1" fill="currentColor" />
       <rect
         x="13"
         y="11"
         width="2"
-        height="11"
+        height="12"
         rx="1"
         transform="rotate(90 13 11)"
         fill="currentColor"
       />
       <rect
-        x="22"
+        x="23"
         y="11"
         width="2"
-        height="6"
+        height="7"
         rx="1"
-        transform="rotate(90 22 11)"
+        transform="rotate(90 23 11)"
         fill="currentColor"
       />
       <rect
-        x="5.63604"
-        y="19.7782"
+        x="4.92758"
+        y="20.4867"
         width="2"
-        height="10.9999"
+        height="12.0018"
         rx="1"
-        transform="rotate(-135 5.63604 19.7782)"
+        transform="rotate(-135 4.92758 20.4867)"
         fill="currentColor"
       />
       <rect
         x="15.3185"
         y="10.0958"
         width="2"
-        height="6.30698"
+        height="6.99687"
         rx="1"
         transform="rotate(-135 15.3185 10.0958)"
         fill="currentColor"
       />
       <rect
-        x="19.7781"
-        y="18.364"
+        x="20.3488"
+        y="18.9346"
         width="2"
-        height="6.18952"
+        height="6.99653"
         rx="1"
-        transform="rotate(135 19.7781 18.364)"
+        transform="rotate(135 20.3488 18.9346)"
         fill="currentColor"
       />
       <rect
         x="13.4161"
         y="12.002"
         width="2"
-        height="11.0027"
+        height="11.9956"
+        rx="1"
+        transform="rotate(135 13.4161 12.002)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function TaskCachedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="11" y="16" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="20" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="5" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="1" width="2" height="3" rx="1" fill="currentColor" />
+      <rect
+        x="13"
+        y="11"
+        width="2"
+        height="12"
+        rx="1"
+        transform="rotate(90 13 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="19"
+        y="11"
+        width="2"
+        height="3"
+        rx="1"
+        transform="rotate(90 19 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="23"
+        y="11"
+        width="2"
+        height="3"
+        rx="1"
+        transform="rotate(90 23 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="4.92758"
+        y="20.4867"
+        width="2"
+        height="12.0018"
+        rx="1"
+        transform="rotate(-135 4.92758 20.4867)"
+        fill="currentColor"
+      />
+      <rect
+        x="15.3185"
+        y="10.0958"
+        width="2"
+        height="2.99815"
+        rx="1"
+        transform="rotate(-135 15.3185 10.0958)"
+        fill="currentColor"
+      />
+      <rect
+        x="18.1445"
+        y="7.26978"
+        width="2"
+        height="3.00029"
+        rx="1"
+        transform="rotate(-135 18.1445 7.26978)"
+        fill="currentColor"
+      />
+      <rect
+        x="17.5259"
+        y="16.1117"
+        width="2"
+        height="3.00436"
+        rx="1"
+        transform="rotate(135 17.5259 16.1117)"
+        fill="currentColor"
+      />
+      <rect
+        x="20.3488"
+        y="18.9346"
+        width="2"
+        height="3.00154"
+        rx="1"
+        transform="rotate(135 20.3488 18.9346)"
+        fill="currentColor"
+      />
+      <rect
+        x="13.4161"
+        y="12.002"
+        width="2"
+        height="11.9956"
         rx="1"
         transform="rotate(135 13.4161 12.002)"
         fill="currentColor"
diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx
index f207ba9e6df..ea31fa811f2 100644
--- a/apps/webapp/app/components/runs/v3/RunIcon.tsx
+++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx
@@ -23,11 +23,10 @@ import {
   XAIIcon,
 } from "~/assets/icons/AiProviderIcons";
 import { AttemptIcon } from "~/assets/icons/AttemptIcon";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { TaskCachedIcon, TaskIcon } from "~/assets/icons/TaskIcon";
 import { cn } from "~/utils/cn";
 import { tablerIcons } from "~/utils/tablerIcons";
 import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
-import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
 import { PauseIcon } from "~/assets/icons/PauseIcon";
 import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
 import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";
diff --git a/apps/webapp/app/routes/storybook.icons/route.tsx b/apps/webapp/app/routes/storybook.icons/route.tsx
index af98d083090..2b5f4c4cd3e 100644
--- a/apps/webapp/app/routes/storybook.icons/route.tsx
+++ b/apps/webapp/app/routes/storybook.icons/route.tsx
@@ -128,8 +128,7 @@ import { StarIcon } from "~/assets/icons/StarIcon";
 import { StatusIcon } from "~/assets/icons/StatusIcon";
 import { StreamsIcon } from "~/assets/icons/StreamsIcon";
 import { TableIcon } from "~/assets/icons/TableIcon";
-import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
-import { TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
+import { TaskCachedIcon, TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { TestTubeIcon } from "~/assets/icons/TestTubeIcon";
 import { TextInlineIcon } from "~/assets/icons/TextInlineIcon";
 import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";