diff --git a/web/src/components/ResourceIcon.tsx b/web/src/components/ResourceIcon.tsx
index 69b601170..32eb9804c 100644
--- a/web/src/components/ResourceIcon.tsx
+++ b/web/src/components/ResourceIcon.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { getResourceUrl } from "@/utils/resource";
+import { getResourceType, getResourceUrl } from "@/utils/resource";
 import Icon from "./Icon";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import SquareDiv from "./kit/SquareDiv";
@@ -12,7 +12,7 @@ interface Props {
 const ResourceIcon = (props: Props) => {
   const { className, resource } = props;
 
-  if (resource.type.includes("image")) {
+  if (getResourceType(resource).startsWith("image")) {
     const url = getResourceUrl(resource);
     return (
       <SquareDiv key={resource.id} className={classNames("cursor-pointer rounded hover:shadow", className)}>
diff --git a/web/src/utils/resource.ts b/web/src/utils/resource.ts
index 1216a125a..36635effe 100644
--- a/web/src/utils/resource.ts
+++ b/web/src/utils/resource.ts
@@ -7,7 +7,7 @@ export const getResourceUrl = (resource: Resource, withOrigin = true) => {
 };
 
 export const getResourceType = (resource: Resource) => {
-  if (resource.type.startsWith("image") && isImage(resource.type)) {
+  if (isImage(resource.type)) {
     return "image/*";
   } else if (resource.type.startsWith("video")) {
     return "video/*";
@@ -34,5 +34,10 @@ export const getResourceType = (resource: Resource) => {
 
 // isImage returns true if the given mime type is an image.
 export const isImage = (t: string) => {
-  return t === "image/jpeg" || t === "image/png" || t === "image/gif" || t === "image/svg+xml" || t === "image/webp";
+  // Don't show PSDs as images.
+  return t.startsWith("image/") && !isPSD(t);
+};
+
+const isPSD = (t: string) => {
+  return t === "image/vnd.adobe.photoshop" || t === "image/x-photoshop" || t === "image/photoshop";
 };