diff --git a/src/lib/components/chat/Settings/Shortcuts.svelte b/src/lib/components/chat/Settings/Shortcuts.svelte
index 232a4ec04b..79581b5bdc 100644
--- a/src/lib/components/chat/Settings/Shortcuts.svelte
+++ b/src/lib/components/chat/Settings/Shortcuts.svelte
@@ -101,7 +101,7 @@
 <div id="tab-shortcuts" class="flex h-full flex-col text-sm">
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="text-sm font-medium text-gray-900 dark:text-white">
-			{$i18n.t('Keyboard Shortcuts')}
+			{$i18n.t('Keyboard')}
 		</h2>
 
 		<button
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 32158939aa..7afb1a26be 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -287,7 +287,7 @@
 		},
 		{
 			id: 'shortcuts',
-			title: 'Keyboard Shortcuts',
+			title: 'Keyboard',
 			keywords: [
 				'commands',
 				'hotkeys',
@@ -904,7 +904,7 @@
 							}}
 						>
 							<Keyboard className="size-3.5" strokeWidth="2" />
-							<span>{$i18n.t('Keyboard Shortcuts')}</span>
+							<span>{$i18n.t('Keyboard')}</span>
 						</button>
 					{:else if tabId === 'connections'}
 						{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 3ba6bbb36c..151f522118 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -67,15 +67,18 @@
 	import { getChannels, createNewChannel } from '$lib/apis/channels';
 	import ChannelModal from './Sidebar/ChannelModal.svelte';
 	import ChannelItem from './Sidebar/ChannelItem.svelte';
-	import PencilSquare from '../icons/PencilSquare.svelte';
-	import Search from '../icons/Search.svelte';
 	import SearchModal from './SearchModal.svelte';
 	import FolderModal from './Sidebar/Folders/FolderModal.svelte';
-	import Sidebar from '../icons/Sidebar.svelte';
 	import PinnedModelList from './Sidebar/PinnedModelList.svelte';
 	import PinnedNoteList from './Sidebar/PinnedNoteList.svelte';
-	import Note from '../icons/Note.svelte';
-	import Code from '../icons/Code.svelte';
+	import CalendarIcon from './Sidebar/icons/Calendar.svelte';
+	import ClockIcon from './Sidebar/icons/Clock.svelte';
+	import CodeIcon from './Sidebar/icons/Code.svelte';
+	import EditPencilIcon from './Sidebar/icons/EditPencil.svelte';
+	import NotesIcon from './Sidebar/icons/Notes.svelte';
+	import SearchIcon from './Sidebar/icons/Search.svelte';
+	import Sidebar from '../icons/Sidebar.svelte';
+	import WorkspaceIcon from './Sidebar/icons/Workspace.svelte';
 	import { slide } from 'svelte/transition';
 	import HotkeyHint from '../common/HotkeyHint.svelte';
 
@@ -846,7 +849,7 @@
 							<div
 								class=" self-center flex size-[30px] items-center justify-center rounded-lg transition group-hover:bg-gray-100/50 dark:group-hover:bg-gray-850/50"
 							>
-								<PencilSquare className="size-4" />
+								<EditPencilIcon className="size-4" />
 							</div>
 						</a>
 					</Tooltip>
@@ -868,7 +871,7 @@
 							<div
 								class=" self-center flex size-[30px] items-center justify-center rounded-lg transition group-hover:bg-gray-100/50 dark:group-hover:bg-gray-850/50"
 							>
-								<Search className="size-4" />
+								<SearchIcon className="size-4" />
 							</div>
 						</button>
 					</Tooltip>
@@ -895,54 +898,15 @@
 										class=" self-center flex size-[30px] items-center justify-center rounded-lg transition group-hover:bg-gray-100/50 dark:group-hover:bg-gray-850/50"
 									>
 										{#if itemId === 'notes'}
-											<Note className="size-4" />
+											<NotesIcon className="size-4" />
 										{:else if itemId === 'workspace'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
-												/>
-											</svg>
+											<WorkspaceIcon className="size-4" />
 										{:else if itemId === 'automations'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-												/>
-											</svg>
+											<ClockIcon className="size-4" />
 										{:else if itemId === 'calendar'}
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
-												/>
-											</svg>
+											<CalendarIcon className="size-4" />
 										{:else if itemId === 'playground'}
-											<Code className="size-4" />
+											<CodeIcon className="size-4" />
 										{/if}
 									</div>
 								</a>
@@ -1087,7 +1051,7 @@
 							aria-label={$i18n.t('New Chat')}
 						>
 							<div class="self-center">
-								<PencilSquare className=" size-4" strokeWidth="2" />
+								<EditPencilIcon className=" size-4" strokeWidth="1.5" />
 							</div>
 
 							<div class="flex flex-1 self-center translate-y-[0.5px]">
@@ -1109,7 +1073,7 @@
 							aria-label={$i18n.t('Search')}
 						>
 							<div class="self-center">
-								<Search strokeWidth="2" className="size-4" />
+								<SearchIcon strokeWidth="1.5" className="size-4" />
 							</div>
 
 							<div class="flex flex-1 self-center translate-y-[0.5px]">
@@ -1137,54 +1101,15 @@
 									>
 										<div class="self-center">
 											{#if itemId === 'notes'}
-												<Note className="size-4" strokeWidth="2" />
+												<NotesIcon className="size-4" strokeWidth="1.5" />
 											{:else if itemId === 'workspace'}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="2"
-													stroke="currentColor"
-													class="size-4"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
-													/>
-												</svg>
+												<WorkspaceIcon className="size-4" strokeWidth="1.5" />
 											{:else if itemId === 'automations'}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="2"
-													stroke="currentColor"
-													class="size-4"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-													/>
-												</svg>
+												<ClockIcon className="size-4" strokeWidth="1.5" />
 											{:else if itemId === 'calendar'}
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="2"
-													stroke="currentColor"
-													class="size-4"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
-													/>
-												</svg>
+												<CalendarIcon className="size-4" strokeWidth="1.5" />
 											{:else if itemId === 'playground'}
-												<Code className="size-4" strokeWidth="2" />
+												<CodeIcon className="size-4" strokeWidth="1.5" />
 											{/if}
 										</div>
 
diff --git a/src/lib/components/layout/Sidebar/ChannelItem.svelte b/src/lib/components/layout/Sidebar/ChannelItem.svelte
index 2550e877dc..0b0adde18b 100644
--- a/src/lib/components/layout/Sidebar/ChannelItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelItem.svelte
@@ -9,13 +9,13 @@
 	import { updateChannelById, updateChannelMemberActiveStatusById } from '$lib/apis/channels';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
-	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import ChannelModal from './ChannelModal.svelte';
-	import Lock from '$lib/components/icons/Lock.svelte';
-	import Hashtag from '$lib/components/icons/Hashtag.svelte';
-	import Users from '$lib/components/icons/Users.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
 	import Emoji from '$lib/components/common/Emoji.svelte';
+	import HashtagIcon from './icons/Hashtag.svelte';
+	import LockIcon from './icons/Lock.svelte';
+	import SettingsIcon from './icons/Settings.svelte';
+	import UserIcon from './icons/User.svelte';
+	import XMarkIcon from './icons/XMark.svelte';
 
 	export let onUpdate: Function = () => {};
 
@@ -139,14 +139,14 @@
 							{/if}
 						</div>
 					{:else}
-						<Users className="size-4 ml-1 mr-0.5" strokeWidth="2" />
+						<UserIcon className="size-4 ml-1 mr-0.5" strokeWidth="1.5" />
 					{/if}
 				{:else}
 					<div class=" size-4 justify-center flex items-center ml-1">
 						{#if isPublicChannel(channel)}
-							<Hashtag className="size-3.5" strokeWidth="2.5" />
+							<HashtagIcon className="size-3.5" strokeWidth="1.5" />
 						{:else}
-							<Lock className="size-[15px]" strokeWidth="2" />
+							<LockIcon className="size-[15px]" strokeWidth="1.5" />
 						{/if}
 					</div>
 				{/if}
@@ -226,7 +226,7 @@
 					);
 				}}
 			>
-				<XMark className="size-3.5" />
+				<XMarkIcon className="size-3.5" />
 			</button>
 		</div>
 	{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
@@ -242,7 +242,7 @@
 					showEditChannelModal = true;
 				}}
 			>
-				<Cog6 className="size-3.5" />
+				<SettingsIcon className="size-3.5" />
 			</button>
 		</div>
 	{/if}
diff --git a/src/lib/components/layout/Sidebar/ChannelModal.svelte b/src/lib/components/layout/Sidebar/ChannelModal.svelte
index 0d17f8e116..bfc900ad3e 100644
--- a/src/lib/components/layout/Sidebar/ChannelModal.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelModal.svelte
@@ -13,7 +13,7 @@
 	import Modal from '$lib/components/common/Modal.svelte';
 	import AccessControl from '$lib/components/workspace/common/AccessControl.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
+	import XMark from './icons/XMark.svelte';
 	import MemberSelector from '$lib/components/workspace/common/MemberSelector.svelte';
 	import Visibility from '$lib/components/workspace/common/Visibility.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -141,7 +141,7 @@
 <Modal size="md" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+			<div class=" text-sm self-center">
 				{#if edit}
 					{$i18n.t('Edit Channel')}
 				{:else}
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index a0bd4bc8f1..c1c3409cf0 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -35,15 +35,14 @@
 	import ChatMenu from './ChatMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
-	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import DragGhost from '$lib/components/common/DragGhost.svelte';
-	import Check from '$lib/components/icons/Check.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	import Document from '$lib/components/icons/Document.svelte';
-	import Sparkles from '$lib/components/icons/Sparkles.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ArchiveIcon from './icons/Archive.svelte';
+	import ChatIcon from './icons/Chat.svelte';
+	import MoreHorizontalIcon from './icons/MoreHorizontal.svelte';
+	import SparklesIcon from './icons/Sparkles.svelte';
+	import TrashIcon from './icons/Trash.svelte';
 	import { generateTitle } from '$lib/apis';
 	import { createMessagesList } from '$lib/utils';
 	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
@@ -435,7 +434,7 @@
 	<DragGhost {x} {y}>
 		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
 			<div class="flex items-center gap-1">
-				<Document className=" size-[18px]" strokeWidth="2" />
+				<ChatIcon className=" size-[18px]" strokeWidth="1.5" />
 				<div class=" text-xs text-white line-clamp-1">
 					{title}
 				</div>
@@ -615,7 +614,7 @@
 								generateTitleHandler();
 							}}
 						>
-							<Sparkles strokeWidth="2" />
+							<SparklesIcon strokeWidth="1.5" />
 						</button>
 					</Tooltip>
 				</div>
@@ -630,7 +629,7 @@
 							}}
 							type="button"
 						>
