From 3b013be0bc471e3e42ab7f000ba995c9c40f9dda Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 22 Jun 2026 13:46:34 +0100
Subject: [PATCH] feat(webapp): update task and tasks dashboard icons

TaskIcon (and its small variant) now use a new burst glyph, and TasksIcon
adopts the previous task glyph. Export names are unchanged, so existing
usages pick up the new artwork automatically.
---
 .server-changes/swap-task-icons.md         |   6 ++
 apps/webapp/app/assets/icons/TaskIcon.tsx  | 118 ++++++++++++++++++---
 apps/webapp/app/assets/icons/TasksIcon.tsx |  28 ++---
 3 files changed, 116 insertions(+), 36 deletions(-)
 create mode 100644 .server-changes/swap-task-icons.md

diff --git a/.server-changes/swap-task-icons.md b/.server-changes/swap-task-icons.md
new file mode 100644
index 00000000000..13605675e3d
--- /dev/null
+++ b/.server-changes/swap-task-icons.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Update the dashboard task icons with a new glyph design.
diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx
index 963ccbfe348..ba73c34c502 100644
--- a/apps/webapp/app/assets/icons/TaskIcon.tsx
+++ b/apps/webapp/app/assets/icons/TaskIcon.tsx
@@ -8,16 +8,60 @@ export function TaskIcon({ className }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
+      <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
-        width="8.993"
-        height="2"
+        x="13"
+        y="11"
+        width="2"
+        height="11"
         rx="1"
-        transform="matrix(1 0 0 -1 7.5035 9)"
+        transform="rotate(90 13 11)"
         fill="currentColor"
       />
-      <path
-        d="M11 8.49536L11 16.4954C11 17.0476 11.4477 17.4954 12 17.4954C12.5523 17.4954 13 17.0476 13 16.4954L13 8.49536L11 8.49536Z"
+      <rect
+        x="22"
+        y="11"
+        width="2"
+        height="6"
+        rx="1"
+        transform="rotate(90 22 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="5.63604"
+        y="19.7782"
+        width="2"
+        height="10.9999"
+        rx="1"
+        transform="rotate(-135 5.63604 19.7782)"
+        fill="currentColor"
+      />
+      <rect
+        x="15.3185"
+        y="10.0958"
+        width="2"
+        height="6.30698"
+        rx="1"
+        transform="rotate(-135 15.3185 10.0958)"
+        fill="currentColor"
+      />
+      <rect
+        x="19.7781"
+        y="18.364"
+        width="2"
+        height="6.18952"
+        rx="1"
+        transform="rotate(135 19.7781 18.364)"
+        fill="currentColor"
+      />
+      <rect
+        x="13.4161"
+        y="12.002"
+        width="2"
+        height="11.0027"
+        rx="1"
+        transform="rotate(135 13.4161 12.002)"
         fill="currentColor"
       />
     </svg>
@@ -27,14 +71,60 @@ export function TaskIcon({ className }: { className?: string }) {
 export function TaskIconSmall({ className }: { className?: string }) {
   return (
     <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M4 3H16C16.5523 3 17 3.44772 17 4V16C17 16.5523 16.5523 17 16 17H4C3.44772 17 3 16.5523 3 16V4L3.00488 3.89746C3.05621 3.39333 3.48232 3 4 3Z"
-        stroke="currentColor"
-        strokeWidth="2"
-      />
-      <rect width="8" height="2" rx="1" transform="matrix(1 0 0 -1 6 8)" fill="currentColor" />
-      <path
-        d="M10 6C9.44772 6 9 6.44772 9 7L9 14C9 14.5523 9.44772 15 10 15C10.5523 15 11 14.5523 11 14L11 7C11 6.44772 10.5523 6 10 6Z"
+      <rect x="9" y="14" width="2" height="4" rx="1" fill="currentColor" />
+      <rect x="9" y="2" width="2" height="4" rx="1" fill="currentColor" />
+      <rect
+        x="11"
+        y="9"
+        width="2"
+        height="9"
+        rx="1"
+        transform="rotate(90 11 9)"
+        fill="currentColor"
+      />
+      <rect
+        x="18"
+        y="9"
+        width="2"
+        height="4"
+        rx="1"
+        transform="rotate(90 18 9)"
+        fill="currentColor"
+      />
+      <rect
+        x="5.0531"
+        y="16.3611"
+        width="2"
+        height="8.99589"
+        rx="1"
+        transform="rotate(-135 5.0531 16.3611)"
+        fill="currentColor"
+      />
+      <rect
+        x="13.3185"
+        y="8.09583"
+        width="2"
+        height="4"
+        rx="1"
+        transform="rotate(-135 13.3185 8.09583)"
+        fill="currentColor"
+      />
+      <rect
+        x="16.2304"
+        y="14.8163"
+        width="2"
+        height="4.00064"
+        rx="1"
+        transform="rotate(135 16.2304 14.8163)"
+        fill="currentColor"
+      />
+      <rect
+        x="11.4161"
+        y="10.002"
+        width="2"
+        height="8.99796"
+        rx="1"
+        transform="rotate(135 11.4161 10.002)"
         fill="currentColor"
       />
     </svg>
diff --git a/apps/webapp/app/assets/icons/TasksIcon.tsx b/apps/webapp/app/assets/icons/TasksIcon.tsx
index 89375323c99..1a31ba65804 100644
--- a/apps/webapp/app/assets/icons/TasksIcon.tsx
+++ b/apps/webapp/app/assets/icons/TasksIcon.tsx
@@ -8,32 +8,16 @@ export function TasksIcon({ className }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="11" y="2" width="2" height="20" rx="1" fill="currentColor" />
+      <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="2" />
       <rect
-        x="22"
-        y="11"
-        width="2"
-        height="20"
+        width="8.993"
+        height="2"
         rx="1"
-        transform="rotate(90 22 11)"
+        transform="matrix(1 0 0 -1 7.5035 9)"
         fill="currentColor"
       />
-      <rect
-        x="5.63604"
-        y="19.7782"
-        width="2"
-        height="20"
-        rx="1"
-        transform="rotate(-135 5.63604 19.7782)"
-        fill="currentColor"
-      />
-      <rect
-        x="19.7781"
-        y="18.364"
-        width="2"
-        height="20"
-        rx="1"
-        transform="rotate(135 19.7781 18.364)"
+      <path
+        d="M11 8.49536L11 16.4954C11 17.0476 11.4477 17.4954 12 17.4954C12.5523 17.4954 13 17.0476 13 16.4954L13 8.49536L11 8.49536Z"
         fill="currentColor"
       />
     </svg>