From 5dda8acb7a25e9980caf188d0e2f0ed57ddd77c7 Mon Sep 17 00:00:00 2001
From: "open-swe[bot]" <215916821+open-swe[bot]@users.noreply.github.com>
Date: Tue, 2 Jun 2026 15:53:02 -0700
Subject: [PATCH] fix: use brand icons in settings (#1377)

Co-authored-by: Johannes du Plessis <51395795+johannes117@users.noreply.github.com>
Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
---
 ui/src/components/agents/AgentRunCard.tsx  | 19 ++++++++++---------
 ui/src/components/agents/AgentsSidebar.tsx | 20 ++++++++++----------
 ui/src/routes/my-settings.tsx              |  4 ++--
 ui/src/routes/review.tsx                   |  5 +++--
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/agents/AgentRunCard.tsx b/ui/src/components/agents/AgentRunCard.tsx
index aafe4a4c..1b29f991 100644
--- a/ui/src/components/agents/AgentRunCard.tsx
+++ b/ui/src/components/agents/AgentRunCard.tsx
@@ -4,21 +4,22 @@ import {
   CheckCircleIcon,
   GitBranchIcon,
   GitPullRequestIcon,
-  GithubLogoIcon,
-  KanbanIcon,
-  SlackLogoIcon,
 } from "@phosphor-icons/react";
-import type { Icon } from "@phosphor-icons/react";
+import { IoLogoGithub, IoLogoSlack } from "react-icons/io5";
+import { SiLinear } from "react-icons/si";
+import type { ComponentType, SVGProps } from "react";
 
 import type { AgentSource, AgentThread } from "@/lib/agents/types";
 import { formatRelativeTime } from "@/lib/agents/api";
 import { cn } from "@/lib/utils";
 
-const SOURCE_META: Record<AgentSource, { icon: Icon; label: string }> = {
+type SourceIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+const SOURCE_META: Record<AgentSource, { icon: SourceIcon; label: string }> = {
   dashboard: { icon: ChatCircleIcon, label: "Dashboard" },
-  github: { icon: GithubLogoIcon, label: "GitHub" },
-  slack: { icon: SlackLogoIcon, label: "Slack" },
-  linear: { icon: KanbanIcon, label: "Linear" },
+  github: { icon: IoLogoGithub, label: "GitHub" },
+  slack: { icon: IoLogoSlack, label: "Slack" },
+  linear: { icon: SiLinear, label: "Linear" },
 };
 
 interface AgentRunCardProps {
@@ -72,7 +73,7 @@ export function AgentRunCard({ thread }: AgentRunCardProps) {
           {source && SourceIcon && (
             <>
               <span className="flex items-center gap-1" title={source.label}>
-                <SourceIcon className="size-3.5" weight="fill" aria-label={source.label} />
+                <SourceIcon className="size-3.5" aria-label={source.label} />
                 {source.label}
               </span>
               <span>·</span>
diff --git a/ui/src/components/agents/AgentsSidebar.tsx b/ui/src/components/agents/AgentsSidebar.tsx
index 7accf2b4..5a25c08d 100644
--- a/ui/src/components/agents/AgentsSidebar.tsx
+++ b/ui/src/components/agents/AgentsSidebar.tsx
@@ -2,13 +2,12 @@ import { Link } from "@tanstack/react-router";
 import {
   ChartLineUpIcon,
   ChatCircleIcon,
-  GithubLogoIcon,
-  KanbanIcon,
   PlusIcon,
-  SlackLogoIcon,
   XIcon,
 } from "@phosphor-icons/react";
-import type { Icon } from "@phosphor-icons/react";
+import { IoLogoGithub, IoLogoSlack } from "react-icons/io5";
+import { SiLinear } from "react-icons/si";
+import type { ComponentType, SVGProps } from "react";
 
 import type { SessionUser } from "@/lib/api";
 import type { AgentSource, AgentThread } from "@/lib/agents/types";
@@ -22,11 +21,13 @@ import { groupThreads } from "@/lib/agents/api";
 import { useAgentThreads, useDeleteAgentThread } from "@/lib/agents/queries";
 import { cn } from "@/lib/utils";
 
-const SOURCE_META: Record<AgentSource, { icon: Icon; label: string }> = {
+type SourceIcon = ComponentType<SVGProps<SVGSVGElement>>;
+
+const SOURCE_META: Record<AgentSource, { icon: SourceIcon; label: string }> = {
   dashboard: { icon: ChatCircleIcon, label: "Started from the dashboard" },
-  github: { icon: GithubLogoIcon, label: "Triggered from GitHub" },
-  slack: { icon: SlackLogoIcon, label: "Triggered from Slack" },
-  linear: { icon: KanbanIcon, label: "Triggered from Linear" },
+  github: { icon: IoLogoGithub, label: "Triggered from GitHub" },
+  slack: { icon: IoLogoSlack, label: "Triggered from Slack" },
+  linear: { icon: SiLinear, label: "Triggered from Linear" },
 };
 
 interface AgentsSidebarProps {
@@ -100,7 +101,7 @@ function ThreadGroup({
   activeThreadId,
 }: {
   label: string;
-  threads: AgentThread[];
+  threads: Array<AgentThread>;
   activeThreadId?: string;
 }) {
   if (threads.length === 0) return null;
@@ -161,7 +162,6 @@ function ThreadRow({ thread, isActive }: { thread: AgentThread; isActive: boolea
       {source && SourceIcon && (
         <SourceIcon
           className="size-3.5 shrink-0 text-[var(--ui-text-dim)]"
-          weight="fill"
           aria-label={source.label}
         >
           <title>{source.label}</title>
diff --git a/ui/src/routes/my-settings.tsx b/ui/src/routes/my-settings.tsx
index c40eb0f1..182fe0af 100644
--- a/ui/src/routes/my-settings.tsx
+++ b/ui/src/routes/my-settings.tsx
@@ -1,7 +1,7 @@
 import { Navigate, createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { SlackLogoIcon } from "@phosphor-icons/react";
 import { useState } from "react";
+import { IoLogoSlack } from "react-icons/io5";
 
 import type { SessionUser } from "@/lib/api";
 import { AppShell, SettingsRow, SettingsSection } from "@/components/AppShell";
@@ -85,7 +85,7 @@ function UserMappingSection({ session }: { session: SessionUser }) {
                   onClick={connect}
                   disabled={connecting || mapping.isLoading}
                 >
-                  <SlackLogoIcon className="size-4" />
+                  <IoLogoSlack className="size-4" />
                   {connecting ? "Redirecting…" : connected ? "Reconnect" : "Connect Slack"}
                 </Button>
               ) : (
diff --git a/ui/src/routes/review.tsx b/ui/src/routes/review.tsx
index 6449b9fa..69916595 100644
--- a/ui/src/routes/review.tsx
+++ b/ui/src/routes/review.tsx
@@ -1,7 +1,8 @@
 import { Link, Navigate, createFileRoute } from "@tanstack/react-router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CaretRightIcon, GithubLogoIcon } from "@phosphor-icons/react";
+import { CaretRightIcon } from "@phosphor-icons/react";
 import { useEffect, useMemo, useState } from "react";
+import { IoLogoGithub } from "react-icons/io5";
 
 import type { AutofixMode, ReposPayload, TeamSettings, TriggerMode } from "@/lib/api";
 import { AppShell, SettingsRow, SettingsSection } from "@/components/AppShell";
@@ -315,7 +316,7 @@ function RepositoriesSection({ canEdit: _canEdit }: { canEdit: boolean }) {
               className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-muted/40"
             >
               <div className="flex items-center gap-3">
-                <GithubLogoIcon className="size-5 shrink-0 text-muted-foreground" />
+                <IoLogoGithub className="size-5 shrink-0 text-muted-foreground" />
                 <div className="flex flex-col gap-0.5">
                   <div className="flex items-center gap-2 text-xs">
                     <span className="font-medium text-foreground">{owner}</span>