diff --git a/frontend/src/core/utils/files.tsx b/frontend/src/core/utils/files.tsx
index 409dda5e2e..956c271818 100644
--- a/frontend/src/core/utils/files.tsx
+++ b/frontend/src/core/utils/files.tsx
@@ -234,6 +234,8 @@ export function getFileIcon(filepath: string, className?: string) {
     case "jpg":
     case "jpeg":
     case "png":
+    case "apng":
+    case "avif":
     case "gif":
     case "bmp":
     case "tiff":
@@ -254,6 +256,7 @@ export function getFileIcon(filepath: string, className?: string) {
     case "mp4":
     case "mov":
     case "m4v":
+    case "webm":
       return <FilePlayIcon className={className} />;
     default:
       if (isCodeFile) {
diff --git a/frontend/tests/unit/core/utils/files.test.ts b/frontend/tests/unit/core/utils/files.test.ts
new file mode 100644
index 0000000000..f10aa44ad8
--- /dev/null
+++ b/frontend/tests/unit/core/utils/files.test.ts
@@ -0,0 +1,17 @@
+import { expect, test } from "@rstest/core";
+import { FilePlayIcon, FileTextIcon, ImageIcon } from "lucide-react";
+
+import { canBrowserPreviewFile, getFileIcon } from "@/core/utils/files";
+
+test.each([
+  ["animation.apng", ImageIcon],
+  ["photo.avif", ImageIcon],
+  ["clip.webm", FilePlayIcon],
+])("uses a media icon for previewable %s", (filepath, icon) => {
+  expect(canBrowserPreviewFile(filepath)).toBe(true);
+  expect(getFileIcon(filepath).type).toBe(icon);
+});
+
+test("keeps the document icon for an unknown extension", () => {
+  expect(getFileIcon("data.unknown").type).toBe(FileTextIcon);
+});