diff --git a/frappe/public/js/frappe/views/image/image_view.js b/frappe/public/js/frappe/views/image/image_view.js
index 6575d9316a..39734fc3bf 100644
--- a/frappe/public/js/frappe/views/image/image_view.js
+++ b/frappe/public/js/frappe/views/image/image_view.js
@@ -99,7 +99,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 
 		const user = frappe.session.user;
 
-
 		let details = this.item_details_html(item);
 
 		const liked_by = JSON.parse(item._liked_by || "[]");
@@ -108,6 +107,14 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 			? "liked-by"
 			: "text-extra-muted not-liked";
 
+		const expand_button_html = item._image_url
+			? `<div class="zoom-view" data-name="${encoded_name}">
+				<svg class="icon icon-xs">
+					<use xlink:href="#icon-expand"></use>
+				</svg>
+			</div>`
+			: '';
+
 		return `
 			<div class="image-view-item ellipsis">
 				<div class="image-view-header">
@@ -134,9 +141,7 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 							data-name="${encoded_name}"
 						>
 							${_html}
-							<button class="btn btn-default zoom-view" data-name="${encoded_name}">
-								<i class="fa fa-search-plus"></i>
-							</button>
+							${expand_button_html}
 						</div>
 					</a>
 				</div>
@@ -208,7 +213,7 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 			wrapper: this.$result,
 			images_map: this.images_map
 		});
-		this.$result.on('click', '.btn.zoom-view', function (e) {
+		this.$result.on('click', '.zoom-view', function (e) {
 			e.preventDefault();
 			e.stopPropagation();
 			var name = $(this).data().name;
diff --git a/frappe/public/scss/image-view.scss b/frappe/public/scss/image-view.scss
index a059fd12da..f3200c0713 100644
--- a/frappe/public/scss/image-view.scss
+++ b/frappe/public/scss/image-view.scss
@@ -98,9 +98,10 @@
 		}
 
 		.image-view-info {
-			margin-top: 10px;
+			margin-top: 5px;
 			font-size: $font-size-sm;
 			color: var(--grey-600);
+			margin-bottom: 0;
 		}
 
 		.image-view-body {
@@ -117,21 +118,13 @@
 			// margin-bottom: 25px;
 			height: 130px;
 			width: 130px;
-			margin: 0 auto 25px auto;
+			margin: 0 auto;
 		}
 
 		.image-field {
-			// display: flex;
-			// align-content: center;
-			// align-items: center;
-			// justify-content: center;
-			// height: 130px;
-			// width: 130px;
-			// border-radius: $border-radius;
-
 			position: relative;
 			display: block;
-			height: 130px;
+			width: 130px;
 			text-align: center;
 			margin: 0 auto;
 			border-radius: var(--border-radius);
@@ -172,6 +165,7 @@
 			&.no-image {
 				// background-color: var(--blue-50);
 				line-height: 130px;
+				height: 130px;
 				background-color: var(--grey-50);
 				border-radius: $border-radius;
 			}
@@ -190,6 +184,7 @@
 			font-weight: 500;
 			justify-content: start;
 			align-items: center;
+			margin-top: 30px;
 		}
 
 		.placeholder-text {
@@ -199,17 +194,24 @@
 		}
 
 		.zoom-view {
-			width: 24px;
-			height: 24px;
+			width: 18px;
+			height: 18px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			bottom: 5px;
-			right: 5px;
+			bottom: 3px;
+			right: 3px;
 			opacity: 0;
 			font-size: 16px;
-			color: $text-color;
 			position: absolute;
+			background: var(--grey-300);
+			border-radius: $border-radius;
+
+			.icon {
+				use {
+					stroke: $text-color;
+				}
+			}
 
 			// show zoom button on mobile devices
 			// @media (max-width: $screen-xs) {