Better trace icon

Author: matt-aitken

apps/webapp/app/assets/icons/TraceIcon.tsx

@@ -0,0 +1,9 @@
+export function TraceIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="2" y="2" width="13" height="6" rx="2" fill="currentColor" />
+      <rect x="9" y="9" width="13" height="6" rx="2" fill="currentColor" />
+      <rect x="2" y="16" width="13" height="6" rx="2" fill="currentColor" />
+    </svg>
+  );
+}

apps/webapp/app/components/runs/v3/RunIcon.tsx

@@ -18,6 +18,7 @@ import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";
 import { FunctionIcon } from "~/assets/icons/FunctionIcon";
 import { TriggerIcon } from "~/assets/icons/TriggerIcon";
 import { PythonLogoIcon } from "~/assets/icons/PythonLogoIcon";
+import { TraceIcon } from "~/assets/icons/TraceIcon";
 
 type TaskIconProps = {
   name: string | undefined;
@@ -65,7 +66,7 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
     case "wait":
       return <PauseIcon className={cn(className, "text-teal-500")} />;
     case "trace":
-      return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
+      return <TraceIcon className={cn(className, "text-text-dimmed")} />;
     case "tag":
       return <TagIcon className={cn(className, "text-text-dimmed")} />;
     case "queue":