diff --git a/src/components/icons/directory-icon.tsx b/src/components/icons/directory-icon.tsx
index 1b73fa1..de02050 100644
--- a/src/components/icons/directory-icon.tsx
+++ b/src/components/icons/directory-icon.tsx
@@ -1,4 +1,6 @@
-export function DirectoryIcon() {
+import { cn } from "@/lib/utils"
+
+export function DirectoryIcon({ className }: { className?: string }) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -6,7 +8,10 @@ export function DirectoryIcon() {
 			height="24"
 			viewBox="0 0 24 24"
 			fill="currentColor"
-			className="icon icon-tabler icons-tabler-filled icon-tabler-folder text-orange-300"
+			className={cn(
+				"icon icon-tabler icons-tabler-filled icon-tabler-folder text-orange-300",
+				className,
+			)}
 			aria-label="Directory"
 		>
 			<title>Directory</title>
diff --git a/src/components/icons/text-file-icon.tsx b/src/components/icons/text-file-icon.tsx
index 531aded..be1fc69 100644
--- a/src/components/icons/text-file-icon.tsx
+++ b/src/components/icons/text-file-icon.tsx
@@ -1,4 +1,6 @@
-export function TextFileIcon() {
+import { cn } from "@/lib/utils"
+
+export function TextFileIcon({ className }: { className?: string }) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -6,7 +8,10 @@ export function TextFileIcon() {
 			height="24"
 			viewBox="0 0 24 24"
 			fill="currentColor"
-			className="icon icon-tabler icons-tabler-filled icon-tabler-file-text text-blue-300"
+			className={cn(
+				"icon icon-tabler icons-tabler-filled icon-tabler-file-text text-blue-300",
+				className,
+			)}
 		>
 			<title>Text File</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
diff --git a/src/files/file-table.tsx b/src/files/file-table.tsx
index d66d28a..967a772 100644
--- a/src/files/file-table.tsx
+++ b/src/files/file-table.tsx
@@ -83,7 +83,7 @@ const columns: ColumnDef<DirectoryItem>[] = [
 				case "directory":
 					return (
 						<div className="flex items-center gap-2">
-							<DirectoryIcon />
+							<DirectoryIcon className="size-4" />
 							{row.original.doc.name}
 						</div>
 					)
@@ -364,7 +364,7 @@ function NewItemRow() {
 function FileNameCell({ initialName }: { initialName: string }) {
 	return (
 		<div className="flex items-center gap-2">
-			<TextFileIcon />
+			<TextFileIcon className="size-4" />
 			{initialName}
 		</div>
 	)