diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 7c6347331..d30823c5a 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import svg from 'vite-plugin-svgr';
+import svgr from 'vite-plugin-svgr';
 
 import { name, version } from './package.json';
 
@@ -14,7 +14,11 @@ export default defineConfig({
 		react({
 			jsxRuntime: 'classic'
 		}),
-		svg({ svgrOptions: { icon: true } })
+		svgr({
+			svgrOptions: {
+				icon: true
+			}
+		})
 	],
 	root: 'src',
 	publicDir: '../../packages/interface/src/assets',
diff --git a/apps/landing/src/pages/roadmap.tsx b/apps/landing/src/pages/roadmap.tsx
index 67322ba78..cce420987 100644
--- a/apps/landing/src/pages/roadmap.tsx
+++ b/apps/landing/src/pages/roadmap.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { ReactComponent as Content } from '~/docs/product/roadmap.md';
 
-import { ReactComponent as Folder } from '../../../../packages/interface/src/assets/svg/folder.svg';
+import { Folder } from '../../../../packages/interface/src/components/icons/Folder';
 import Markdown from '../components/Markdown';
 
 function Page() {
@@ -13,7 +13,7 @@ function Page() {
 				<meta name="description" content="What can Spacedrive do?" />
 			</Helmet>
 			<div className="w-24 mb-10">
-				<Folder className="" />
+				<Folder />
 			</div>
 			<Content />
 		</Markdown>
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index 347ad86a3..a120b192f 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 
 import { AppPropsContext } from '../../App';
 import icons from '../../assets/icons';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import { Folder } from '../icons/Folder';
 
 export default function FileThumb(props: {
 	file: FilePath;
@@ -17,7 +17,7 @@ export default function FileThumb(props: {
 	const { data: client } = useBridgeQuery('NodeGetState');
 
 	if (props.file.is_dir) {
-		return <Folder className="max-w-[170px]" />;
+		return <Folder className="max-w-[20px]" />;
 	}
 
 	if (client?.data_path && (props.file.file?.has_thumbnail || props.hasThumbnailOverride)) {
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 231b45b27..fca0cc3a0 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -8,9 +8,8 @@ import React, { useContext } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { AppPropsContext } from '../../App';
-import { ReactComponent as FolderWhite } from '../../assets/svg/folder-white.svg';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
 import { useNodeStore } from '../device/Stores';
+import { Folder } from '../icons/Folder';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { DefaultProps } from '../primitive/types';
@@ -172,7 +171,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 										)}
 									>
 										<div className="w-[18px] mr-2 -mt-0.5">
-											<FolderWhite className={clsx(!isActive && 'hidden')} />
+											<Folder className={clsx(!isActive && 'hidden')} white />
 											<Folder className={clsx(isActive && 'hidden')} />
 										</div>
 										{location.name}
diff --git a/packages/interface/src/components/icons/Folder.tsx b/packages/interface/src/components/icons/Folder.tsx
new file mode 100644
index 000000000..d0751cbcb
--- /dev/null
+++ b/packages/interface/src/components/icons/Folder.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import folderWhiteSvg from '../../assets/svg/folder-white.svg';
+import folderSvg from '../../assets/svg/folder.svg';
+
+interface FolderProps {
+	/**
+	 * Append additional classes to the underlying SVG
+	 */
+	className?: string;
+
+	/**
+	 * Render a white folder icon
+	 */
+	white?: boolean;
+}
+
+export function Folder(props: FolderProps) {
+	return (
+		<img
+			className={props.className}
+			src={props.white ? folderWhiteSvg : folderSvg}
+			alt="Folder icon"
+		/>
+	);
+}