-							<ArchiveBox className="size-4  translate-y-[0.5px]" strokeWidth="2" />
+							<ArchiveIcon className="size-4  translate-y-[0.5px]" strokeWidth="1.5" />
 						</button>
 					</Tooltip>
 
@@ -643,7 +642,7 @@
 							}}
 							type="button"
 						>
-							<GarbageBin strokeWidth="2" />
+							<TrashIcon strokeWidth="1.5" />
 						</button>
 					</Tooltip>
 				</div>
@@ -679,16 +678,7 @@
 								dispatch('select');
 							}}
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
-								/>
-							</svg>
+							<MoreHorizontalIcon className="w-4 h-4" />
 						</button>
 					</ChatMenu>
 
@@ -701,16 +691,7 @@
 								showDeleteConfirm = true;
 							}}
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
-								/>
-							</svg>
+							<MoreHorizontalIcon className="w-4 h-4" />
 						</button>
 					{/if}
 				</div>
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index 20061b4359..b0b1e78315 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -7,15 +7,8 @@
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import DropdownSub from '$lib/components/common/DropdownSub.svelte';
-	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
-	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Tags from '$lib/components/chat/Tags.svelte';
-	import Share from '$lib/components/icons/Share.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
-	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
-	import Bookmark from '$lib/components/icons/Bookmark.svelte';
-	import BookmarkSlash from '$lib/components/icons/BookmarkSlash.svelte';
 	import {
 		getChatById,
 		getChatPinnedStatusById,
@@ -25,9 +18,16 @@
 	import { createMessagesList } from '$lib/utils';
 	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
 	import { downloadChatAsPDF } from '$lib/apis/utils';
-	import Download from '$lib/components/icons/Download.svelte';
-	import Folder from '$lib/components/icons/Folder.svelte';
+	import ArchiveIcon from './icons/Archive.svelte';
+	import CopyIcon from './icons/Copy.svelte';
+	import DownloadIcon from './icons/Download.svelte';
+	import EditPencilIcon from './icons/EditPencil.svelte';
+	import FolderIcon from './icons/Folder.svelte';
 	import Messages from '$lib/components/chat/Messages.svelte';
+	import PinIcon from './icons/Pin.svelte';
+	import PinSlashIcon from './icons/PinSlash.svelte';
+	import ShareIcon from './icons/Share.svelte';
+	import TrashIcon from './icons/Trash.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -309,7 +309,7 @@
 						shareHandler();
 					}}
 				>
