diff --git a/components/ChatView/MessageTextarea.tsx b/components/ChatView/MessageTextarea.tsx
index b3eefb5..43ae9f6 100644
--- a/components/ChatView/MessageTextarea.tsx
+++ b/components/ChatView/MessageTextarea.tsx
@@ -66,7 +66,7 @@ const MessageTextarea = () => {
         onChange={handleChange}
       />
       <div className="absolute bottom-2 right-2 w-8 p-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100" onClick={handleSend}>
-        <Icon.Send className="w-full h-auto text-blue-800" />
+        <Icon.Io.IoMdSend className="w-full h-auto text-blue-800" />
       </div>
     </div>
   );
diff --git a/components/ChatView/Sidebar.tsx b/components/ChatView/Sidebar.tsx
index 2564c15..754bc23 100644
--- a/components/ChatView/Sidebar.tsx
+++ b/components/ChatView/Sidebar.tsx
@@ -26,7 +26,7 @@ const Sidebar = () => {
   return (
     <div className="w-52 lg:w-64 h-full transition-all shrink-0 border-r px-3 flex flex-col justify-start items-center sticky top-0">
       <h2 className="py-4 w-full flex flex-row justify-center items-center">
-        <Icon.Bot className="text-gray-600 mr-2 w-6 h-auto" /> Assistant list
+        <Icon.Io.IoIosChatbubbles className="text-gray-600 mr-2 w-6 h-auto" /> Assistant list
       </h2>
       <div className="w-full mt-2 flex flex-col justify-start items-start">
         {userStore.assistantList.map((assistant) => (
@@ -44,10 +44,10 @@ const Sidebar = () => {
       <div className="grow w-full flex flex-col justify-end items-center pb-6">
         <div className="w-full flex flex-row justify-center items-center space-x-3">
           <Link href="/" className="p-1 rounded-md hover:shadow hover:bg-gray-100">
-            <Icon.Home className="text-gray-600 w-6 h-auto" />
+            <Icon.Io.IoMdHome className="text-gray-600 w-6 h-auto" />
           </Link>
           <a href="https://github.com/bytebase/chatdba" target="_blank" className="p-1 rounded-md hover:shadow hover:bg-gray-100">
-            <Icon.Github className="text-gray-600 w-6 h-auto" />
+            <Icon.Io.IoLogoGithub className="text-gray-600 w-6 h-auto" />
           </a>
         </div>
       </div>
diff --git a/components/Icon.tsx b/components/Icon.tsx
index 56882fe..bee5627 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -1,3 +1,11 @@
-import * as Icon from "lucide-react";
+import * as Hi from "react-icons/hi";
+import * as Io from "react-icons/io";
 
+const Icon = {
+  Hi,
+  Io,
+};
+
+// Icon is a collection of all icons from react-icons.
+// See https://react-icons.github.io/react-icons/ for more details.
 export default Icon;
diff --git a/package.json b/package.json
index ca0ec99..9051588 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,13 @@
     "axios": "^1.3.4",
     "csstype": "^3.1.1",
     "highlight.js": "^11.7.0",
-    "lucide-react": "^0.125.0",
     "marked": "^4.2.12",
     "next": "^13.2.4",
     "openai": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
+    "react-icons": "^4.8.0",
     "react-textarea-autosize": "^8.4.0",
     "uuid": "^9.0.0",
     "zustand": "^4.3.6"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6af096..8db60d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,6 @@ specifiers:
   eslint: 8.20.0
   eslint-config-next: 12.2.3
   highlight.js: ^11.7.0
-  lucide-react: ^0.125.0
   marked: ^4.2.12
   next: ^13.2.4
   openai: ^3.0.0
@@ -20,6 +19,7 @@ specifiers:
   react: ^18.2.0
   react-dom: ^18.2.0
   react-hot-toast: ^2.4.0
+  react-icons: ^4.8.0
   react-textarea-autosize: ^8.4.0
   tailwindcss: ^3.2.4
   typescript: ^4.9.4
@@ -31,13 +31,13 @@ dependencies:
   axios: 1.3.4
   csstype: 3.1.1
   highlight.js: 11.7.0
-  lucide-react: 0.125.0_react@18.2.0
   marked: 4.2.12
   next: 13.2.4_biqbaboplfbrettd7655fr4n2y
   openai: 3.2.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-hot-toast: 2.4.0_owo25xnefcwdq3zjgtohz6dbju
+  react-icons: 4.8.0_react@18.2.0
   react-textarea-autosize: 8.4.0_pmekkgnqduwlme35zpnqhenc34
   uuid: 9.0.0
   zustand: 4.3.6_react@18.2.0
@@ -1664,14 +1664,6 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lucide-react/0.125.0_react@18.2.0:
-    resolution: {integrity: sha512-tadphtB6TPytEitR9vX75hqu9PQT/uz5RcvXMq976nC190eukAM9+cHMgBxfvfEGDXwIhIT9aFxTUGdAjxw9uQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /marked/4.2.12:
     resolution: {integrity: sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==}
     engines: {node: '>= 12'}
@@ -2062,6 +2054,14 @@ packages:
       - csstype
     dev: false
 
+  /react-icons/4.8.0_react@18.2.0:
+    resolution: {integrity: sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true