diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
index e34faddf0e..26aef36db5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/index.ts
@@ -2,3 +2,4 @@ export * from './input-upload-field.element.js';
 export * from './input-upload-field-file.element.js';
 export * from './input-upload-field-audio.element.js';
 export * from './input-upload-field-video.element.js';
+export * from './input-upload-field-svg.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
index 01aa2d1579..a031456506 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-audio.element.ts
@@ -1,4 +1,3 @@
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-svg.element.ts
new file mode 100644
index 0000000000..1046844e42
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-svg.element.ts
@@ -0,0 +1,45 @@
+import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-input-upload-field-svg')
+export class UmbInputUploadFieldSvgElement extends UmbLitElement {
+	@property({ type: String })
+	path = '';
+
+	render() {
+		if (!this.path) return html`<uui-loader></uui-loader>`;
+
+		return html`<img src=${this.path} alt="svg" />`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				background-color: #fff;
+				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
+				background-repeat: repeat;
+				background-size: 10px 10px;
+				height: 100%;
+				min-height: 240px;
+				position: relative;
+				width: fit-content;
+				max-height: 240px;
+			}
+
+			img {
+				max-width: 100%;
+				max-height: 100%;
+				object-fit: contain;
+				width: auto;
+				height: auto;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-upload-field-svg': UmbInputUploadFieldSvgElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-video.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-video.element.ts
index 7336e71c6d..377cdccedc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-video.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-video.element.ts
@@ -1,4 +1,3 @@
-import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
index be682c09cd..eb0b354760 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
@@ -1,5 +1,6 @@
 import type { TemporaryFileQueueItem } from '../../temporary-file/temporary-file-manager.class.js';
 import { UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import {
 	css,
@@ -19,7 +20,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import './input-upload-field-file.element.js';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
 
 @customElement('umb-input-upload-field')
 export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
@@ -208,6 +208,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderFiles() {
+		console.log('files', this._files);
 		return repeat(
 			this._files,
 			(path) => path,
@@ -248,19 +249,20 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 		// Extract the MIME type from the data URL
 		if (path.startsWith('data:')) {
 			const mimeType = path.substring(5, path.indexOf(';'));
+			if (mimeType === 'image/svg+xml') return 'svg';
 			if (mimeType.startsWith('image/')) return 'image';
 			if (mimeType.startsWith('audio/')) return 'audio';
 			if (mimeType.startsWith('video/')) return 'video';
-			if (mimeType === 'image/svg+xml') return 'svg';
 		}
 
 		// Extract the file extension from the path
 		const extension = path.split('.').pop()?.toLowerCase();
+		console.log('extension', extension, path);
 		if (!extension) return 'file';
+		if (['svg'].includes(extension)) return 'svg';
 		if (['mp3', 'weba', 'oga', 'opus'].includes(extension)) return 'audio';
 		if (['mp4', 'mov', 'webm', 'ogv'].includes(extension)) return 'video';
 		if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'image';
-		if (['svg'].includes(extension)) return 'svg';
 
 		return 'file';
 	}