feat: switch to lucide icons

web/package.json

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/themes": "^3.1.6",
     "ai": "^5.0.6",
+    "lucide-react": "^0.539.0",
     "next": "15.4.6",
     "next-themes": "^0.4.4",
     "react": "^19.0.0",

web/src/ui/chat/chat.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import { UIDataTypes, UIMessage, UIMessagePart, UITools } from 'ai'
-import { useChat } from '@ai-sdk/react'
+import { UIMessage } from 'ai'
 import { useState } from 'react'
 
 import InputBox from './input-box'
-import { Box, Button, Flex } from '@radix-ui/themes'
-import { ArrowUpIcon } from '@radix-ui/react-icons'
+import { Button, Flex } from '@radix-ui/themes'
+import { ArrowUp } from 'lucide-react'
 import { MessageBubble } from './message-bubble'
 
 export function Chat() {
@@ -68,7 +67,7 @@ export function Chat() {
             bottom: '3rem',
           }}
         >
-          <ArrowUpIcon />
+          <ArrowUp />
         </Button>
       </form>
     </Flex>

web/src/ui/chat/input-box.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Flex, TextArea } from '@radix-ui/themes'
+import { Box, TextArea } from '@radix-ui/themes'
 
 const ChatThreadSelector = ({
   input,

web/src/ui/homepage/header.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { useTheme } from 'next-themes'
-import { HomeIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { Home, Moon, Sun } from 'lucide-react'
 import Link from 'next/link'
 
 export const Header = () => {
@@ -12,7 +12,7 @@ export const Header = () => {
     <div className="flex w-full flex-row justify-between p-5">
       <Link href="/" aria-label="Home page">
         <button className="rounded-full p-2 text-[var(--blue-12)] hover:bg-[var(--blue-4)]">
-          <HomeIcon />
+          <Home />
         </button>
       </Link>
       <button
@@ -26,16 +26,8 @@ export const Header = () => {
           setTheme(newThemeMatchesSystem ? 'system' : newTheme)
         }}
       >
-        <SunIcon
-          width="16"
-          height="16"
-          style={{ display: 'var(--theme-toggle-sun-icon-display)' }}
-        />
-        <MoonIcon
-          width="16"
-          height="16"
-          style={{ display: 'var(--theme-toggle-moon-icon-display)' }}
-        />
+        <Sun size={16} style={{ display: 'var(--theme-toggle-sun-icon-display)' }} />
+        <Moon size={16} style={{ display: 'var(--theme-toggle-moon-icon-display)' }} />
       </button>
     </div>
   )

web/src/ui/homepage/links.tsx

@@ -1,4 +1,4 @@
-import { ChatBubbleIcon, FileTextIcon, PersonIcon } from '@radix-ui/react-icons'
+import { MessageCircle, FileText, Person } from 'lucide-react'
 import Link from 'next/link'
 import { Button } from '@components/ui/common/button'
 
@@ -9,7 +9,7 @@ export default function Links() {
         {/* <Button>Search</Button> */}
         <Link href="/resume">
           <Button aria-label="View Resume">
-            <PersonIcon />
+            <Person />
             <span className="font-bold">About Me</span>
           </Button>
         </Link>
@@ -20,13 +20,13 @@ export default function Links() {
           target="_blank"
         >
           <Button aria-label="Download Resume">
-            <FileTextIcon />
+            <FileText />
             <span className="font-bold">Resume</span>
           </Button>
         </Link>
         <Link href="/chat" rel="noopener noreferrer">
           <Button aria-label="Chat with me">
-            <ChatBubbleIcon />
+            <MessageCircle />
             <span className="font-bold">Chat with me</span>
           </Button>
         </Link>

web/src/ui/homepage/search.tsx

@@ -1,12 +1,12 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { Search } from 'lucide-react'
 import { Box, TextField } from '@radix-ui/themes'
 
 export default function Search() {
   return (
     <Box mt="4">
       <TextField.Root placeholder="Ask about me…" size="3">
         <TextField.Slot>
-          <MagnifyingGlassIcon height="16" width="16" />
+          <Search size={16} />
         </TextField.Slot>
       </TextField.Root>
     </Box>

web/src/ui/homepage/social.tsx

@@ -1,8 +1,4 @@
-import {
-  EnvelopeOpenIcon,
-  GitHubLogoIcon,
-  LinkedInLogoIcon,
-} from '@radix-ui/react-icons'
+import { Mail, Github, Linkedin } from 'lucide-react'
 import Link from 'next/link'
 import type { ComponentType, SVGProps } from 'react'
 
@@ -15,19 +11,19 @@ const socialData: {
   {
     id: 'github',
     name: 'Github',
-    icon: GitHubLogoIcon,
+    icon: Github,
     url: 'https://github.com/utmishra',
   },
   {
     id: 'linkedin',
     name: 'LinkedIn',
-    icon: LinkedInLogoIcon,
+    icon: Linkedin,
     url: 'https://www.linkedin.com/in/utmishra/',
   },
   {
     id: 'email',
     name: 'Email',
-    icon: EnvelopeOpenIcon,
+    icon: Mail,
     url: 'mailto:utmishra@gmail.com',
   },
 ]