diff --git a/frontend/src/components/NewDialogWithTypes.vue b/frontend/src/components/NewDialogWithTypes.vue
index bd9818cbb..e83e64ef7 100644
--- a/frontend/src/components/NewDialogWithTypes.vue
+++ b/frontend/src/components/NewDialogWithTypes.vue
@@ -30,7 +30,12 @@ const show = computed({
 						<div
 							class="rounded border p-4 text-gray-500 shadow-sm transition-all group-hover:scale-105"
 						>
-							<FeatherIcon :name="type.icon" class="h-6 w-6 text-gray-500" />
+							<FeatherIcon
+								v-if="type.icon"
+								:name="type.icon"
+								class="h-6 w-6 text-gray-500"
+							/>
+							<img v-if="type.imgSrc" :src="type.imgSrc" class="h-6 w-6" />
 						</div>
 						<div>
 							<div class="flex items-center space-x-2">
diff --git a/frontend/src/datasource/DataSourceList.vue b/frontend/src/datasource/DataSourceList.vue
index 45ca12c23..1878594ba 100644
--- a/frontend/src/datasource/DataSourceList.vue
+++ b/frontend/src/datasource/DataSourceList.vue
@@ -101,7 +101,7 @@ const databaseTypes = ref([
 	{
 		label: 'MariaDB',
 		description: 'Connect to a MariaDB database',
-		icon: 'database',
+		imgSrc: '/src/assets/MariaDBIcon.png',
 		onClick: () => {
 			new_dialog.value = false
 			showConnectMariaDBDialog.value = true
@@ -110,7 +110,7 @@ const databaseTypes = ref([
 	{
 		label: 'PostgreSQL',
 		description: 'Connect to a PostgreSQL database',
-		icon: 'database',
+		imgSrc: '/src/assets/PostgreSQLIcon.png',
 		onClick: () => {
 			new_dialog.value = false
 			showConnectPostgreDBDialog.value = true
@@ -119,7 +119,7 @@ const databaseTypes = ref([
 	{
 		label: 'CSV',
 		description: 'Upload a CSV file',
-		icon: 'file',
+		imgSrc: '/src/assets/SheetIcon.png',
 		onClick: () => {
 			new_dialog.value = false
 			showCSVFileUploadDialog.value = true