Unify nav bar icons (lucide) and fix sidebar alignment (#2513)

* Icons-audit * fix: linting --------- Co-authored-by: Alex <a@tushynski.me>
2026-10-13 04:14:42 +00:00 · 2026-05-30 16:29:50 +01:00
1 parent 94bc4d1eb6
commit be31deb4b1
@@ -99,12 +99,16 @@ function HeroModelSelect() {
      <SelectContent className="bg-muted dark:bg-card rounded-t-none rounded-b-4xl border-0 shadow-md data-[side=bottom]:translate-y-0">
        {hasModels ? (
          availableModels?.map((model: Model) => (
-            <SelectItem key={model.id} value={model.id}>
+            <SelectItem
+              key={model.id}
+              value={model.id}
+              className="px-5 py-3 text-base [&_[data-slot=select-item-indicator]]:right-5"
+            >
              {model.display_name}
            </SelectItem>
          ))
        ) : (
-          <div className="text-muted-foreground px-3 py-2 text-sm">
+          <div className="text-muted-foreground px-5 py-3 text-base">
            No models available
          </div>
        )}
@@ -2,24 +2,25 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useNavigate } from 'react-router-dom';
+import {
+  LayoutGrid,
+  Menu,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Plus,
+  Search as SearchIcon,
+  Settings as SettingsIcon,
+} from 'lucide-react';

 import { Agent } from './agents/types';
 import conversationService from './api/services/conversationService';
 import userService from './api/services/userService';
-import Add from './assets/add.svg';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Discord from './assets/discord.svg';
-import PanelLeftClose from './assets/panel-left-close.svg';
-import PanelLeftOpen from './assets/panel-left-open.svg';
 import Github from './assets/git_nav.svg';
-import Hamburger from './assets/hamburger.svg';
-import openNewChat from './assets/openNewChat.svg';
 import Pin from './assets/pin.svg';
-import SearchIcon from './assets/search.svg';
 import { Avatar } from './components/ui/avatar';
 import { Button } from './components/ui/button';
-import SettingGear from './assets/settingGear.svg';
-import Spark from './assets/spark.svg';
 import Spinner from './components/Spinner';
 import Twitter from './assets/TwitterX.svg';
 import UnPin from './assets/unpin.svg';
@@ -324,12 +325,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
            size="icon"
            onClick={() => setNavOpen(true)}
            aria-label="Open navigation menu"
+            className="text-muted-foreground hover:text-foreground"
          >
-            <img
-              src={PanelLeftOpen}
-              alt=""
-              className="transition-all duration-300 ease-in-out"
-            />
+            <PanelLeftOpen className="size-5" strokeWidth={1.75} />
          </Button>
          {queries?.length > 0 && (
            <Button
@@ -338,37 +336,38 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
              size="icon"
              onClick={() => newChat()}
              aria-label="Start new chat"
+              className="text-muted-foreground hover:text-foreground"
            >
-              <img src={openNewChat} alt="" />
+              <Plus className="size-5" strokeWidth={1.75} />
            </Button>
          )}
          <Button
            type="button"
            variant="ghost"
            size="icon"
-            onClick={() => setSearchOpen(true)}
-            aria-label={t('modals.searchConversations.searchPlaceholder')}
-            title={t('modals.searchConversations.searchPlaceholder')}
+            onClick={() => {
+              dispatch(setSelectedAgent(null));
+              navigate('/agents');
+            }}
+            aria-label={t('manageAgents')}
+            className="text-muted-foreground hover:text-foreground"
          >
-            <img
-              src={SearchIcon}
-              alt=""
-              className="h-5 w-5 filter dark:invert"
-            />
+            <LayoutGrid className="size-5" strokeWidth={1.75} />
          </Button>
-          <div className="mt-auto flex flex-col items-center gap-2">
+          {conversations?.data && conversations.data.length > 0 && (
            <Button
              type="button"
              variant="ghost"
              size="icon"
-              onClick={() => {
-                dispatch(setSelectedAgent(null));
-                navigate('/agents');
-              }}
-              aria-label={t('manageAgents')}
+              onClick={() => setSearchOpen(true)}
+              aria-label={t('modals.searchConversations.searchPlaceholder')}
+              title={t('modals.searchConversations.searchPlaceholder')}
+              className="text-muted-foreground hover:text-foreground"
            >
-              <img src={Spark} alt="" className="h-5 w-5" />
+              <SearchIcon className="size-5" strokeWidth={1.75} />
            </Button>
+          )}
+          <div className="mt-auto flex flex-col items-center gap-2">
            <Button
              type="button"
              variant="ghost"
@@ -378,12 +377,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                navigate('/settings');
              }}
              aria-label={t('settings.label')}
