diff --git a/src/lib/components/imagePreview.svelte b/src/lib/components/imagePreview.svelte
new file mode 100644
index 000000000..5993df089
--- /dev/null
+++ b/src/lib/components/imagePreview.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+
+    export let darkSrc: string;
+    export let lightSrc: string;
+    export let alt: string;
+</script>
+
+<a
+    href={$app.themeInUse === 'dark' ? darkSrc : lightSrc}
+    class="file-preview is-with-image"
+    style="inline-size: 100%; block-size: 100%;"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="open file in new window">
+    <div class="file-preview-image">
+        <img src={$app.themeInUse === 'dark' ? darkSrc : lightSrc} {alt} />
+    </div>
+    <div class="file-preview-content">
+        <div class="avatar">
+            <span class="icon-external-link" aria-hidden="true" />
+        </div>
+    </div>
+</a>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 854ddb8df..685b34d63 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -72,3 +72,4 @@ export { default as FakeModal } from './fakeModal.svelte';
 export { default as RadioBoxes } from './radioBoxes.svelte';
 export { default as ModalWrapper } from './modalWrapper.svelte';
 export { default as ModalSideCol } from './modalSideCol.svelte';
+export { default as ImagePreview } from './imagePreview.svelte';