-					<Share className="size-3.5" strokeWidth="1.5" />
+					<ShareIcon className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
 				</button>
 			{/if}
@@ -321,7 +321,7 @@
 						draggable="false"
 						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
 					>
-						<Download className="size-3.5" strokeWidth="1.5" />
+						<DownloadIcon className="size-3.5" strokeWidth="1.5" />
 						<div class="flex items-center">{$i18n.t('Download')}</div>
 					</button>
 
@@ -365,7 +365,7 @@
 					renameHandler();
 				}}
 			>
-				<Pencil className="size-3.5" strokeWidth="1.5" />
+				<EditPencilIcon className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Rename')}</div>
 			</button>
 
@@ -380,10 +380,10 @@
 				}}
 			>
 				{#if pinned}
-					<BookmarkSlash className="size-3.5" strokeWidth="1.5" />
+					<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Unpin')}</div>
 				{:else}
-					<Bookmark className="size-3.5" strokeWidth="1.5" />
+					<PinIcon className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Pin')}</div>
 				{/if}
 			</button>
@@ -397,7 +397,7 @@
 						cloneChatHandler();
 					}}
 				>
-					<DocumentDuplicate className="size-3.5" strokeWidth="1.5" />
+					<CopyIcon className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Clone')}</div>
 				</button>
 			{/if}
@@ -409,7 +409,7 @@
 						draggable="false"
 						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 select-none w-full"
 					>
-						<Folder className="size-3.5" />
+						<FolderIcon className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Move')}</div>
 					</button>
 
@@ -422,7 +422,7 @@
 							}}
 						>
 							<div class="shrink-0">
-								<Folder className="size-3.5" />
+								<FolderIcon className="size-3.5" />
 							</div>
 
 							<div class="truncate">{folder?.name ?? 'Folder'}</div>
@@ -438,7 +438,7 @@
 					archiveChatHandler();
 				}}
 			>
-				<ArchiveBox className="size-3.5" strokeWidth="1.5" />
+				<ArchiveIcon className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Archive')}</div>
 			</button>
 
@@ -449,7 +449,7 @@
 					deleteHandler();
 				}}
 			>
-				<GarbageBin className="size-3.5" strokeWidth="1.5" />
+				<TrashIcon className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte b/src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
index e461e7553d..a22efec82f 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte
@@ -6,11 +6,12 @@
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
-	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
-	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import EditPencil from '../icons/EditPencil.svelte';
+	import FolderIcon from '../icons/Folder.svelte';
+	import ShareIcon from '../icons/Share.svelte';
+	import TrashIcon from '../icons/Trash.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import Download from '$lib/components/icons/Download.svelte';
-	import Folder from '$lib/components/icons/Folder.svelte';
+	import Download from '../icons/Download.svelte';
 
 	export let align: 'start' | 'end' = 'start';
 	export let onEdit = () => {};
@@ -50,7 +51,7 @@
 					onCreateSubFolder();
 				}}
 			>
-				<Folder className="size-3.5" />
+				<FolderIcon className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Create Folder')}</div>
 			</button>
 
@@ -62,7 +63,7 @@
 					onEdit();
 				}}
 			>
-				<Pencil className="size-3.5" />
+				<EditPencil className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
 			</button>
 
@@ -82,20 +83,7 @@
 					onShare();
 				}}
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="size-3.5"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.935-2.186 2.25 2.25 0 0 0-3.935 2.186Z"
-					/>
-				</svg>
+				<ShareIcon className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Share')}</div>
 			</button>
 
@@ -107,7 +95,7 @@
 					onDelete();
 				}}
 			>
-				<GarbageBin className="size-3.5" />
+				<TrashIcon className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
index f522b17d23..fb2e047f29 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
@@ -3,7 +3,7 @@
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
+	import XMark from '../icons/XMark.svelte';
 
 	import { toast } from 'svelte-sonner';
 	import { page } from '$app/stores';
@@ -111,7 +111,7 @@
 <Modal size="md" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+			<div class=" text-sm self-center">
 				{#if edit}
 					{$i18n.t('Edit Folder')}
 				{:else}
diff --git a/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
index 9eeb3411ce..0f3a362ca4 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderShareModal.svelte
@@ -4,7 +4,7 @@
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import AccessControl from '$lib/components/workspace/common/AccessControl.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
+	import XMark from '../icons/XMark.svelte';
 	import { getFolderById, updateFolderAccessById } from '$lib/apis/folders';
 	import { user } from '$lib/stores';
 
@@ -57,7 +57,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-5 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+			<div class=" text-sm self-center">
 				{$i18n.t('Share')}: {folder?.name ?? ''}
 			</div>
 			<button
diff --git a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
index c5404c52a8..e3270139ec 100644
--- a/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedModelItem.svelte
@@ -6,7 +6,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import PinSlash from '$lib/components/icons/PinSlash.svelte';
+	import PinSlash from './icons/PinSlash.svelte';
 
 	export let model = null;
 	export let shiftKey = false;
@@ -63,7 +63,7 @@
 							}}
 							type="button"
 						>
