Use approved icon colors

web/public/Confluence.svg

@@ -0,0 +1,16 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.87273 21.5569C4.61902 21.9559 4.32905 22.4274 4.11158 22.7901C3.89411 23.1528 4.00285 23.6243 4.3653 23.8419L9.33088 26.8884C9.69333 27.106 10.1645 26.9972 10.382 26.6345C10.5632 26.3081 10.8169 25.8729 11.1069 25.4014C13.0641 22.1735 15.0576 22.5362 18.6096 24.2408L23.539 26.562C23.9377 26.7434 24.3726 26.562 24.5538 26.1993L26.9098 20.8678C27.091 20.5052 26.9098 20.0337 26.5473 19.8523C25.4962 19.3808 23.4302 18.4016 21.618 17.4949C14.9126 14.267 9.22215 14.4846 4.87273 21.5569Z" fill="url(#paint0_linear)"/>
+<path d="M27.1274 9.44314C27.3812 9.04419 27.6711 8.57269 27.8886 8.21001C28.1061 7.84732 27.9973 7.37583 27.6349 7.15822L22.6693 4.11165C22.3068 3.89404 21.8356 4.00285 21.6182 4.36553C21.437 4.69195 21.1832 5.12718 20.8933 5.59867C18.936 8.82657 16.9426 8.46389 13.3905 6.75926L8.46118 4.43807C8.06248 4.25673 7.62754 4.43807 7.44632 4.80076L5.09038 10.1322C4.90916 10.4949 5.09038 10.9664 5.45283 11.1478C6.50394 11.6193 8.56992 12.5985 10.3822 13.5052C17.0875 16.6969 22.778 16.5155 27.1274 9.44314Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="26.7906" y1="28.4674" x2="11.7924" y2="19.8546" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0052CC"/>
+<stop offset="0.9182" stop-color="#2380FB"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="5.20945" y1="2.52323" x2="20.2079" y2="11.1361" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0052CC"/>
+<stop offset="0.9182" stop-color="#2380FB"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+</defs>
+</svg>

web/public/Jira.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.0055 4H15.4512C15.4512 6.88 17.7826 9.21143 20.6626 9.21143H22.7883V11.2686C22.7883 14.1486 25.1197 16.48 27.9997 16.48V4.99429C27.9997 4.44571 27.554 4 27.0055 4Z" fill="#2684FF"/>
+<path d="M21.2799 9.76001H9.72559C9.72559 12.64 12.057 14.9714 14.937 14.9714H17.0627V17.0286C17.0627 19.9086 19.3942 22.24 22.2742 22.24V10.7543C22.2742 10.2057 21.8284 9.76001 21.2799 9.76001Z" fill="url(#paint0_linear)"/>
+<path d="M15.5543 15.52H4C4 18.4 6.33143 20.7314 9.21143 20.7314H11.3371V22.7886C11.3371 25.6686 13.6686 28 16.5486 28V16.5143C16.5486 15.9657 16.1029 15.52 15.5543 15.52Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="22.0343" y1="9.77256" x2="17.1181" y2="14.8424" gradientUnits="userSpaceOnUse">
+<stop offset="0.176" stop-color="#0052CC"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="16.6411" y1="15.5637" x2="10.9568" y2="21.0943" gradientUnits="userSpaceOnUse">
+<stop offset="0.176" stop-color="#0052CC"/>
+<stop offset="1" stop-color="#2684FF"/>
+</linearGradient>
+</defs>
+</svg>

web/src/app/admin/connectors/bookstack/page.tsx

@@ -237,7 +237,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <BookstackIcon size="32" />
+        <BookstackIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">BookStack</h1>
       </div>
       <Main />

web/src/app/admin/connectors/confluence/page.tsx

@@ -271,7 +271,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <ConfluenceIcon size="32" />
+        <ConfluenceIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Confluence</h1>
       </div>
       <Main />

web/src/app/admin/connectors/file/page.tsx

@@ -75,7 +75,7 @@ export default function File() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
-        <FileIcon size="32" />
+        <FileIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">File</h1>
       </div>
       {popup && <Popup message={popup.message} type={popup.type} />}

web/src/app/admin/connectors/github/page.tsx

@@ -220,7 +220,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <GithubIcon size="32" />
+        <GithubIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Github PRs</h1>
       </div>
       <Main />

web/src/app/admin/connectors/google-drive/page.tsx

@@ -497,7 +497,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <GoogleDriveIcon size="32" />
+        <GoogleDriveIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Google Drive</h1>
       </div>
 

web/src/app/admin/connectors/jira/page.tsx

@@ -264,7 +264,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <JiraIcon size="32" />
+        <JiraIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Jira</h1>
       </div>
       <Main />

web/src/app/admin/connectors/notion/page.tsx

@@ -220,7 +220,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <NotionIcon size="32" />
+        <NotionIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Notion</h1>
       </div>
       <Main />

web/src/app/admin/connectors/productboard/page.tsx

@@ -230,7 +230,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <ProductboardIcon size="32" />
+        <ProductboardIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Productboard</h1>
       </div>
       <Main />

web/src/app/admin/connectors/slab/page.tsx

@@ -255,7 +255,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <SlabIcon size="32" />
+        <SlabIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Slab</h1>
       </div>
       <Main />

web/src/app/admin/connectors/slack/page.tsx

@@ -206,7 +206,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <SlackIcon size="32" />
+        <SlackIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Slack</h1>
       </div>
       <MainSection />

web/src/app/admin/connectors/web/page.tsx

@@ -37,7 +37,7 @@ export default function Web() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
-        <GlobeIcon size="32" />
+        <GlobeIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Web</h1>
       </div>
       <h2 className="font-bold mb-2 mt-6 ml-auto mr-auto">

web/src/app/admin/indexing/status/page.tsx

@@ -106,7 +106,7 @@ function Main() {
         if (connectorIndexingStatus.connector.disabled) {
           statusDisplay = (
             <div className="text-red-600 flex">
-              <XSquareIcon className="my-auto mr-1" size="18" />
+              <XSquareIcon className="my-auto mr-1" size={18} />
               Disabled
             </div>
           );
@@ -135,7 +135,7 @@ function Main() {
               className="text-blue-500 flex"
               href={sourceMetadata.adminPageLink}
             >
-              {sourceMetadata.icon({ size: "20" })}
+              {sourceMetadata.icon({ size: 20 })}
               <div className="ml-1">
                 {getSourceDisplay(connectorIndexingStatus)}
               </div>
@@ -184,7 +184,7 @@ export default function Status() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
-        <NotebookIcon size="32" />
+        <NotebookIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Indexing Status</h1>
       </div>
       <Main />

web/src/app/admin/keys/openai/page.tsx

@@ -50,7 +50,7 @@ const Page = () => {
   return (
     <div>
       <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
-        <KeyIcon size="32" />
+        <KeyIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">OpenAI Keys</h1>
       </div>
 

web/src/app/admin/layout.tsx

@@ -48,7 +48,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <NotebookIcon size="18" />
+                      <NotebookIcon size={18} />
                       <div className="ml-1">Status</div>
                     </div>
                   ),
@@ -62,7 +62,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <SlackIcon size="16" />
+                      <SlackIcon size={16} />
                       <div className="ml-1">Slack</div>
                     </div>
                   ),
@@ -71,7 +71,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <GithubIcon size="16" />
+                      <GithubIcon size={16} />
                       <div className="ml-1">Github</div>
                     </div>
                   ),
@@ -80,7 +80,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <GoogleDriveIcon size="16" />
+                      <GoogleDriveIcon size={16} />
                       <div className="ml-1">Google Drive</div>
                     </div>
                   ),
@@ -89,16 +89,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <BookstackIcon size="16" />
-                      <div className="ml-1">BookStack</div>
-                    </div>
-                  ),
-                  link: "/admin/connectors/bookstack",
-                },
-                {
-                  name: (
-                    <div className="flex">
-                      <ConfluenceIcon size="16" />
+                      <ConfluenceIcon size={16} />
                       <div className="ml-1">Confluence</div>
                     </div>
                   ),
@@ -107,7 +98,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <JiraIcon size="16" />
+                      <JiraIcon size={16} />
                       <div className="ml-1">Jira</div>
                     </div>
                   ),
