diff --git a/interface/app/$libraryId/Explorer/DismissibleNotice.tsx b/interface/app/$libraryId/Explorer/DismissibleNotice.tsx
index f4c88ecc7..8c0caeec9 100644
--- a/interface/app/$libraryId/Explorer/DismissibleNotice.tsx
+++ b/interface/app/$libraryId/Explorer/DismissibleNotice.tsx
@@ -1,31 +1,20 @@
-import {
-	Collection,
-	Collection_Light,
-	Image,
-	Image_Light,
-	Video,
-	Video_Light
-} from '@sd/assets/icons';
 import { ReactNode } from 'react';
 import { ExplorerLayout } from '@sd/client';
+import { Icon } from '~/components';
 import DismissibleNotice from '~/components/DismissibleNotice';
-import { useIsDark } from '~/hooks';
 import { dismissibleNoticeStore } from '~/hooks/useDismissibleNoticeStore';
 
 import { useExplorerContext } from './Context';
-import { useExplorerStore } from './store';
 
 const MediaViewIcon = () => {
-	const isDark = useIsDark();
-
 	return (
 		<div className="relative ml-3 mr-10 h-14 w-14 shrink-0">
-			<img
-				src={isDark ? Image : Image_Light}
+			<Icon
+				name="Image"
 				className="absolute -top-1 left-6 h-14 w-14 rotate-6 overflow-hidden"
 			/>
-			<img
-				src={isDark ? Video : Video_Light}
+			<Icon
+				name="Video"
 				className="absolute top-2 z-10 h-14 w-14 -rotate-6 overflow-hidden"
 			/>
 		</div>
@@ -33,11 +22,9 @@ const MediaViewIcon = () => {
 };
 
 const CollectionIcon = () => {
-	const isDark = useIsDark();
-
 	return (
 		<div className="ml-3 mr-4 h-14 w-14 shrink-0">
-			<img src={isDark ? Collection : Collection_Light} />
+			<Icon name="Collection" />
 		</div>
 	);
 };
diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx
index ec97b5e28..f53659151 100644
--- a/interface/app/$libraryId/Explorer/Inspector/index.tsx
+++ b/interface/app/$libraryId/Explorer/Inspector/index.tsx
@@ -6,13 +6,12 @@ import {
 	Eraser,
 	FolderOpen,
 	Hash,
-	Icon,
 	Link,
 	Lock,
 	Path,
+	Icon as PhosphorIcon,
 	Snowflake
 } from '@phosphor-icons/react';
-import { Image, Image_Light } from '@sd/assets/icons';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import {
@@ -44,10 +43,10 @@ import {
 } from '@sd/client';
 import { Button, Divider, DropdownMenu, toast, Tooltip, tw } from '@sd/ui';
 import { LibraryIdParamsSchema } from '~/app/route-schemas';
-import { useIsDark, useZodRouteParams } from '~/hooks';
+import { Folder, Icon } from '~/components';
+import { useZodRouteParams } from '~/hooks';
 import { isNonEmpty } from '~/util';
 
-import { Folder } from '../../../../components';
 import { useExplorerContext } from '../Context';
 import AssignTagMenuItems from '../ContextMenu/AssignTagMenuItems';
 import { FileThumb } from '../FilePath/Thumb';
@@ -91,7 +90,6 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
 	({ showThumbnail = true, style, ...props }, ref) => {
 		const explorer = useExplorerContext();
 
-		const isDark = useIsDark();
 		const pathname = useLocation().pathname;
 
 		const selectedItems = useMemo(() => [...explorer.selectedItems], [explorer.selectedItems]);
@@ -112,7 +110,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
 							{isNonEmpty(selectedItems) ? (
 								<Thumbnails items={selectedItems} />
 							) : (
-								<img src={isDark ? Image : Image_Light} />
+								<Icon name="Image" />
 							)}
 						</div>
 					)}
@@ -535,7 +533,7 @@ const MultiItemMetadata = ({ items }: { items: ExplorerItem[] }) => {
 };
 
 interface MetaDataProps {
-	icon?: Icon;
+	icon?: PhosphorIcon;
 	label: string;
 	value: ReactNode;
 	tooltipValue?: ReactNode;
diff --git a/interface/app/$libraryId/Explorer/View/ExplorerPath.tsx b/interface/app/$libraryId/Explorer/View/ExplorerPath.tsx
index a581bebfc..3935c7673 100644
--- a/interface/app/$libraryId/Explorer/View/ExplorerPath.tsx
+++ b/interface/app/$libraryId/Explorer/View/ExplorerPath.tsx
@@ -1,11 +1,11 @@
 import { CaretRight } from '@phosphor-icons/react';
-import { getIcon } from '@sd/assets/util';
 import clsx from 'clsx';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useMatch } from 'react-router';
 import { ExplorerItem } from '@sd/client';
 import { SearchParamsSchema } from '~/app/route-schemas';
-import { useIsDark, useOperatingSystem, useZodSearchParams } from '~/hooks';
+import { Icon } from '~/components';
+import { useOperatingSystem, useZodSearchParams } from '~/hooks';
 
 import { useExplorerContext } from '../Context';
 import { FileThumb } from '../FilePath/Thumb';
@@ -14,7 +14,6 @@ import { useExplorerSearchParams } from '../util';
 export const PATH_BAR_HEIGHT = 32;
 
 export const ExplorerPath = memo(() => {
-	const isDark = useIsDark();
 	const isEphemeralLocation = useMatch('/:libraryId/ephemeral/:ephemeralId');
 	const os = useOperatingSystem();
 	const realOs = useOperatingSystem(true);
@@ -101,7 +100,7 @@ export const ExplorerPath = memo(() => {
 							index !== data.length - 1 && ' cursor-pointer hover:brightness-125'
 						)}
 					>
-						<img src={getIcon('Folder', isDark)} alt="folder" className="h-4 w-4" />
+						<Icon name="Folder" size={16} alt="Folder" />
 						<span className="max-w-xs truncate">{p.name}</span>
 						{index !== (data?.length as number) - 1 && (
 							<CaretRight weight="bold" size={10} />
diff --git a/interface/app/$libraryId/KeyManager/index.tsx b/interface/app/$libraryId/KeyManager/index.tsx
index 08df1b393..94c064e49 100644
--- a/interface/app/$libraryId/KeyManager/index.tsx
+++ b/interface/app/$libraryId/KeyManager/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable tailwindcss/classnames-order */
-import { Keys } from '@sd/assets/icons';
 import { Button, Tooltip } from '@sd/ui';
+import { Icon } from '~/components';
 
 export function KeyManager() {
 	// const isUnlocked = useLibraryQuery(['keys.isUnlocked']);
@@ -9,7 +9,7 @@ export function KeyManager() {
 	return (
 		<div className="flex h-full max-w-[300px] flex-col">
 			<div className="flex w-full flex-col items-center p-4">
-				<img src={Keys} className="h-14 w-14" />
+				<Icon name="Keys" size={56} />
 				<span className="text-lg font-bold">Key Manager</span>
 				<span className="mt-2 text-center text-ink-dull">
 					Create encryption keys, mount and unmount your keys to see files decrypted on
diff --git a/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx b/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx
index d503a2aa8..1e84d2dd8 100644
--- a/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx
@@ -1,16 +1,15 @@
 import { EjectSimple } from '@phosphor-icons/react';
-import { Drive, Globe, HDD, Home, SD } from '@sd/assets/icons';
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { useBridgeQuery, useLibraryQuery } from '@sd/client';
 import { Button, tw } from '@sd/ui';
+import { Icon, IconName } from '~/components';
 import { usePlatform } from '~/util/Platform';
 
 import SidebarLink from './Link';
 import Section from './Section';
 import SeeMore from './SeeMore';
 
-const SidebarIcon = tw.img`mr-1 h-5 w-5`;
 const Name = tw.span`truncate`;
 
 const EjectButton = ({ className }: { className?: string }) => (
@@ -19,6 +18,10 @@ const EjectButton = ({ className }: { className?: string }) => (
 	</Button>
 );
 
+const SidebarIcon = ({ name }: { name: IconName }) => {
+	return <Icon name={name} size={20} className="mr-1" />;
+};
+
 export const EphemeralSection = () => {
 	const [home, setHome] = useState<string | null>(null);
 	const platform = usePlatform();
@@ -87,7 +90,7 @@ export const EphemeralSection = () => {
 									to={`network/34`}
 									key={index}
 								>
-									<SidebarIcon src={Globe} />
+									<SidebarIcon name="Globe" />
 									<Name>Network</Name>
 								</SidebarLink>
 							);
@@ -100,7 +103,7 @@ export const EphemeralSection = () => {
 									className="group relative w-full border border-transparent"
 									key={index}
 								>
-									<SidebarIcon src={Home} />
+									<SidebarIcon name="Home" />
 									<Name>Home</Name>
 								</SidebarLink>
 							);
@@ -127,12 +130,12 @@ export const EphemeralSection = () => {
 									className="group relative w-full border border-transparent"
 								>
 									<SidebarIcon
-										src={
+										name={
 											item.volume.file_system === 'exfat'
-												? SD
+												? 'SD'
 												: item.volume.name === 'Macintosh HD'
-												? HDD
-												: Drive
+												? 'HDD'
+												: 'Drive'
 										}
 									/>
 									<Name>{name}</Name>
diff --git a/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx b/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx
index a28dd7c66..534b592c1 100644
--- a/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx
@@ -1,19 +1,17 @@
 import { EjectSimple } from '@phosphor-icons/react';
-import { Laptop } from '@sd/assets/icons';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import {
 	arraysEqual,
 	useBridgeQuery,
-	useDebugState,
 	useFeatureFlag,
 	useLibraryQuery,
 	useOnlineLocations
 } from '@sd/client';
 import { Button, Tooltip } from '@sd/ui';
 import { AddLocationButton } from '~/app/$libraryId/settings/library/locations/AddLocationButton';
-import { Folder, SubtleButton } from '~/components';
+import { Icon, SubtleButton } from '~/components';
 
 import SidebarLink from './Link';
 import LocationsContextMenu from './LocationsContextMenu';
@@ -50,7 +48,6 @@ const EjectButton = ({ className }: { className?: string }) => (
 );
 
 export const LibrarySection = () => {
-	const debugState = useDebugState();
 	const node = useBridgeQuery(['nodeState']);
 	const locationsQuery = useLibraryQuery(['locations.list'], { keepPreviousData: true });
 	const tags = useLibraryQuery(['tags.list'], { keepPreviousData: true });
@@ -91,7 +88,7 @@ export const LibrarySection = () => {
 						to={`node/${node.data.id}`}
 						key={node.data.id}
 					>
-						<img src={Laptop} className="mr-1 h-5 w-5" />
+						<Icon name="Laptop" size={20} className="mr-1" />
 						<span className="truncate">{node.data.name}</span>
 					</SidebarLink>
 				)}
@@ -134,7 +131,7 @@ export const LibrarySection = () => {
 								to={`location/${location.id}`}
 							>
 								<div className="relative -mt-0.5 mr-1 shrink-0 grow-0">
-									<Folder size={18} />
+									<Icon name="Folder" size={18} />
 									<div
 										className={clsx(
 											'absolute bottom-0.5 right-0 h-1.5 w-1.5 rounded-full',
diff --git a/interface/app/$libraryId/ephemeral.tsx b/interface/app/$libraryId/ephemeral.tsx
index 3f19e2b58..1e8b0405c 100644
--- a/interface/app/$libraryId/ephemeral.tsx
+++ b/interface/app/$libraryId/ephemeral.tsx
@@ -29,6 +29,7 @@ import {
 } from './Explorer/store';
 import { DefaultTopBarOptions } from './Explorer/TopBarOptions';
 import { useExplorer, useExplorerSettings } from './Explorer/useExplorer';
+import { EmptyNotice } from './Explorer/View';
 import { AddLocationButton } from './settings/library/locations/AddLocationButton';
 import { TOP_BAR_HEIGHT } from './TopBar';
 import { TopBarPortal } from './TopBar/Portal';
@@ -220,7 +221,15 @@ const EphemeralExplorer = memo((props: { args: PathParams }) => {
 				right={<DefaultTopBarOptions />}
 				noSearch={true}
 			/>
-			<Explorer />
+			<Explorer
+				emptyNotice={
+					<EmptyNotice
+						loading={query.isFetching}
+						icon={<Icon name="FolderNoSpace" size={128} />}
+						message="No files found here"
+					/>
+				}
+			/>
 		</ExplorerContextProvider>
 	);
 });
diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
index 7d7e1fe29..178a77a40 100644
--- a/interface/app/$libraryId/location/$id.tsx
+++ b/interface/app/$libraryId/location/$id.tsx
@@ -1,5 +1,4 @@
 import { Info } from '@phosphor-icons/react';
-import { getIcon, iconNames } from '@sd/assets/util';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { stringify } from 'uuid';
@@ -18,7 +17,7 @@ import {
 } from '@sd/client';
 import { Loader, Tooltip } from '@sd/ui';
 import { LocationIdParamsSchema } from '~/app/route-schemas';
-import { Folder } from '~/components';
+import { Folder, Icon } from '~/components';
 import { useIsLocationIndexing, useKeyDeleteFile, useZodRouteParams } from '~/hooks';
 
 import Explorer from '../Explorer';
@@ -155,9 +154,7 @@ export const Component = () => {
 					emptyNotice={
 						<EmptyNotice
 							loading={location.isFetching}
-							icon={
-								<img className="h-32 w-32" src={getIcon(iconNames.FolderNoSpace)} />
-							}
+							icon={<Icon name="FolderNoSpace" size={128} />}
 							message="No files found here"
 						/>
 					}
diff --git a/interface/app/$libraryId/network.tsx b/interface/app/$libraryId/network.tsx
index 882d5eed9..e76e6e1d5 100644
--- a/interface/app/$libraryId/network.tsx
+++ b/interface/app/$libraryId/network.tsx
@@ -1,8 +1,8 @@
-import { Globe } from '@sd/assets/icons';
 import { memo, Suspense, useDeferredValue, useMemo } from 'react';
 import { useDiscoveredPeers } from '@sd/client';
 import { PathParamsSchema, type PathParams } from '~/app/route-schemas';
-import { useOperatingSystem, useZodSearchParams } from '~/hooks';
+import { Icon } from '~/components';
+import { useZodSearchParams } from '~/hooks';
 
 import Explorer from './Explorer';
 import { ExplorerContextProvider } from './Explorer/Context';
@@ -12,8 +12,6 @@ import { useExplorer, useExplorerSettings } from './Explorer/useExplorer';
 import { TopBarPortal } from './TopBar/Portal';
 
 const Network = memo((props: { args: PathParams }) => {
-	const os = useOperatingSystem();
-
 	const discoveredPeers = useDiscoveredPeers();
 	const peers = useMemo(() => Array.from(discoveredPeers.values()), [discoveredPeers]);
 
@@ -50,7 +48,7 @@ const Network = memo((props: { args: PathParams }) => {
 			<TopBarPortal
 				left={
 					<div className="flex items-center gap-2">
-						<img src={Globe} className="mt-[-1px] h-[22px] w-[22px]" />
+						<Icon name="Globe" size={22} />
 						<span className="truncate text-sm font-medium">Network</span>
 					</div>
 				}
@@ -60,7 +58,7 @@ const Network = memo((props: { args: PathParams }) => {
 			<Explorer
 				emptyNotice={
 					<div className="flex h-full flex-col items-center justify-center text-white">
-						<img src={Globe} className="h-32 w-32" />
+						<Icon name="Globe" size={128} />
 						<h1 className="mt-4 text-lg font-bold">Your Local Network</h1>
 						<p className="mt-1 max-w-sm text-center text-sm text-ink-dull">
 							Other Spacedrive nodes on your LAN will appear here, along with your
diff --git a/interface/app/$libraryId/node/$id.tsx b/interface/app/$libraryId/node/$id.tsx
index 433d1c6ab..3914c96bc 100644
--- a/interface/app/$libraryId/node/$id.tsx
+++ b/interface/app/$libraryId/node/$id.tsx
@@ -1,7 +1,7 @@
-import { Laptop } from '@sd/assets/icons';
 import { useMemo } from 'react';
 import { useBridgeQuery, useLibraryQuery } from '@sd/client';
 import { NodeIdParamsSchema } from '~/app/route-schemas';
+import { Icon } from '~/components';
 import { useZodRouteParams } from '~/hooks';
 
 import Explorer from '../Explorer';
@@ -47,7 +47,7 @@ export const Component = () => {
 			<TopBarPortal
 				left={
 					<div className="flex items-center gap-2">
-						<img src={Laptop} className="mt-[-1px] h-6 w-6" />
+						<Icon name="Laptop" size={24} className="mt-[-1px]" />
 						<span className="truncate text-sm font-medium">
 							{nodeState.data?.name || 'Node'}
 						</span>
diff --git a/interface/app/$libraryId/overview/data.ts b/interface/app/$libraryId/overview/data.ts
index 363350260..e4aa2f221 100644
--- a/interface/app/$libraryId/overview/data.ts
+++ b/interface/app/$libraryId/overview/data.ts
@@ -8,8 +8,7 @@ import {
 	ObjectKindEnum,
 	ObjectOrder,
 	useLibraryContext,
-	useLibraryQuery,
-	useRspcLibraryContext
+	useLibraryQuery
 } from '@sd/client';
 
 import { useObjectsInfiniteQuery, usePathsInfiniteQuery } from '../Explorer/queries';
diff --git a/interface/app/$libraryId/settings/client/general.tsx b/interface/app/$libraryId/settings/client/general.tsx
index 707cec6f7..94d44ce87 100644
--- a/interface/app/$libraryId/settings/client/general.tsx
+++ b/interface/app/$libraryId/settings/client/general.tsx
@@ -1,4 +1,3 @@
-import { Laptop } from '@sd/assets/icons';
 import clsx from 'clsx';
 import { useEffect } from 'react';
 import { Controller } from 'react-hook-form';
@@ -12,6 +11,7 @@ import {
 	useZodForm
 } from '@sd/client';
 import { Button, Card, Input, Select, SelectOption, Switch, tw, z } from '@sd/ui';
+import { Icon } from '~/components';
 import { useDebouncedFormWatch } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
@@ -90,8 +90,7 @@ export const Component = () => {
 
 					<hr className="mb-4 mt-2 flex w-full border-app-line" />
 					<div className="flex w-full items-center gap-5">
-						<img src={Laptop} className="mt-2 h-14 w-14" />
-
+						<Icon name="Laptop" className="mt-2 h-14 w-14" />
 						<div className="flex flex-col">
 							<NodeSettingLabel>Node Name</NodeSettingLabel>
 							<Input
diff --git a/interface/app/$libraryId/settings/node/libraries/ListItem.tsx b/interface/app/$libraryId/settings/node/libraries/ListItem.tsx
index 2a537279c..20d2e1858 100644
--- a/interface/app/$libraryId/settings/node/libraries/ListItem.tsx
+++ b/interface/app/$libraryId/settings/node/libraries/ListItem.tsx
@@ -1,8 +1,7 @@
 import { Pencil, Trash } from '@phosphor-icons/react';
-import { Database, Database_Light } from '@sd/assets/icons';
 import { LibraryConfigWrapped } from '@sd/client';
 import { Button, ButtonLink, Card, dialogManager, Tooltip } from '@sd/ui';
-import { useIsDark } from '~/hooks';
+import { Icon } from '~/components';
 
 import DeleteDialog from './DeleteDialog';
 
@@ -12,18 +11,10 @@ interface Props {
 }
 
 export default (props: Props) => {
-	const isDark = useIsDark();
-
 	return (
 		<Card className="items-center">
 			{/* <DotsSixVertical weight="bold" className="mt-[15px] mr-3 opacity-30" /> */}
-			<img
-				className="mr-3"
-				width={30}
-				height={30}
-				src={isDark ? Database : Database_Light}
-				alt="Database icon"
-			/>
+			<Icon name="Database" alt="Database icon" size={30} className="mr-3" />
 			<div className="my-0.5 flex-1">
 				<h3 className="font-semibold">
 					{props.library.config.name}
diff --git a/interface/app/$libraryId/tag/$id.tsx b/interface/app/$libraryId/tag/$id.tsx
index 243b2a259..70303eb35 100644
--- a/interface/app/$libraryId/tag/$id.tsx
+++ b/interface/app/$libraryId/tag/$id.tsx
@@ -1,7 +1,7 @@
-import { getIcon, iconNames } from '@sd/assets/util';
 import { useCallback, useMemo } from 'react';
 import { ObjectFilterArgs, ObjectOrder, useLibraryContext, useLibraryQuery } from '@sd/client';
 import { LocationIdParamsSchema } from '~/app/route-schemas';
+import { Icon } from '~/components';
 import { useZodRouteParams } from '~/hooks';
 
 import Explorer from '../Explorer';
@@ -48,7 +48,7 @@ export const Component = () => {
 				emptyNotice={
 					<EmptyNotice
 						loading={query.isFetching}
-						icon={<img className="h-32 w-32" src={getIcon(iconNames.Tags)} />}
+						icon={<Icon name="Tags" size={128} />}
 						message="No items assigned to this tag."
 					/>
 				}
diff --git a/interface/app/onboarding/new-library.tsx b/interface/app/onboarding/new-library.tsx
index 149779a6a..fd6b1bbd1 100644
--- a/interface/app/onboarding/new-library.tsx
+++ b/interface/app/onboarding/new-library.tsx
@@ -1,14 +1,9 @@
-import { Database } from '@sd/assets/icons';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { Button, Form, InputField } from '@sd/ui';
+import { Icon } from '~/components';
 
-import {
-	OnboardingContainer,
-	OnboardingDescription,
-	OnboardingImg,
-	OnboardingTitle
-} from './components';
+import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './components';
 import { useOnboardingContext } from './context';
 
 export default function OnboardingNewLibrary() {
@@ -29,7 +24,7 @@ export default function OnboardingNewLibrary() {
 			})}
 		>
 			<OnboardingContainer>
-				<OnboardingImg src={Database} />
+				<Icon name="Database" size={80} className="mb-2" />
 				<OnboardingTitle>Create a Library</OnboardingTitle>
 				<OnboardingDescription>
 					Libraries are a secure, on-device database. Your files remain where they are,
diff --git a/interface/components/Icon.tsx b/interface/components/Icon.tsx
index 61d4feb21..838d3a843 100644
--- a/interface/components/Icon.tsx
+++ b/interface/components/Icon.tsx
@@ -1,9 +1,11 @@
 import { getIcon, iconNames } from '@sd/assets/util';
-import { HTMLAttributes } from 'react';
+import { ImgHTMLAttributes } from 'react';
 import { useIsDark } from '~/hooks';
 
-interface Props extends HTMLAttributes<HTMLImageElement> {
-	name: keyof typeof iconNames;
+export type IconName = keyof typeof iconNames;
+
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+	name: IconName;
 	size?: number;
 	theme?: 'dark' | 'light';
 }
diff --git a/packages/assets/icons/Drive_Light.png b/packages/assets/icons/Drive_Light.png
index 9fd08415c..86c0d8352 100644
Binary files a/packages/assets/icons/Drive_Light.png and b/packages/assets/icons/Drive_Light.png differ
diff --git a/packages/assets/icons/FolderNoSpace_Light.png b/packages/assets/icons/FolderNoSpace_Light.png
new file mode 100644
index 000000000..532a82599
Binary files /dev/null and b/packages/assets/icons/FolderNoSpace_Light.png differ
diff --git a/packages/assets/icons/Globe_Light.png b/packages/assets/icons/Globe_Light.png
new file mode 100644
index 000000000..ba2be67c5
Binary files /dev/null and b/packages/assets/icons/Globe_Light.png differ
diff --git a/packages/assets/icons/HDD_Light.png b/packages/assets/icons/HDD_Light.png
new file mode 100644
index 000000000..c20ac457a
Binary files /dev/null and b/packages/assets/icons/HDD_Light.png differ
diff --git a/packages/assets/icons/Home_Light.png b/packages/assets/icons/Home_Light.png
new file mode 100644
index 000000000..158c87711
Binary files /dev/null and b/packages/assets/icons/Home_Light.png differ
diff --git a/packages/assets/icons/Laptop_Light.png b/packages/assets/icons/Laptop_Light.png
index a01017f05..ba6558ddd 100644
Binary files a/packages/assets/icons/Laptop_Light.png and b/packages/assets/icons/Laptop_Light.png differ
diff --git a/packages/assets/icons/SD_Light.png b/packages/assets/icons/SD_Light.png
new file mode 100644
index 000000000..f78946595
Binary files /dev/null and b/packages/assets/icons/SD_Light.png differ
diff --git a/packages/assets/icons/Screenshot_Light.png b/packages/assets/icons/Screenshot_Light.png
new file mode 100644
index 000000000..7cc8ba996
Binary files /dev/null and b/packages/assets/icons/Screenshot_Light.png differ
diff --git a/packages/assets/icons/index.ts b/packages/assets/icons/index.ts
index afe1ee9f2..e66b5b9d0 100644
--- a/packages/assets/icons/index.ts
+++ b/packages/assets/icons/index.ts
@@ -71,15 +71,19 @@ import Folder_Light from './Folder_Light.png';
 import Folder from './Folder.png';
 import FolderGrey_Light from './FolderGrey_Light.png';
 import FolderGrey from './FolderGrey.png';
+import FolderNoSpace_Light from './FolderNoSpace_Light.png';
 import FolderNoSpace from './FolderNoSpace.png';
 import Game_Light from './Game_Light.png';
 import Game from './Game.png';
+import Globe_Light from './Globe_Light.png';
 import Globe from './Globe.png';
 import GlobeAlt from './GlobeAlt.png';
 import GoogleDrive from './GoogleDrive.png';
+import HDD_Light from './HDD_Light.png';
 import HDD from './HDD.png';
 import Heart_Light from './Heart_Light.png';
 import Heart from './Heart.png';
+import Home_Light from './Home_Light.png';
 import Home from './Home.png';
 import Image_Light from './Image_Light.png';
 import Image from './Image.png';
@@ -110,8 +114,10 @@ import Package from './Package.png';
 import PCloud from './PCloud.png';
 import Scrapbook_Light from './Scrapbook_Light.png';
 import Scrapbook from './Scrapbook.png';
+import Screenshot_Light from './Screenshot_Light.png';
 import Screenshot from './Screenshot.png';
 import ScreenshotAlt from './ScreenshotAlt.png';
+import SD_Light from './SD_Light.png';
 import SD from './SD.png';
 import Server_Light from './Server_Light.png';
 import Server from './Server.png';
@@ -159,14 +165,14 @@ export {
 	Box,
 	Collection,
 	Collection_Light,
+	DAV,
 	Database,
 	Database_Light,
-	DAV,
 	DeleteLocation,
 	Document,
+	Document_Light,
 	Document_doc,
 	Document_doc_Light,
-	Document_Light,
 	Document_pdf,
 	Document_pdf_Light,
 	Document_xls,
@@ -176,10 +182,9 @@ export {
 	DriveBackBlaze,
 	DriveBackBlaze_Light,
 	DriveBox,
-	Drivebox_Light,
-	DriveDarker,
 	DriveDAV,
 	DriveDAV_Light,
+	DriveDarker,
 	DriveDropbox,
 	DriveDropbox_Light,
 	DriveGoogleDrive,
@@ -192,6 +197,7 @@ export {
 	DriveOpenStack_Light,
 	DrivePCloud,
 	DrivePCloud_Light,
+	Drivebox_Light,
 	Drive,
 	Drive_Light,
 	Dropbox,
@@ -208,22 +214,26 @@ export {
 	FolderGrey,
 	FolderGrey_Light,
 	FolderNoSpace,
+	FolderNoSpace_Light,
 	Folder_Light,
 	Game,
 	Game_Light,
 	Globe,
 	GlobeAlt,
+	Globe_Light,
 	GoogleDrive,
 	HDD,
+	HDD_Light,
 	Heart,
 	Heart_Light,
 	Home,
+	Home_Light,
 	Image,
 	Image_Light,
 	Key,
+	Key_Light,
 	Keys,
 	Keys_Light,
-	Key_Light,
 	Laptop,
 	Laptop_Light,
 	Link,
@@ -242,14 +252,16 @@ export {
 	Node_Light,
 	OneDrive,
 	OpenStack,
+	PCloud,
 	Package,
 	Package_Light,
-	PCloud,
+	SD,
+	SD_Light,
 	Scrapbook,
 	Scrapbook_Light,
 	Screenshot,
 	ScreenshotAlt,
-	SD,
+	Screenshot_Light,
 	Server,
 	Server_Light,
 	Spacedrop1,
@@ -263,10 +275,10 @@ export {
 	Text,
 	TextAlt,
 	TextAlt_Light,
-	TexturedMesh,
-	TexturedMesh_Light,
 	Text_Light,
 	Text_txt,
+	TexturedMesh,
+	TexturedMesh_Light,
 	Trash,
 	Trash_Light,
 	Undefined,
diff --git a/packages/assets/images/index.ts b/packages/assets/images/index.ts
index fb1af7e08..2b4dabc64 100644
--- a/packages/assets/images/index.ts
+++ b/packages/assets/images/index.ts
@@ -25,6 +25,6 @@ export {
 	BloomTwo,
 	Dropbox,
 	GoogleDrive,
-	iCloud,
-	Mega
+	Mega,
+	iCloud
 };
diff --git a/packages/assets/svgs/ext/Extras/index.ts b/packages/assets/svgs/ext/Extras/index.ts
index 9779d975e..198dbcd3c 100644
--- a/packages/assets/svgs/ext/Extras/index.ts
+++ b/packages/assets/svgs/ext/Extras/index.ts
@@ -374,8 +374,8 @@ export {
 	fsharp,
 	gbl,
 	git,
-	godot,
 	go_package,
+	godot,
 	gradle,
 	gradlebat,
 	gradlekotlin,