-							<PinSlash className="size-3.5" strokeWidth="2" />
+							<PinSlash className="size-3.5" strokeWidth="1.5" />
 						</button>
 					</Tooltip>
 				</div>
diff --git a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
index 92abc54127..2b7cc815f5 100644
--- a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
@@ -6,7 +6,8 @@
 	import { chatId, mobile, pinnedNotes, settings, showSidebar } from '$lib/stores';
 	import { updateUserSettings } from '$lib/apis/users';
 	import { getPinnedNoteList, toggleNotePinnedStatusById } from '$lib/apis/notes';
-	import Note from '$lib/components/icons/Note.svelte';
+	import NotesIcon from './icons/Notes.svelte';
+	import XMarkIcon from './icons/XMark.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -78,7 +79,7 @@
 				draggable="false"
 			>
 				<div class="self-center">
-					<Note className="size-4" strokeWidth="2" />
+					<NotesIcon className="size-4" strokeWidth="1.5" />
 				</div>
 				<div class="flex-1 text-ellipsis line-clamp-1">
 					{note.title}
@@ -93,16 +94,7 @@
 				}}
 				aria-label={$i18n.t('Unpin')}
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-					class="size-3.5"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-				</svg>
+				<XMarkIcon className="size-3.5" strokeWidth="1.5" />
 			</button>
 		</div>
 	{/each}
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index c452885240..cb277cfb08 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -30,13 +30,13 @@
 		importChats
 	} from '$lib/apis/chats';
 
-	import ChevronDown from '../../icons/ChevronDown.svelte';
-	import ChevronRight from '../../icons/ChevronRight.svelte';
+	import ChevronDown from './icons/ChevronDown.svelte';
+	import ChevronRight from './icons/ChevronRight.svelte';
 	import Collapsible from '../../common/Collapsible.svelte';
 	import DragGhost from '$lib/components/common/DragGhost.svelte';
 
-	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
-	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
+	import FolderIcon from './icons/Folder.svelte';
+	import MoreHorizontal from './icons/MoreHorizontal.svelte';
 
 	import ChatItem from './ChatItem.svelte';
 	import FolderMenu from './Folders/FolderMenu.svelte';
@@ -507,7 +507,7 @@
 	<DragGhost {x} {y}>
 		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
 			<div class="flex items-center gap-1">
-				<FolderOpen className="size-3.5" strokeWidth="2" />
+				<FolderIcon className="size-3.5" strokeWidth="1.5" />
 				<div class=" text-xs text-white line-clamp-1">
 					{folders[folderId].name}
 				</div>
@@ -592,17 +592,17 @@
 
 						<div class="hidden group-hover:flex transition-all p-[1px]">
 							{#if open}
-								<ChevronDown className=" size-3" strokeWidth="2.5" />
+								<ChevronDown className=" size-3" strokeWidth="1.5" />
 							{:else}
-								<ChevronRight className=" size-3" strokeWidth="2.5" />
+								<ChevronRight className=" size-3" strokeWidth="1.5" />
 							{/if}
 						</div>
 					{:else}
 						<div class="p-[1px]">
 							{#if open}
-								<ChevronDown className=" size-3" strokeWidth="2.5" />
+								<ChevronDown className=" size-3" strokeWidth="1.5" />
 							{:else}
-								<ChevronRight className=" size-3" strokeWidth="2.5" />
+								<ChevronRight className=" size-3" strokeWidth="1.5" />
 							{/if}
 						</div>
 					{/if}
@@ -663,7 +663,7 @@
 							}}
 						>
 							<div class="p-1 dark:hover:bg-gray-850 rounded-lg touch-auto">
-								<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
+								<MoreHorizontal className="size-4" strokeWidth="1.5" />
 							</div>
 						</FolderMenu>
 					</button>
diff --git a/src/lib/components/layout/Sidebar/SearchInput.svelte b/src/lib/components/layout/Sidebar/SearchInput.svelte
index e79e63f483..47da194ede 100644
--- a/src/lib/components/layout/Sidebar/SearchInput.svelte
+++ b/src/lib/components/layout/Sidebar/SearchInput.svelte
@@ -3,8 +3,8 @@
 	import { folders, tags } from '$lib/stores';
 	import { getContext, createEventDispatcher, onMount, onDestroy, tick } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import Search from '$lib/components/icons/Search.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
+	import Search from './icons/Search.svelte';
+	import XMark from './icons/XMark.svelte';
 
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
@@ -296,7 +296,7 @@
 					class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 					on:click={clearSearchInput}
 				>
-					<XMark className="size-3" strokeWidth="2" />
+					<XMark className="size-3" strokeWidth="1.5" />
 				</button>
 			</div>
 		{/if}
diff --git a/src/lib/components/layout/Sidebar/Section.svelte b/src/lib/components/layout/Sidebar/Section.svelte
index 47b4ebc2b1..b603b4b5eb 100644
--- a/src/lib/components/layout/Sidebar/Section.svelte
+++ b/src/lib/components/layout/Sidebar/Section.svelte
@@ -3,8 +3,8 @@
 
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
-	import Plus from '$lib/components/icons/Plus.svelte';
+	import ChevronRight from './icons/ChevronRight.svelte';
+	import Plus from './icons/Plus.svelte';
 
 	const dispatch = createEventDispatcher();
 	type AddHandler = () => void | Promise<void>;