@@ -116,7 +107,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <ProductboardIcon size="16" />
+                      <ProductboardIcon size={16} />
                       <div className="ml-1">Productboard</div>
                     </div>
                   ),
@@ -125,7 +116,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <SlabIcon size="16" />
+                      <SlabIcon size={16} />
                       <div className="ml-1">Slab</div>
                     </div>
                   ),
@@ -134,7 +125,25 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <GlobeIcon size="16" />
+                      <NotionIcon size={16} />
+                      <div className="ml-1">Notion</div>
+                    </div>
+                  ),
+                  link: "/admin/connectors/notion",
+                },
+                {
+                  name: (
+                    <div className="flex">
+                      <BookstackIcon size={16} />
+                      <div className="ml-1">BookStack</div>
+                    </div>
+                  ),
+                  link: "/admin/connectors/bookstack",
+                },
+                {
+                  name: (
+                    <div className="flex">
+                      <GlobeIcon size={16} />
                       <div className="ml-1">Web</div>
                     </div>
                   ),
@@ -143,21 +152,12 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <FileIcon size="16" />
+                      <FileIcon size={16} />
                       <div className="ml-1">File</div>
                     </div>
                   ),
                   link: "/admin/connectors/file",
                 },
-                {
-                  name: (
-                    <div className="flex">
-                      <NotionIcon size="16" />
-                      <div className="ml-1">Notion</div>
-                    </div>
-                  ),
-                  link: "/admin/connectors/notion",
-                },
               ],
             },
             {
@@ -166,7 +166,7 @@ export default async function AdminLayout({
                 {
                   name: (
                     <div className="flex">
-                      <KeyIcon size="18" />
+                      <KeyIcon size={18} />
                       <div className="ml-1">OpenAI</div>
                     </div>
                   ),

web/src/app/user/connectors/GoogleDriveCard.tsx

@@ -31,7 +31,7 @@ export const GoogleDriveCard = ({
   return (
     <div className="border rounded border-gray-700 p-3 w-80">
       <div className="flex items-center">
-        <GoogleDriveIcon size="20" />{" "}
+        <GoogleDriveIcon size={20} />{" "}
         <b className="ml-2 text-xl">Google Drive</b>
       </div>
 

web/src/app/user/connectors/page.tsx

@@ -126,7 +126,7 @@ export default function Page() {
         <HealthCheckBanner />
       </div>
       <div className="border-solid border-gray-600 border-b mb-4 pb-2 flex">
-        <PlugIcon size="32" />
+        <PlugIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Personal Connectors</h1>
       </div>
 

web/src/app/user/layout.tsx

@@ -1,14 +1,4 @@
 import { Header } from "@/components/Header";
-import { Sidebar } from "@/components/admin/connectors/Sidebar";
-import {
-  NotebookIcon,
-  GithubIcon,
-  GlobeIcon,
-  GoogleDriveIcon,
-  SlackIcon,
-  KeyIcon,
-  ConfluenceIcon,
-} from "@/components/icons/icons";
 import { DISABLE_AUTH } from "@/lib/constants";
 import { getCurrentUserSS } from "@/lib/userSS";
 import { redirect } from "next/navigation";

web/src/components/icons/icons.tsx

@@ -11,132 +11,102 @@ import {
   Plug,
   Brain,
 } from "@phosphor-icons/react";
-import {
-  SiBookstack,
-  SiConfluence,
-  SiGithub,
-  SiGoogledrive,
-  SiJira,
-  SiNotion,
-  SiSlack,
-} from "react-icons/si";
+import { SiBookstack } from "react-icons/si";
 import { FaFile, FaGlobe } from "react-icons/fa";
 import Image from "next/image";
+import jiraSVG from "../../../public/Jira.svg";
+import confluenceSVG from "../../../public/Confluence.svg";
 
 interface IconProps {
-  size?: string;
+  size?: number;
   className?: string;
 }
 
-const defaultTailwindCSS = "text-blue-400 my-auto flex flex-shrink-0";
+const defaultTailwindCSS = "my-auto flex flex-shrink-0 text-blue-400";
 
 export const PlugIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <Plug size={size} className={className} />;
 };
 
 export const NotebookIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <Notebook size={size} className={className} />;
 };
 
 export const KeyIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <Key size={size} className={className} />;
 };
 
 export const TrashIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <Trash size={size} className={className} />;
 };
 
 export const LinkBreakIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <LinkBreak size={size} className={className} />;
 };
 
 export const LinkIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <Link size={size} className={className} />;
 };
 
 export const XSquareIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <XSquare size={size} className={className} />;
 };
 
 export const GlobeIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <FaGlobe size={size} className={className} />;
 };
 
 export const FileIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <FaFile size={size} className={className} />;
 };
 
