diff --git a/src/components/files/file-icon.tsx b/src/components/files/file-icon.tsx
new file mode 100644
index 00000000..82c3e2e8
--- /dev/null
+++ b/src/components/files/file-icon.tsx
@@ -0,0 +1,30 @@
+import { FileText, Film, Image, Sheet } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+interface FileIconProps {
+  mimeType: string | null;
+  className?: string;
+}
+
+/**
+ * Shared file-type icon mapping. Same colour/glyph palette across FileGrid
+ * and EntityFolderView so rows in the two surfaces read identically.
+ */
+export function FileIcon({ mimeType, className }: FileIconProps) {
+  const base = cn('shrink-0', className ?? 'h-3.5 w-3.5');
+
+  if (!mimeType) return <FileText className={cn(base, 'text-muted-foreground')} />;
+  // eslint-disable-next-line jsx-a11y/alt-text
+  if (mimeType.startsWith('image/')) return <Image className={cn(base, 'text-blue-500')} />;
+  if (mimeType === 'application/pdf') return <FileText className={cn(base, 'text-red-500')} />;
+  if (
+    mimeType === 'application/vnd.ms-excel' ||
+    mimeType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+    mimeType === 'text/csv'
+  ) {
+    return <Sheet className={cn(base, 'text-green-600')} />;
+  }
+  if (mimeType.startsWith('video/')) return <Film className={cn(base, 'text-purple-500')} />;
+  return <FileText className={cn(base, 'text-muted-foreground')} />;
+}