diff --git a/src/lib/components/layout/Sidebar/SharedFolderItem.svelte b/src/lib/components/layout/Sidebar/SharedFolderItem.svelte
index c6b9f5aa98..4dcb7a30f9 100644
--- a/src/lib/components/layout/Sidebar/SharedFolderItem.svelte
+++ b/src/lib/components/layout/Sidebar/SharedFolderItem.svelte
@@ -9,9 +9,10 @@
 
 	import ChatItem from './ChatItem.svelte';
 	import Collapsible from '../../common/Collapsible.svelte';
-	import ChevronDown from '../../icons/ChevronDown.svelte';
-	import ChevronRight from '../../icons/ChevronRight.svelte';
-	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
+	import ChevronDown from './icons/ChevronDown.svelte';
+	import ChevronRight from './icons/ChevronRight.svelte';
+	import Eye from './icons/Eye.svelte';
+	import FolderIcon from './icons/Folder.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	export let folder: any;
@@ -63,13 +64,13 @@
 		>
 			<div class="shrink-0">
 				{#if expanded}
-					<ChevronDown className="size-3" strokeWidth="2.5" />
+					<ChevronDown className="size-3" strokeWidth="1.5" />
 				{:else}
-					<ChevronRight className="size-3" strokeWidth="2.5" />
+					<ChevronRight className="size-3" strokeWidth="1.5" />
 				{/if}
 			</div>
 
-			<FolderOpen className="size-3.5 shrink-0" strokeWidth="2" />
+			<FolderIcon className="size-3.5 shrink-0" strokeWidth="1.5" />
 
 			<div class="flex-1 truncate">
 				{folder.name}
@@ -83,25 +84,7 @@
 
 			{#if !isWritable}
 				<div class="shrink-0 text-[10px] text-gray-400 dark:text-gray-600" title="Read only">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-3"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-						/>
-					</svg>
+					<Eye className="size-3" />
 				</div>
 			{/if}
 		</button>
diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index ad43d01faf..8bd3d824a6 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/src/lib/components/layout/Sidebar/UserMenu.svelte
@@ -14,20 +14,23 @@
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
-	import Map from '$lib/components/icons/Map.svelte';
-	import Keyboard from '$lib/components/icons/Keyboard.svelte';
-	import Settings from '$lib/components/icons/Settings.svelte';
-	import Code from '$lib/components/icons/Code.svelte';
-	import UserGroup from '$lib/components/icons/UserGroup.svelte';
-	import SignOut from '$lib/components/icons/SignOut.svelte';
-	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
 	import UserStatusModal from './UserStatusModal.svelte';
 	import Emoji from '$lib/components/common/Emoji.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	import Note from '$lib/components/icons/Note.svelte';
-	import Pin from '$lib/components/icons/Pin.svelte';
-	import PinSlash from '$lib/components/icons/PinSlash.svelte';
+	import CalendarIcon from './icons/Calendar.svelte';
+	import ClockIcon from './icons/Clock.svelte';
+	import CodeIcon from './icons/Code.svelte';
+	import EmojiFaceIcon from './icons/EmojiFace.svelte';
+	import HelpCircleIcon from './icons/HelpCircle.svelte';
+	import LogOutIcon from './icons/LogOut.svelte';
+	import MapIcon from './icons/Map.svelte';
+	import NotesIcon from './icons/Notes.svelte';
+	import PinIcon from './icons/Pin.svelte';
+	import PinSlashIcon from './icons/PinSlash.svelte';
+	import Settings from '$lib/components/icons/Settings.svelte';
+	import KeyIcon from './icons/Key.svelte';
+	import UserIcon from './icons/User.svelte';
+	import WorkspaceIcon from './icons/Workspace.svelte';
+	import XMarkIcon from './icons/XMark.svelte';
 	import { updateUserStatus, updateUserSettings } from '$lib/apis/users';
 	import { toast } from 'svelte-sonner';
 
@@ -206,7 +209,7 @@
 											}
 										}}
 									>
-										<XMark className="size-3.5 opacity-50" strokeWidth="2" />
+										<XMarkIcon className="size-3.5 opacity-50" strokeWidth="1.5" />
 									</button>
 								</Tooltip>
 							</div>
@@ -223,7 +226,7 @@
 							}}
 						>
 							<div class="self-center shrink-0 size-4.5 flex items-center justify-center">
-								<FaceSmile className="size-3.5" strokeWidth="1.5" />
+								<EmojiFaceIcon className="size-3.5" strokeWidth="1.5" />
 							</div>
 							<div class="self-center truncate">{$i18n.t('Update your status')}</div>
 						</button>
@@ -253,20 +256,7 @@
 						}}
 					>
 						<div class="self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="size-3.5"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
-								/>
-							</svg>
+							<WorkspaceIcon className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Workspace')}</div>
 					</a>
@@ -282,9 +272,9 @@
 								on:click|preventDefault|stopPropagation={() => togglePin('workspace')}
 							>
 								{#if isPinned('workspace')}
-									<PinSlash className="size-3.5" strokeWidth="1.5" />
+									<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 								{:else}
-									<Pin className="size-3.5" strokeWidth="1.5" />
+									<PinIcon className="size-3.5" strokeWidth="1.5" />
 								{/if}
 							</button>
 						</Tooltip>
@@ -310,7 +300,7 @@
 						}}
 					>
 						<div class="self-center">
-							<Note className="size-3.5" strokeWidth="1.5" />
+							<NotesIcon className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Notes')}</div>
 					</a>
@@ -326,9 +316,9 @@
 								on:click|preventDefault|stopPropagation={() => togglePin('notes')}
 							>
 								{#if isPinned('notes')}
-									<PinSlash className="size-3.5" strokeWidth="1.5" />
+									<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 								{:else}
-									<Pin className="size-3.5" strokeWidth="1.5" />
+									<PinIcon className="size-3.5" strokeWidth="1.5" />
 								{/if}
 							</button>
 						</Tooltip>
@@ -350,20 +340,7 @@
 						}}
 					>
 						<div class="self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="size-3.5"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