+              className="text-muted-foreground hover:text-foreground"
            >
-              <img
-                src={SettingGear}
-                alt=""
-                className="h-5 w-5 filter dark:invert"
-              />
+              <SettingsIcon className="size-5" strokeWidth={1.75} />
            </Button>
          </div>
        </div>
@@ -395,36 +391,46 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        } bg-sidebar dark:border-r-sidebar-border fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-300 ease-in-out dark:text-white`}
      >
        <div
-          className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
+          className={
+            'visible mt-2 flex h-[6vh] w-full items-center justify-between md:h-12'
+          }
        >
          <div
-            className="mx-4 my-auto flex cursor-pointer gap-1.5"
+            className="mx-4 flex cursor-pointer items-center gap-1.5"
            onClick={() => {
              if (isMobile) {
                setNavOpen(!navOpen);
              }
            }}
          >
-            <a href="/" className="flex gap-1.5">
-              <img className="h-10" src={DocsGPT3} alt="DocsGPT Logo" />
-              <p className="my-auto text-2xl font-semibold">DocsGPT</p>
+            <a href="/" className="flex items-center gap-1.5">
+              <img className="h-9" src={DocsGPT3} alt="DocsGPT Logo" />
+              <p className="text-foreground text-xl font-semibold dark:text-white">
+                DocsGPT
+              </p>
            </a>
          </div>
          <Button
            type="button"
            variant="ghost"
            size="icon"
-            className="float-right mr-5 h-auto w-auto p-0 hover:bg-transparent"
+            className="text-muted-foreground hover:text-foreground mr-3"
            onClick={() => {
              setNavOpen(!navOpen);
            }}
            aria-label={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
          >
-            <img
-              src={navOpen ? PanelLeftClose : PanelLeftOpen}
-              alt={navOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-              className="m-auto transition-all duration-300 ease-in-out hover:scale-110"
-            />
+            {navOpen ? (
+              <PanelLeftClose
+                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
+                strokeWidth={1.75}
+              />
+            ) : (
+              <PanelLeftOpen
+                className="size-5 transition-all duration-300 ease-in-out hover:scale-110"
+                strokeWidth={1.75}
+              />
+            )}
          </Button>
        </div>
        <NavLink
@@ -438,15 +444,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          className={({ isActive }) =>
            `${
              isActive ? 'bg-transparent' : ''
-            } group border-sidebar-border hover:border-sidebar-border sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border p-3 hover:bg-transparent dark:text-white`
+            } group border-sidebar-border hover:border-sidebar-border sticky mx-4 mt-4 flex cursor-pointer items-center gap-2.5 rounded-3xl border p-3 hover:bg-transparent dark:text-white`
          }
        >
-          <img
-            src={Add}
-            alt="Create new chat"
-            className="opacity-80 group-hover:opacity-100"
+          <Plus
+            className="text-muted-foreground group-hover:text-foreground size-5 shrink-0"
+            strokeWidth={1.75}
+            aria-label="Create new chat"
          />
-          <p className="text-muted-foreground dark:text-foreground dark:group-hover:text-foreground text-sm group-hover:text-neutral-600">
+          <p className="text-muted-foreground group-hover:text-foreground text-sm">
            {t('newChat')}
          </p>
        </NavLink>
@@ -519,69 +525,77 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                    </div>
                  ))}
                </div>
-                <div
-                  className="hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
+                <NavLink
+                  to="/agents"
+                  end
                  onClick={() => {
                    dispatch(setSelectedAgent(null));
                    if (isMobile || isTablet) {
                      setNavOpen(false);
                    }
-                    navigate('/agents');
                  }}
+                  className={({ isActive }) =>
+                    `hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 ${
+                      isActive ? 'bg-sidebar-accent' : ''
+                    }`
+                  }
                >
                  <div className="flex w-6 justify-center">
