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

@@ -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>

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>

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>
               ) : (

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>