-								/>
-							</svg>
+							<CalendarIcon className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Calendar')}</div>
 					</a>
@@ -379,9 +356,9 @@
 								on:click|preventDefault|stopPropagation={() => togglePin('calendar')}
 							>
 								{#if isPinned('calendar')}
-									<PinSlash className="size-3.5" strokeWidth="1.5" />
+									<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 								{:else}
-									<Pin className="size-3.5" strokeWidth="1.5" />
+									<PinIcon className="size-3.5" strokeWidth="1.5" />
 								{/if}
 							</button>
 						</Tooltip>
@@ -407,20 +384,7 @@
 						}}
 					>
 						<div class="self-center">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								class="size-3.5"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-								/>
-							</svg>
+							<ClockIcon className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Automations')}</div>
 					</a>
@@ -436,9 +400,9 @@
 								on:click|preventDefault|stopPropagation={() => togglePin('automations')}
 							>
 								{#if isPinned('automations')}
-									<PinSlash className="size-3.5" strokeWidth="1.5" />
+									<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 								{:else}
-									<Pin className="size-3.5" strokeWidth="1.5" />
+									<PinIcon className="size-3.5" strokeWidth="1.5" />
 								{/if}
 							</button>
 						</Tooltip>
@@ -464,7 +428,7 @@
 						}}
 					>
 						<div class="self-center">
-							<Code className="size-3.5" strokeWidth="1.5" />
+							<CodeIcon className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Playground')}</div>
 					</a>
@@ -480,9 +444,9 @@
 								on:click|preventDefault|stopPropagation={() => togglePin('playground')}
 							>
 								{#if isPinned('playground')}
-									<PinSlash className="size-3.5" strokeWidth="1.5" />
+									<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
 								{:else}
-									<Pin className="size-3.5" strokeWidth="1.5" />
+									<PinIcon className="size-3.5" strokeWidth="1.5" />
 								{/if}
 							</button>
 						</Tooltip>
@@ -507,7 +471,7 @@
 						}}
 					>
 						<div class="self-center">
-							<QuestionMarkCircle className="size-3.5" />
+							<HelpCircleIcon className="size-3.5" />
 						</div>
 						<div class=" self-center truncate">{$i18n.t('Documentation')}</div>
 					</a>
@@ -524,7 +488,7 @@
 						}}
 					>
 						<div class="self-center">
-							<Map className="size-3.5" />
+							<MapIcon className="size-3.5" />
 						</div>
 						<div class=" self-center truncate">{$i18n.t('Releases')}</div>
 					</a>
@@ -545,9 +509,9 @@
 					}}
 				>
 					<div class="self-center">
-						<Keyboard className="size-3.5" />
+						<KeyIcon className="size-3.5" />
 					</div>
-					<div class=" self-center truncate">{$i18n.t('Keyboard Shortcuts')}</div>
+					<div class=" self-center truncate">{$i18n.t('Keyboard')}</div>
 				</button>
 			{/if}
 
@@ -572,7 +536,7 @@
 					}}
 				>
 					<div class="self-center">
-						<UserGroup className="size-3.5" strokeWidth="1.5" />
+						<UserIcon className="size-3.5" strokeWidth="1.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
 				</a>
@@ -611,7 +575,7 @@
 				}}
 			>
 				<div class="self-center">
-					<SignOut className="size-3.5" strokeWidth="1.5" />
+					<LogOutIcon className="size-3.5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
 			</button>
diff --git a/src/lib/components/layout/Sidebar/UserStatusModal.svelte b/src/lib/components/layout/Sidebar/UserStatusModal.svelte
index eb2002ad1e..09a9bd89ed 100644
--- a/src/lib/components/layout/Sidebar/UserStatusModal.svelte
+++ b/src/lib/components/layout/Sidebar/UserStatusModal.svelte
@@ -11,9 +11,9 @@
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
+	import XMark from './icons/XMark.svelte';
 	import EmojiPicker from '$lib/components/common/EmojiPicker.svelte';
-	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
+	import FaceSmile from './icons/EmojiFace.svelte';
 	import Emoji from '$lib/components/common/Emoji.svelte';
 
 	export let show = false;
@@ -74,7 +74,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-4 pt-3 pb-1">
-			<div class=" text-sm font-medium self-center">
+			<div class=" text-sm self-center">
 				{$i18n.t('Set your status')}
 			</div>
 			<button