-                    <img
-                      src={Spark}
-                      alt="manage-agents"
-                      className="h-[18px] w-[18px]"
+                    <LayoutGrid
+                      className="text-muted-foreground size-5"
+                      strokeWidth={1.75}
+                      aria-label="manage-agents"
                    />
                  </div>
                  <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
                    {t('manageAgents')}
                  </p>
-                </div>
+                </NavLink>
              </div>
            </div>
          ) : (
-            <div
-              className="hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
+            <NavLink
+              to="/agents"
+              end
              onClick={() => {
                if (isMobile || isTablet) {
                  setNavOpen(false);
                }
                dispatch(setSelectedAgent(null));
-                navigate('/agents');
              }}
+              className={({ isActive }) =>
+                `hover:bg-sidebar-accent mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3 ${
+                  isActive ? 'bg-sidebar-accent' : ''
+                }`
+              }
            >
-              <div className="flex w-6 justify-center">
-                <img
-                  src={Spark}
-                  alt="manage-agents"
-                  className="h-[18px] w-[18px]"
-                />
-              </div>
+              <LayoutGrid
+                className="text-muted-foreground size-5 shrink-0"
+                strokeWidth={1.75}
+                aria-label="manage-agents"
+              />
              <p className="text-foreground dark:text-foreground overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
                {t('manageAgents')}
              </p>
-            </div>
+            </NavLink>
          )}
          {conversations?.data && conversations.data.length > 0 ? (
            <div className="mt-7">
-              <div className="mx-4 my-auto mt-2 flex h-8 items-center justify-between gap-4 rounded-3xl">
+              <div className="my-auto mt-2 ml-4 flex h-9 items-center justify-between gap-4 rounded-3xl">
                <p className="mt-1 ml-4 text-sm font-semibold">{t('chats')}</p>
                <Button
                  type="button"
                  variant="ghost"
-                  size="icon-sm"
+                  size="icon"
                  onClick={() => setSearchOpen(true)}
-                  className="hover:bg-sidebar-accent mr-2 h-7 w-7 rounded-full"
+                  className="text-muted-foreground hover:text-foreground hover:bg-sidebar-accent mr-3 rounded-full"
                  aria-label={t('modals.searchConversations.searchPlaceholder')}
                  title={t('modals.searchConversations.searchPlaceholder')}
                >
-                  <img
-                    src={SearchIcon}
-                    alt="search"
-                    className="h-4 w-4 opacity-70"
+                  <SearchIcon
+                    className="size-5"
+                    strokeWidth={1.75}
+                    aria-label="search"
                  />
                </Button>
              </div>
@@ -619,17 +633,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
              }}
              to="/settings"
              className={({ isActive }) =>
-                `hover:bg-sidebar-accent mx-4 my-auto flex h-9 cursor-pointer items-center gap-4 rounded-3xl ${
+                `hover:bg-sidebar-accent mx-4 my-auto flex h-9 cursor-pointer items-center gap-2.5 rounded-3xl pl-3 ${
                  isActive ? 'bg-sidebar-accent' : ''
                }`
              }
            >
-              <img
-                src={SettingGear}
-                alt="Settings"
-                width={21}
-                height={21}
-                className="my-auto ml-2 filter dark:invert"
+              <SettingsIcon
+                className="text-muted-foreground size-5 shrink-0"
+                strokeWidth={1.75}
+                aria-label="Settings"
              />
              <p className="text-foreground text-sm dark:text-white">
                {t('settings.label')}
@@ -686,24 +698,30 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        </div>
      </div>
      <div className="dark:border-b-sidebar-border bg-sidebar sticky z-10 h-16 w-full border-b-2 lg:hidden">
-        <div className="ml-6 flex h-full items-center gap-6">
+        <div className="relative flex h-full items-center">
          <Button
            type="button"
            variant="ghost"
-            size="icon-sm"
-            className="h-6 w-6 p-0 hover:bg-transparent lg:hidden"
+            size="icon"
+            className="text-muted-foreground hover:text-foreground ml-4 size-9 lg:hidden"
            onClick={() => setNavOpen(true)}
            aria-label="Toggle mobile menu"
          >
-            <img
-              src={Hamburger}
-              alt="Toggle mobile menu"
-              className="w-7 filter dark:invert"
-            />
+            <Menu className="size-5" strokeWidth={1.75} />
          </Button>
-          <div className="text-muted-foreground text-xl font-medium">
-            DocsGPT
-          </div>
+          <a
+            href="/"
+            className="absolute left-1/2 flex -translate-x-1/2 items-center"
+          >
+            <img
+              className="absolute right-full mr-1.5 h-9"
+              src={DocsGPT3}
+              alt="DocsGPT Logo"
+            />
+            <p className="text-foreground text-xl font-semibold dark:text-white">
+              DocsGPT
+            </p>
+          </a>
        </div>
      </div>
      <ConfirmationModal
@@ -1,10 +1,10 @@
+import { Search } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useSearchParams } from 'react-router-dom';

 import userService from '../api/services/userService';
-import Search from '../assets/search.svg';
 import Spinner from '../components/Spinner';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -178,7 +178,10 @@ export default function AgentsList() {
            labelBgClassName="bg-background"
            className="rounded-full"
            leftIcon={
-              <img src={Search} alt="" className="h-4 w-4 opacity-40" />
+              <Search
+                className="text-muted-foreground size-4"
+                strokeWidth={1.75}
+              />
            }
          />
        </div>
@@ -1,10 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2494_3464)">
-<path d="M7.43717 14.1667C7.43717 14.4485 7.54912 14.7187 7.74837 14.918C7.94763 15.1172 8.21788 15.2292 8.49967 15.2292C8.78147 15.2292 9.05172 15.1172 9.25098 14.918C9.45023 14.7187 9.56217 14.4485 9.56217 14.1667V9.56249H14.1663C14.4481 9.56249 14.7184 9.45055 14.9176 9.2513C15.1169 9.05204 15.2288 8.78179 15.2288 8.49999C15.2288 8.2182 15.1169 7.94795 14.9176 7.74869C14.7184 7.54944 14.4481 7.43749 14.1663 7.43749H9.56217V2.83333C9.56217 2.55154 9.45023 2.28128 9.25098 2.08203C9.05172 1.88277 8.78147 1.77083 8.49967 1.77083C8.21788 1.77083 7.94763 1.88277 7.74837 2.08203C7.54912 2.28128 7.43717 2.55154 7.43717 2.83333V7.43749H2.83301C2.55122 7.43749 2.28096 7.54944 2.08171 7.74869C1.88245 7.94795 1.77051 8.2182 1.77051 8.49999C1.77051 8.78179 1.88245 9.05204 2.08171 9.2513C2.28096 9.45055 2.55122 9.56249 2.83301 9.56249H7.43717V14.1667Z" fill="#5D5D5D" />
-</g>
-<defs>
-<clipPath id="clip0_2494_3464">
-<rect width="17" height="17" fill="white"/>
-</clipPath>
-</defs>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="600" height="450" viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25 25H575M25 225H575M25 425H575" stroke="black" stroke-opacity="0.54" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
@@ -1,4 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.66663" y="1" width="18" height="18" rx="9" stroke="#747474" stroke-width="2"/>
-<path d="M9.89252 14.1268C9.89252 14.3321 9.97405 14.5289 10.1192 14.674C10.2643 14.8191 10.4611 14.9006 10.6663 14.9006C10.8716 14.9006 11.0684 14.8191 11.2135 14.674C11.3586 14.5289 11.4401 14.3321 11.4401 14.1268L11.4401 10.7737L14.7933 10.7737C14.9985 10.7737 15.1953 10.6922 15.3404 10.547C15.4856 10.4019 15.5671 10.2051 15.5671 9.99989C15.5671 9.79466 15.4856 9.59784 15.3404 9.45272C15.1953 9.30761 14.9985 9.22608 14.7933 9.22608L11.4401 9.22608L11.4401 5.87293C11.4401 5.6677 11.3586 5.47088 11.2135 5.32576C11.0684 5.18065 10.8716 5.09912 10.6663 5.09912C10.4611 5.09912 10.2643 5.18065 10.1192 5.32576C9.97405 5.47088 9.89252 5.6677 9.89252 5.87293L9.89252 9.22608L6.53937 9.22608C6.33414 9.22608 6.13732 9.30761 5.99221 9.45272C5.84709 9.59784 5.76556 9.79466 5.76556 9.99989C5.76556 10.2051 5.84709 10.4019 5.99221 10.547C6.13732 10.6922 6.33414 10.7737 6.53937 10.7737L9.89252 10.7737L9.89252 14.1268Z" fill="#747474"/>
-</svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-close-icon lucide-panel-left-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-open-icon lucide-panel-left-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m14 9 3 3-3 3"/></svg>
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.57031 0C10.1985 0.000253697 13.1396 2.94204 13.1396 6.57031C13.1396 7.77747 12.8128 8.90773 12.2442 9.87947C12.1066 10.1147 12.0378 10.2323 12.0243 10.3313C12.0115 10.4257 12.0212 10.5011 12.0575 10.5891C12.0956 10.6815 12.1813 10.7673 12.3528 10.9387L13.6914 12.2773C14.0817 12.6679 14.0818 13.301 13.6914 13.6914C13.3009 14.0815 12.6678 14.0816 12.2773 13.6914L10.9387 12.3528C10.7673 12.1813 10.6815 12.0956 10.5891 12.0575C10.5011 12.0212 10.4257 12.0115 10.3313 12.0243C10.2323 12.0378 10.1147 12.1066 9.87947 12.2442C8.90773 12.8128 7.77747 13.1396 6.57031 13.1396C2.94204 13.1396 0.000253694 10.1985 0 6.57031C0 2.94189 2.94189 0 6.57031 0ZM6.57031 2C4.04646 2 2 4.04646 2 6.57031C2.00025 9.09395 4.04661 11.1396 6.57031 11.1396C9.09379 11.1394 11.1394 9.09379 11.1396 6.57031C11.1396 4.04661 9.09395 2.00025 6.57031 2Z" fill="#6F6F6F"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black" fill-opacity="0.54"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.04167 7.2997C1.96431 7.2997 1.89013 7.32976 1.83543 7.38326C1.78073 7.43677 1.75 7.50934 1.75 7.585V15.0029C1.75 15.1604 1.88067 15.2882 2.04167 15.2882H11.9583C12.0357 15.2882 12.1099 15.2581 12.1646 15.2046C12.2193 15.1511 12.25 15.0785 12.25 15.0029V7.585C12.25 7.50934 12.2193 7.43677 12.1646 7.38326C12.1099 7.32976 12.0357 7.2997 11.9583 7.2997H10.7917C10.5596 7.2997 10.337 7.20952 10.1729 7.04901C10.0089 6.8885 9.91667 6.67079 9.91667 6.44379C9.91667 6.21679 10.0089 5.99909 10.1729 5.83857C10.337 5.67806 10.5596 5.58788 10.7917 5.58788H11.9583C13.0853 5.58788 14 6.48259 14 7.585V15.0029C14 15.5325 13.7849 16.0405 13.402 16.4151C13.0191 16.7896 12.4998 17 11.9583 17H2.04167C1.50018 17 0.980877 16.7896 0.59799 16.4151C0.215104 16.0405 0 15.5325 0 15.0029V7.585C0 6.48259 0.914667 5.58788 2.04167 5.58788H3.20833C3.4404 5.58788 3.66296 5.67806 3.82705 5.83857C3.99115 5.99909 4.08333 6.21679 4.08333 6.44379C4.08333 6.67079 3.99115 6.8885 3.82705 7.04901C3.66296 7.20952 3.4404 7.2997 3.20833 7.2997H2.04167ZM6.7935 0.0838185C6.82059 0.0572492 6.85278 0.0361694 6.88821 0.0217864C6.92365 0.0074035 6.96164 0 7 0C7.03836 0 7.07635 0.0074035 7.11179 0.0217864C7.14722 0.0361694 7.17941 0.0572492 7.2065 0.0838185L10.5852 3.38877C10.6261 3.42867 10.6539 3.47955 10.6652 3.53496C10.6765 3.59037 10.6707 3.64782 10.6486 3.70001C10.6265 3.75221 10.589 3.7968 10.541 3.82815C10.4929 3.85949 10.4364 3.87617 10.3787 3.87607H7.875V10.438C7.875 10.665 7.78281 10.8827 7.61872 11.0433C7.45462 11.2038 7.23206 11.2939 7 11.2939C6.76794 11.2939 6.54538 11.2038 6.38128 11.0433C6.21719 10.8827 6.125 10.665 6.125 10.438V3.87607H3.62133C3.56357 3.87617 3.50708 3.85949 3.45902 3.82815C3.41096 3.7968 3.37349 3.75221 3.35138 3.70001C3.32926 3.64782 3.32348 3.59037 3.33478 3.53496C3.34607 3.47955 3.37394 3.42867 3.41483 3.38877L6.7935 0.0838185Z" fill="#747474"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.04071 11.3081H1.51004C1.33769 11.3088 1.1726 11.3776 1.05073 11.4995C0.928855 11.6213 0.860077 11.7864 0.859375 11.9588V17.4921C0.859375 17.8521 1.15137 18.1428 1.51004 18.1428H7.04337C7.40337 18.1428 7.69404 17.8508 7.69404 17.4921V11.9588C7.69334 11.7864 7.62456 11.6213 7.50269 11.4995C7.38082 11.3776 7.21573 11.3088 7.04337 11.3081H7.04071ZM17.1594 11.3081H11.626C11.4537 11.3088 11.2886 11.3776 11.1667 11.4995C11.0449 11.6213 10.9761 11.7864 10.9754 11.9588V17.4921C10.9754 17.8521 11.266 18.1428 11.626 18.1428H17.1594C17.5194 18.1428 17.81 17.8508 17.81 17.4921V11.9588C17.8093 11.7864 17.7406 11.6213 17.6187 11.4995C17.4968 11.3776 17.3317 11.3088 17.1594 11.3081ZM7.04071 1.19079H1.51004C1.33769 1.19149 1.1726 1.26027 1.05073 1.38214C0.928855 1.50401 0.860077 1.6691 0.859375 1.84145V7.37479C0.859375 7.73479 1.15137 8.02545 1.51004 8.02545H7.04337C7.40337 8.02545 7.69404 7.73345 7.69404 7.37479V1.84012C7.69334 1.66777 7.62456 1.50268 7.50269 1.3808C7.38082 1.25893 7.21573 1.19016 7.04337 1.18945L7.04071 1.19079ZM10.862 5.11212C10.4607 5.04279 10.4607 4.46812 10.862 4.39745C11.5717 4.27403 12.2286 3.94205 12.7489 3.44385C13.2692 2.94565 13.6293 2.3038 13.7834 1.60012L13.8074 1.48945C13.894 1.09345 14.458 1.08945 14.5487 1.48545L14.578 1.61479C14.7379 2.31545 15.1012 2.95326 15.6224 3.4481C16.1436 3.94294 16.7994 4.27276 17.5074 4.39612C17.91 4.46545 17.91 5.04412 17.5074 5.11479C16.7994 5.23815 16.1436 5.56796 15.6224 6.0628C15.1012 6.55765 14.7379 7.19545 14.578 7.89612L14.5487 8.02412C14.458 8.42012 13.8954 8.41745 13.8074 8.02145L13.7834 7.91079C13.6295 7.20686 13.2695 6.56472 12.7492 6.06627C12.2289 5.56781 11.5719 5.23564 10.862 5.11212Z" stroke="#747474" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
@@ -1,7 +1,6 @@
+import { ExternalLink, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import newChatIcon from '../assets/openNewChat.svg';
-import ShareIcon from '../assets/share.svg';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { useState } from 'react';
 import { selectConversationId } from '../preferences/preferenceSlice';
@@ -57,15 +56,9 @@ export default function ActionButtons({
            size="icon"
            title={t('actionButtons.openNewChat')}
            onClick={newChat}
-            className="rounded-full lg:hidden"
+            className="text-muted-foreground hover:text-foreground rounded-full lg:hidden"
          >
-            <img
-              className="filter dark:invert"
-              alt="NewChat"
-              width={21}
-              height={21}
-              src={newChatIcon}
-            />
+            <Plus className="size-5" strokeWidth={1.75} aria-label="NewChat" />
          </Button>
        )}

@@ -77,14 +70,12 @@ export default function ActionButtons({
              size="icon"
              title={t('actionButtons.share')}
              onClick={() => setShareModalState(true)}
-              className="rounded-full"
+              className="text-muted-foreground hover:text-foreground rounded-full"
            >
-              <img
-                className="filter dark:invert"
-                alt="share"
-                width={16}
-                height={16}
-                src={ShareIcon}
+              <ExternalLink
+                className="size-5"
+                strokeWidth={1.75}
+                aria-label="share"
              />
            </Button>
            {isShareModalOpen && (
@@ -1,3 +1,4 @@
+import { Search as SearchIcon } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,7 +9,6 @@ import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import SearchIcon from '../assets/search.svg';
 import {
  useDarkTheme,
  useDebouncedValue,
@@ -493,7 +493,11 @@ const Chunks: React.FC<ChunksProps> = ({
      <div className="relative" ref={searchDropdownRef}>
        <div className="relative flex items-center">
          <div className="pointer-events-none absolute left-3">
-            <img src={SearchIcon} alt="Search" className="h-4 w-4" />
+            <SearchIcon
+              className="text-muted-foreground size-4"
+              strokeWidth={1.75}
+              aria-label="Search"
+            />
          </div>
          <Input
            type="text"
@@ -1,3 +1,4 @@
+import { Search as SearchIcon } from 'lucide-react';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import userService from '../api/services/userService';
@@ -12,7 +13,6 @@ import ConnectorAuth from '../components/ConnectorAuth';
 import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
 import CheckIcon from '../assets/checkmark.svg';
-import SearchIcon from '../assets/search.svg';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import {
@@ -493,7 +493,10 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                  onChange={(e) => handleSearchChange(e.target.value)}
                  labelBgClassName="bg-[#EEE6FF78] dark:bg-muted"
                  leftIcon={
-                    <img src={SearchIcon} alt="Search" width={16} height={16} />
+                    <SearchIcon
+                      className="text-muted-foreground size-4"
+                      strokeWidth={1.75}
+                    />
                  }
                />
              </div>
@@ -39,9 +39,13 @@ const Help = () => {
        variant="ghost"
        ref={buttonRef}
        onClick={toggleDropdown}
-        className="hover:bg-sidebar-accent mx-4 my-auto w-full justify-start gap-4 rounded-3xl px-0"
+        className="hover:bg-sidebar-accent mx-4 my-auto w-full justify-start gap-2.5 rounded-3xl pr-0 pl-3"
      >
-        <img src={Info} alt="info" className="ml-2 w-5 filter dark:invert" />
+        <img
+          src={Info}
+          alt="info"
+          className="w-5 shrink-0 filter dark:invert"
+        />
        {t('help')}
      </Button>
      {isOpen && (
@@ -1,10 +1,11 @@
-import { X } from 'lucide-react';
+import { ExternalLink, X } from 'lucide-react';
 import {
  SyntheticEvent,
  useCallback,
  useEffect,
  useRef,
  useState,
+  type ReactNode,
 } from 'react';
 import { useSelector } from 'react-redux';
 import Edit from '../assets/edit.svg';
@@ -12,7 +13,6 @@ import { useDarkTheme } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import CheckMark2 from '../assets/checkMark2.svg';
 import Trash from '../assets/red-trash.svg';
-import Share from '../assets/share.svg';
 import threeDots from '../assets/three-dots.svg';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { ActiveState } from '../models/misc';
@@ -127,17 +127,15 @@ export default function ConversationTile({
  };

  type ConversationMenuOption = {
-    icon: string;
+    icon: ReactNode;
    label: string;
    onClick: (event: SyntheticEvent) => void;
    variant: 'default' | 'destructive';
-    iconWidth?: number;
-    iconHeight?: number;
  };

  const menuOptions: ConversationMenuOption[] = [
    {
-      icon: Share,
+      icon: <ExternalLink className="size-3.5" strokeWidth={1.75} />,
      label: t('convTile.share'),
      onClick: (event: SyntheticEvent) => {
        event.stopPropagation();
@@ -145,25 +143,21 @@ export default function ConversationTile({
        setOpen(false);
      },
      variant: 'default',
-      iconWidth: 14,
-      iconHeight: 14,
    },
    {
-      icon: Edit,
+      icon: <img src={Edit} alt="" width={16} height={16} />,
      label: t('convTile.rename'),
      onClick: handleEditConversation,
      variant: 'default',
    },
    {
-      icon: Trash,
+      icon: <img src={Trash} alt="" width={18} height={18} />,
      label: t('convTile.delete'),
      onClick: (event: SyntheticEvent) => {
        event.stopPropagation();
        setDeleteModalState('ACTIVE');
        setOpen(false);
      },
-      iconWidth: 18,
-      iconHeight: 18,
      variant: 'destructive',
    },
  ];
@@ -274,12 +268,7 @@ export default function ConversationTile({
                        option.onClick(event as unknown as SyntheticEvent);
                      }}
                    >
-                      <img
-                        src={option.icon}
-                        alt=""
-                        width={option.iconWidth ?? 16}
-                        height={option.iconHeight ?? 16}
-                      />
+                      {option.icon}
                      <span>{option.label}</span>
                    </DropdownMenuItem>
                  ))}
@@ -1,3 +1,4 @@
+import { Search as SearchIcon } from 'lucide-react';
 import {
  useEffect,
  useMemo,
@@ -7,7 +8,6 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';

-import SearchIcon from '../assets/search.svg';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { Modal } from '../components/ui/modal';
@@ -163,7 +163,11 @@ export default function SearchConversationsModal({
    >
      <div className="flex flex-col">
        <div className="border-sidebar-border flex items-center gap-2 border-b px-5 py-4">
-          <img src={SearchIcon} alt="search" className="h-4 w-4 opacity-60" />
+          <SearchIcon
+            className="text-muted-foreground size-4"
+            strokeWidth={1.75}
+            aria-label="search"
+          />
          <Input
            ref={inputRef}
            type="text"
@@ -1,4 +1,4 @@
-import { Globe, Tag, Trash } from 'lucide-react';
+import { Globe, Search as SearchIcon, Tag, Trash } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,6 @@ import modelService from '../api/services/modelService';
 import Edit from '../assets/edit.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import SearchIcon from '../assets/search.svg';
 import ThreeDotsIcon from '../assets/three-dots.svg';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { Button } from '../components/ui/button';
@@ -203,7 +202,10 @@ export default function CustomModels() {
              labelBgClassName="bg-background"
              className="rounded-full"
              leftIcon={
-                <img src={SearchIcon} alt="" className="h-4 w-4 opacity-40" />
+                <SearchIcon
+                  className="text-muted-foreground size-4"
+                  strokeWidth={1.75}
+                />
              }
            />
          </div>
@@ -1,3 +1,4 @@
+import { Search as SearchIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,7 +9,6 @@ import EyeView from '../assets/eye-view.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import Trash from '../assets/red-trash.svg';
-import SearchIcon from '../assets/search.svg';
 import SyncIcon from '../assets/sync.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import CalendarIcon from '../assets/calendar.svg';
@@ -434,7 +434,10 @@ export default function Sources({
              labelBgClassName="bg-background"
              className="rounded-full"
              leftIcon={
-                <img src={SearchIcon} alt="" className="h-4 w-4 opacity-40" />
+                <SearchIcon
+                  className="text-muted-foreground size-4"
+                  strokeWidth={1.75}
+                />
              }
            />
          </div>
@@ -1,4 +1,4 @@
-import { RefreshCcw, Trash } from 'lucide-react';
+import { RefreshCcw, Search as SearchIcon, Trash } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,6 @@ import userService from '../api/services/userService';
 import Edit from '../assets/edit.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
-import SearchIcon from '../assets/search.svg';
 import ThreeDotsIcon from '../assets/three-dots.svg';
 import SkeletonLoader from '../components/SkeletonLoader';
 import ToolIcon from '../components/ToolIcon';
@@ -282,10 +281,9 @@ export default function Tools() {
                  labelBgClassName="bg-background"
                  className="rounded-full"
                  leftIcon={
-                    <img
-                      src={SearchIcon}
-                      alt=""
-                      className="h-4 w-4 opacity-40"
+                    <SearchIcon
+                      className="text-muted-foreground size-4"
+                      strokeWidth={1.75}
                    />
                  }
                />
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-close-icon lucide-panel-left-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>`