Skip to content

feat(webapp): update task and tasks dashboard icons #4013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samejr merged 2 commits into from
Jun 22, 2026
+116 −36
Merged

feat(webapp): update task and tasks dashboard icons #4013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b013be
feat(webapp): update task and tasks dashboard icons
samejr Jun 22, 2026
edac42f
Merge branch 'main' into samejr/swap-taskicon-svg
samejr Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .server-changes/swap-task-icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
area: webapp
type: improvement
---

Update the dashboard task icons with a new glyph design.
118 changes: 104 additions & 14 deletions apps/webapp/app/assets/icons/TaskIcon.tsx
View file
Open in desktop
Comment thread
samejr marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
28 changes: 6 additions & 22 deletions apps/webapp/app/assets/icons/TasksIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down