diff --git a/src/lib/components/layout/Sidebar/icons/Archive.svelte b/src/lib/components/layout/Sidebar/icons/Archive.svelte
new file mode 100644
index 0000000000..f416e1289c
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Archive.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M10 12L14 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M3 3L21 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M21 7V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Calendar.svelte b/src/lib/components/layout/Sidebar/icons/Calendar.svelte
new file mode 100644
index 0000000000..7d290278d5
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Calendar.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M3 10V6C3 4.89543 3.89543 4 5 4H7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path d="M7 2V6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M21 10V6C21 4.89543 20.1046 4 19 4H18.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Chat.svelte b/src/lib/components/layout/Sidebar/icons/Chat.svelte
new file mode 100644
index 0000000000..e703fa7bae
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Chat.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M3 20.2895V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V15C21 16.1046 20.1046 17 19 17H7.96125C7.35368 17 6.77906 17.2762 6.39951 17.7506L4.06852 20.6643C3.71421 21.1072 3 20.8567 3 20.2895Z"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/ChevronDown.svelte b/src/lib/components/layout/Sidebar/icons/ChevronDown.svelte
new file mode 100644
index 0000000000..3fcdf16154
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/ChevronDown.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/ChevronRight.svelte b/src/lib/components/layout/Sidebar/icons/ChevronRight.svelte
new file mode 100644
index 0000000000..814267bdb7
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/ChevronRight.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Clock.svelte b/src/lib/components/layout/Sidebar/icons/Clock.svelte
new file mode 100644
index 0000000000..da3eb04dd0
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Clock.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M12 6L12 12L18 12"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Code.svelte b/src/lib/components/layout/Sidebar/icons/Code.svelte
new file mode 100644
index 0000000000..5bd582d3f7
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Code.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M13.5 6L10 18.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M6.5 8.5L3 12L6.5 15.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M17.5 8.5L21 12L17.5 15.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Copy.svelte b/src/lib/components/layout/Sidebar/icons/Copy.svelte
new file mode 100644
index 0000000000..bca1c66144
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Copy.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M19.4 20H9.6C9.26863 20 9 19.7314 9 19.4V9.6C9 9.26863 9.26863 9 9.6 9H19.4C19.7314 9 20 9.26863 20 9.6V19.4C20 19.7314 19.7314 20 19.4 20Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M15 9V4.6C15 4.26863 14.7314 4 14.4 4H4.6C4.26863 4 4 4.26863 4 4.6V14.4C4 14.7314 4.26863 15 4.6 15H9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Download.svelte b/src/lib/components/layout/Sidebar/icons/Download.svelte
new file mode 100644
index 0000000000..932626d3e0
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Download.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M6 20L18 20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/EditPencil.svelte b/src/lib/components/layout/Sidebar/icons/EditPencil.svelte
new file mode 100644
index 0000000000..cabb37dac6
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/EditPencil.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M14.3632 5.65156L15.8431 4.17157C16.6242 3.39052 17.8905 3.39052 18.6716 4.17157L20.0858 5.58579C20.8668 6.36683 20.8668 7.63316 20.0858 8.41421L18.6058 9.8942M14.3632 5.65156L4.74749 15.2672C4.41542 15.5993 4.21079 16.0376 4.16947 16.5054L3.92738 19.2459C3.87261 19.8659 4.39148 20.3848 5.0115 20.33L7.75191 20.0879C8.21972 20.0466 8.65806 19.8419 8.99013 19.5099L18.6058 9.8942M14.3632 5.65156L18.6058 9.8942"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/EmojiFace.svelte b/src/lib/components/layout/Sidebar/icons/EmojiFace.svelte
new file mode 100644
index 0000000000..70aa98a957
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/EmojiFace.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M16.5 14.5C16.5 14.5 15 16.5 12 16.5C9 16.5 7.5 14.5 7.5 14.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Eye.svelte b/src/lib/components/layout/Sidebar/icons/Eye.svelte
new file mode 100644
index 0000000000..d88063913a
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Eye.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M3 13C6.6 5 17.4 5 21 13"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14C15 15.6569 13.6569 17 12 17Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Folder.svelte b/src/lib/components/layout/Sidebar/icons/Folder.svelte
new file mode 100644
index 0000000000..f21392af62
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Folder.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H21.4C21.7314 7 22 7.26863 22 7.6V11M2 11V19.4C2 19.7314 2.26863 20 2.6 20H21.4C21.7314 20 22 19.7314 22 19.4V11M2 11H22"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Hashtag.svelte b/src/lib/components/layout/Sidebar/icons/Hashtag.svelte
new file mode 100644
index 0000000000..fbea3ee26a
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Hashtag.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M10 3L6 21" stroke="currentColor" stroke-linecap="round" />
+	<path d="M20.5 16H2.5" stroke="currentColor" stroke-linecap="round" />
+	<path d="M22 7H4" stroke="currentColor" stroke-linecap="round" />
+	<path d="M18 3L14 21" stroke="currentColor" stroke-linecap="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/HelpCircle.svelte b/src/lib/components/layout/Sidebar/icons/HelpCircle.svelte
new file mode 100644
index 0000000000..6fe61b5fb8
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/HelpCircle.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M9 9C9 5.49997 14.5 5.5 14.5 9C14.5 11.5 12 10.9999 12 13.9999"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 18.01L12.01 17.9989"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Key.svelte b/src/lib/components/layout/Sidebar/icons/Key.svelte
new file mode 100644
index 0000000000..abcf9778c6
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Key.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M10 12C10 14.2091 8.20914 16 6 16C3.79086 16 2 14.2091 2 12C2 9.79086 3.79086 8 6 8C8.20914 8 10 9.79086 10 12ZM10 12H22V15"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path d="M18 12V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Lock.svelte b/src/lib/components/layout/Sidebar/icons/Lock.svelte
new file mode 100644
index 0000000000..777cb629ee
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Lock.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/LogOut.svelte b/src/lib/components/layout/Sidebar/icons/LogOut.svelte
new file mode 100644
index 0000000000..1eaf3e6aee
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/LogOut.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M12 12H19M19 12L16 15M19 12L16 9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Map.svelte b/src/lib/components/layout/Sidebar/icons/Map.svelte
new file mode 100644
index 0000000000..22f1d0100a
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Map.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M9 19L3.78974 20.7368C3.40122 20.8663 3 20.5771 3 20.1675L3 5.43246C3 5.1742 3.16526 4.94491 3.41026 4.86325L9 3M9 19L15 21M9 19L9 3M15 21L20.5897 19.1368C20.8347 19.0551 21 18.8258 21 18.5675L21 3.83246C21 3.42292 20.5988 3.13374 20.2103 3.26325L15 5M15 21L15 5M15 5L9 3"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/MoreHorizontal.svelte b/src/lib/components/layout/Sidebar/icons/MoreHorizontal.svelte
new file mode 100644
index 0000000000..9a8bed3671
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/MoreHorizontal.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M20 12.5C20.2761 12.5 20.5 12.2761 20.5 12C20.5 11.7239 20.2761 11.5 20 11.5C19.7239 11.5 19.5 11.7239 19.5 12C19.5 12.2761 19.7239 12.5 20 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M4 12.5C4.27614 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.27614 11.5 4 11.5C3.72386 11.5 3.5 11.7239 3.5 12C3.5 12.2761 3.72386 12.5 4 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Notes.svelte b/src/lib/components/layout/Sidebar/icons/Notes.svelte
new file mode 100644
index 0000000000..2ee82af8dd
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Notes.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M4 19V5C4 3.89543 4.89543 3 6 3H19.4C19.7314 3 20 3.26863 20 3.6V16.7143"
+		stroke="currentColor"
+		stroke-linecap="round"
+	/>
+	<path d="M6 17L20 17" stroke="currentColor" stroke-linecap="round" />
+	<path d="M6 21L20 21" stroke="currentColor" stroke-linecap="round" />
+	<path
+		d="M6 21C4.89543 21 4 20.1046 4 19C4 17.8954 4.89543 17 6 17"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path d="M9 7L15 7" stroke="currentColor" stroke-linecap="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Pin.svelte b/src/lib/components/layout/Sidebar/icons/Pin.svelte
new file mode 100644
index 0000000000..d2342204fb
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Pin.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M9.5 14.5L3 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M5.00007 9.48528L14.1925 18.6777L15.8895 16.9806L15.4974 13.1944L21.0065 8.5211L15.1568 2.67141L10.4834 8.18034L6.69713 7.78823L5.00007 9.48528Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/PinSlash.svelte b/src/lib/components/layout/Sidebar/icons/PinSlash.svelte
new file mode 100644
index 0000000000..aec17f4815
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/PinSlash.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M9.5 14.5L3 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M7.67602 7.8896L6.69713 7.78823L5.00007 9.48528L14.1925 18.6777L15.8895 16.9806L15.7879 16M11.4847 7L15.1568 2.67141L21.0065 8.5211L16.6991 12.175"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path d="M3 3L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Plus.svelte b/src/lib/components/layout/Sidebar/icons/Plus.svelte
new file mode 100644
index 0000000000..52c89c3eef
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Plus.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M6 12H12M18 12H12M12 12V6M12 12V18"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Search.svelte b/src/lib/components/layout/Sidebar/icons/Search.svelte
new file mode 100644
index 0000000000..ddd9d1fcc5
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Search.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M17 17L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Settings.svelte b/src/lib/components/layout/Sidebar/icons/Settings.svelte
new file mode 100644
index 0000000000..a7ec8f6937
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Settings.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path d="M6 9L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M8 13L16 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M10 17L14 17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Share.svelte b/src/lib/components/layout/Sidebar/icons/Share.svelte
new file mode 100644
index 0000000000..410e22dc49
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Share.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C16.3431 16 15 17.3431 15 19C15 20.6569 16.3431 22 18 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 6.65685 16.3431 8 18 8Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M6 15C7.65685 15 9 13.6569 9 12C9 10.3431 7.65685 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path d="M15.5 6.5L8.5 10.5" stroke="currentColor" stroke-width={strokeWidth} />
+	<path d="M8.5 13.5L15.5 17.5" stroke="currentColor" stroke-width={strokeWidth} />
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Sparkles.svelte b/src/lib/components/layout/Sidebar/icons/Sparkles.svelte
new file mode 100644
index 0000000000..b9edb91437
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Sparkles.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M8 15C12.8747 15 15 12.949 15 8C15 12.949 17.1104 15 22 15C17.1104 15 15 17.1104 15 22C15 17.1104 12.8747 15 8 15Z"
+		stroke="currentColor"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M2 6.5C5.13376 6.5 6.5 5.18153 6.5 2C6.5 5.18153 7.85669 6.5 11 6.5C7.85669 6.5 6.5 7.85669 6.5 11C6.5 7.85669 5.13376 6.5 2 6.5Z"
+		stroke="currentColor"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Trash.svelte b/src/lib/components/layout/Sidebar/icons/Trash.svelte
new file mode 100644
index 0000000000..2b78ea8a69
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Trash.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M20 9L18.005 20.3463C17.8369 21.3026 17.0062 22 16.0353 22H7.96474C6.99379 22 6.1631 21.3026 5.99496 20.3463L4 9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M21 6L15.375 6M3 6L8.625 6M8.625 6V4C8.625 2.89543 9.52043 2 10.625 2H13.375C14.4796 2 15.375 2.89543 15.375 4V6M8.625 6L15.375 6"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/User.svelte b/src/lib/components/layout/Sidebar/icons/User.svelte
new file mode 100644
index 0000000000..2fb3a7ceac
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/User.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M5 20V19C5 15.134 8.13401 12 12 12V12C15.866 12 19 15.134 19 19V20"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/Workspace.svelte b/src/lib/components/layout/Sidebar/icons/Workspace.svelte
new file mode 100644
index 0000000000..645175e888
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/Workspace.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M13.9922 17H16.9922M19.9922 17H16.9922M16.9922 17V14M16.9922 17V20"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M4 9.4V4.6C4 4.26863 4.26863 4 4.6 4H9.4C9.73137 4 10 4.26863 10 4.6V9.4C10 9.73137 9.73137 10 9.4 10H4.6C4.26863 10 4 9.73137 4 9.4Z"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+	/>
+	<path
+		d="M4 19.4V14.6C4 14.2686 4.26863 14 4.6 14H9.4C9.73137 14 10 14.2686 10 14.6V19.4C10 19.7314 9.73137 20 9.4 20H4.6C4.26863 20 4 19.7314 4 19.4Z"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+	/>
+	<path
+		d="M14 9.4V4.6C14 4.26863 14.2686 4 14.6 4H19.4C19.7314 4 20 4.26863 20 4.6V9.4C20 9.73137 19.7314 10 19.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+	/>
+</svg>
diff --git a/src/lib/components/layout/Sidebar/icons/XMark.svelte b/src/lib/components/layout/Sidebar/icons/XMark.svelte
new file mode 100644
index 0000000000..bd9cfd12ea
--- /dev/null
+++ b/src/lib/components/layout/Sidebar/icons/XMark.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	fill="none"
+>
+	<path
+		d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index 13a060bbd7..eecf4f7312 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -1295,6 +1295,7 @@
 	"Keep in Sidebar": "",
 	"Key": "",
 	"Key is required": "",
+	"Keyboard": "",
 	"Keyboard Shortcuts": "",
 	"Knowledge": "",
 	"Knowledge Access": "",