diff --git a/src/app.tsx b/src/app.tsx
index fd1bcda..696842e 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -17,13 +17,13 @@ import { ToolInvocationCard } from "@/components/tool-invocation-card/ToolInvoca
 
 // Icon imports
 import {
-  Bug,
-  Moon,
-  Robot,
-  Sun,
-  Trash,
-  PaperPlaneTilt,
-  Stop
+  BugIcon,
+  MoonIcon,
+  RobotIcon,
+  SunIcon,
+  TrashIcon,
+  PaperPlaneTiltIcon,
+  StopIcon
 } from "@phosphor-icons/react";
 
 // List of tools that require human confirmation
@@ -163,7 +163,7 @@ export default function Chat() {
           </div>
 
           <div className="flex items-center gap-2 mr-2">
-            <Bug size={16} />
+            <BugIcon size={16} />
             <Toggle
               toggled={showDebug}
               aria-label="Toggle debug mode"
@@ -178,7 +178,7 @@ export default function Chat() {
             className="rounded-full h-9 w-9"
             onClick={toggleTheme}
           >
-            {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+            {theme === "dark" ? <SunIcon size={20} /> : <MoonIcon size={20} />}
           </Button>
 
           <Button
@@ -188,7 +188,7 @@ export default function Chat() {
             className="rounded-full h-9 w-9"
             onClick={clearHistory}
           >
-            <Trash size={20} />
+            <TrashIcon size={20} />
           </Button>
         </div>
 
@@ -199,7 +199,7 @@ export default function Chat() {
               <Card className="p-6 max-w-md mx-auto bg-neutral-100 dark:bg-neutral-900">
                 <div className="text-center space-y-4">
                   <div className="bg-[#F48120]/10 text-[#F48120] rounded-full p-3 inline-flex">
-                    <Robot size={24} />
+                    <RobotIcon size={24} />
                   </div>
                   <h3 className="font-semibold text-lg">Welcome to AI Chat</h3>
                   <p className="text-muted-foreground text-sm">
@@ -392,7 +392,7 @@ export default function Chat() {
                     className="inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 rounded-full p-1.5 h-fit border border-neutral-200 dark:border-neutral-800"
                     aria-label="Stop generation"
                   >
-                    <Stop size={16} />
+                    <StopIcon size={16} />
                   </button>
                 ) : (
                   <button
@@ -401,7 +401,7 @@ export default function Chat() {
                     disabled={pendingToolCallConfirmation || !agentInput.trim()}
                     aria-label="Send message"
                   >
-                    <PaperPlaneTilt size={16} />
+                    <PaperPlaneTiltIcon size={16} />
                   </button>
                 )}
               </div>
diff --git a/src/components/button/RefreshButton.tsx b/src/components/button/RefreshButton.tsx
index 9e9e78f..8d84f64 100644
--- a/src/components/button/RefreshButton.tsx
+++ b/src/components/button/RefreshButton.tsx
@@ -1,11 +1,11 @@
 import { Button } from "@/components/button/Button";
 import type { ButtonProps } from "@/components/button/Button";
 import { cn } from "@/lib/utils";
-import { ArrowsClockwise } from "@phosphor-icons/react";
+import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 
 export const RefreshButton = ({ ...props }: ButtonProps) => (
   <Button shape="square" toggled={props.toggled} {...props}>
-    <ArrowsClockwise
+    <ArrowsClockwiseIcon
       className={cn({
         "animate-refresh": props.toggled,
         "size-4.5": props.size === "base",
diff --git a/src/components/dropdown/DropdownMenu.tsx b/src/components/dropdown/DropdownMenu.tsx
index f280e7b..ff1f847 100644
--- a/src/components/dropdown/DropdownMenu.tsx
+++ b/src/components/dropdown/DropdownMenu.tsx
@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: todo */
-import { DotsThree, IconContext } from "@phosphor-icons/react";
+import { DotsThreeIcon, IconContext } from "@phosphor-icons/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 import { cn } from "@/lib/utils";
@@ -96,7 +96,7 @@ const DropdownMenu = ({
       )}
       disabled={disabled}
     >
-      {children ?? <DotsThree weight="bold" />}
+      {children ?? <DotsThreeIcon weight="bold" />}
     </DropdownMenuPrimitive.Trigger>
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index b815608..92941f8 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@/components/button/Button";
 import { Card } from "@/components/card/Card";
 import useClickOutside from "@/hooks/useClickOutside";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 
 import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
@@ -100,7 +100,7 @@ export const Modal = ({
           onClick={onClose}
           variant="ghost"
         >
-          <X size={16} />
+          <XIcon size={16} />
         </Button>
       </Card>
     </div>
diff --git a/src/components/orbit-site/ThemeSelector.tsx b/src/components/orbit-site/ThemeSelector.tsx
index e48ad79..e2efa2f 100644
--- a/src/components/orbit-site/ThemeSelector.tsx
+++ b/src/components/orbit-site/ThemeSelector.tsx
@@ -1,6 +1,6 @@
 import useTheme from "@/hooks/useTheme";
 import { cn } from "@/lib/utils";
-import { Moon, Sun } from "@phosphor-icons/react";
+import { MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 
 const ThemeSelector = () => {
@@ -18,13 +18,13 @@ const ThemeSelector = () => {
       className="flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-neutral-200/60 dark:hover:bg-neutral-900"
       onClick={() => toggleTheme()}
     >
-      <Moon
+      <MoonIcon
         weight="bold"
         className={cn("hidden", {
           "animate-fade block": theme === "dark"
         })}
       />
-      <Sun
+      <SunIcon
         weight="bold"
         className={cn("animate-fade block", {
           hidden: theme === "dark"
diff --git a/src/components/tool-invocation-card/ToolInvocationCard.tsx b/src/components/tool-invocation-card/ToolInvocationCard.tsx
index 4ef0e75..9bc1604 100644
--- a/src/components/tool-invocation-card/ToolInvocationCard.tsx
+++ b/src/components/tool-invocation-card/ToolInvocationCard.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ToolUIPart } from "ai";
-import { Robot, CaretDown } from "@phosphor-icons/react";
+import { RobotIcon, CaretDownIcon } from "@phosphor-icons/react";
 import { Button } from "@/components/button/Button";
 import { Card } from "@/components/card/Card";
 import { APPROVAL } from "@/shared";
@@ -53,7 +53,7 @@ export function ToolInvocationCard({
         <div
           className={`${needsConfirmation ? "bg-[#F48120]/10" : "bg-[#F48120]/5"} p-1.5 rounded-full flex-shrink-0`}
         >
-          <Robot size={16} className="text-[#F48120]" />
+          <RobotIcon size={16} className="text-[#F48120]" />
         </div>
         <h4 className="font-medium flex items-center gap-2 flex-1 text-left">
           {toolUIPart.type}
@@ -61,7 +61,7 @@ export function ToolInvocationCard({
             <span className="text-xs text-[#F48120]/70">✓ Completed</span>
           )}
         </h4>
-        <CaretDown
+        <CaretDownIcon
           size={16}
           className={`text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`}
         />