+export const InfoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <Info size={size} className={className} />;
+};
+
+export const BrainIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <Brain size={size} className={className} />;
+};
+
+//
+//  COMPANY LOGOS
+//
+
 export const SlackIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiSlack size={size} className={className} />;
-};
-
-export const GithubIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiGithub size={size} className={className} />;
-};
-
-export const GoogleDriveIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiGoogledrive size={size} className={className} />;
-};
-
-export const BookstackIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiBookstack size={size} className={className} />;
-};
-
-export const ConfluenceIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiConfluence size={size} className={className} />;
-};
-
-export const JiraIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <SiJira size={size} className={className} />;
-};
-
-export const ProductboardIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return (
@@ -144,47 +114,110 @@ export const ProductboardIcon = ({
       style={{ width: `${size}px`, height: `${size}px` }}
       className={`w-[${size}px] h-[${size}px] ` + className}
     >
-      <svg viewBox="0 0 162 108">
-        <path
-          fill="#60A5FA"
-          d="M108.001 0L162 54l-54.001 54-53.996-54L108 0z"
-        ></path>
-        <path fill="#60A5FA" d="M107.997 0L53.999 54 0 0h107.997z"></path>
-        <path fill="#60A5FA" d="M53.999 54l53.998 54H0l53.999-54z"></path>
-      </svg>
+      <Image src="/Slack.png" alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+
+export const GithubIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <div
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <Image src="/Github.png" alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+
+export const GoogleDriveIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <div
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <Image src="/GoogleDrive.png" alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+
+export const BookstackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <SiBookstack size={size} className={className + " text-[#0288D1]"} />;
+};
+
+export const ConfluenceIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <div
+      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
+      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
+    >
+      <Image src={confluenceSVG} alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+
+export const JiraIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  // Jira Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
+  return (
+    <div
+      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
+      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
+    >
+      <Image src={jiraSVG} alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+export const ProductboardIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <div
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <Image src="/Productboard.webp" alt="Logo" width="96" height="96" />
     </div>
   );
 };
 
 export const SlabIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => (
   <div
     style={{ width: `${size}px`, height: `${size}px` }}
     className={`w-[${size}px] h-[${size}px] ` + className}
   >
-    <Image src="/SlabLogoBlue.png" alt="Logo" width="96" height="96" />
+    <Image src="/SlabLogo.png" alt="Logo" width="96" height="96" />
   </div>
 );
 
-export const InfoIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <Info size={size} className={className} />;
-};
-
-export const BrainIcon = ({
-  size = "16",
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <Brain size={size} className={className} />;
-};
-
 export const NotionIcon = ({
-  size = "16",
+  size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <SiNotion size={size} className={className} />;
+  return (
+    <div
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <Image src="/Notion.png" alt="Logo" width="96" height="96" />
+    </div>
+  );
 };

web/src/components/search/Filters.tsx

@@ -60,7 +60,7 @@ export function SourceSelector({
               }
               onClick={() => handleSelect(source)}
             >
-              {getSourceIcon(source.internalName, "16")}
+              {getSourceIcon(source.internalName, 16)}
               <span className="ml-2 text-sm text-gray-200">
                 {source.displayName}
               </span>

web/src/components/search/SearchHelper.tsx

@@ -130,7 +130,7 @@ export const SearchHelper: React.FC<Props> = (props) => {
   return (
     <div className="border border-gray-800 rounded p-3 text-sm">
       <div className="flex">
-        <BrainIcon size="20" />
+        <BrainIcon size={20} />
         <b className="ml-2">AI Assistant</b>
       </div>
 

web/src/components/search/SearchResultsDisplay.tsx

@@ -98,7 +98,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          {getSourceIcon(quoteInfo.source_type, "20")}
+                          {getSourceIcon(quoteInfo.source_type, 20)}
                           <p className="truncate break-all ml-2">
                             {quoteInfo.semantic_identifier ||
                               quoteInfo.document_id}
@@ -108,7 +108,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
                     ) : (
                       <div className="flex">
                         <InfoIcon
-                          size="20"
+                          size={20}
                           className="text-red-500 my-auto flex flex-shrink-0"
                         />
                         <div className="text-red-500 text-sm my-auto ml-1">
@@ -130,7 +130,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
         shouldDisplayQA && (
           <div className="flex">
             <InfoIcon
-              size="20"
+              size={20}
               className="text-red-500 my-auto flex flex-shrink-0"
             />
             <div className="text-red-500 text-xs my-auto ml-1">
@@ -158,7 +158,7 @@ export const SearchResultsDisplay: React.FC<SearchResultsDisplayProps> = ({
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {getSourceIcon(doc.source_type, "20")}
+                {getSourceIcon(doc.source_type, 20)}
                 <p className="truncate break-all ml-2">
                   {doc.semantic_identifier || doc.document_id}
                 </p>

web/src/components/source.tsx

@@ -14,7 +14,7 @@ import {
 } from "./icons/icons";
 
 interface SourceMetadata {
-  icon: React.FC<{ size?: string; className?: string }>;
+  icon: React.FC<{ size?: number; className?: string }>;
   displayName: string;
   adminPageLink: string;
 }
@@ -92,7 +92,7 @@ export const getSourceMetadata = (sourceType: ValidSources): SourceMetadata => {
   }
 };
 
-export const getSourceIcon = (sourceType: ValidSources, iconSize: string) => {
+export const getSourceIcon = (sourceType: ValidSources, iconSize: number) => {
   return getSourceMetadata(sourceType).icon({
     size: iconSize,
   });