diff --git a/frappe/public/js/frappe/form/grid_pagination.js b/frappe/public/js/frappe/form/grid_pagination.js
index fd47192a62..0920bf5981 100644
--- a/frappe/public/js/frappe/form/grid_pagination.js
+++ b/frappe/public/js/frappe/form/grid_pagination.js
@@ -67,19 +67,17 @@ export default class GridPagination {
 		let page_text_html = `<div class="page-text">
 				<span class="current-page-number page-number">${__(this.page_index)}</span>
 				<span>${__('of')}</span>
-				<span class="total-page-number page-number"> ${__(this.total_pages)} </span> 
+				<span class="total-page-number page-number"> ${__(this.total_pages)} </span>
 			</div>`;
 
-		return $(`<button class="btn btn-default btn-xs first-page"">
-				<span class="first-page-icon">&laquo;</span>
+		return $(`<button class="btn btn-secondary btn-xs first-page"">
 				<span>${__('First')}</span>
 			</button>
-			<a class="prev-page">&#8249;</a>
+			<button class="btn btn-secondary btn-xs prev-page">${frappe.utils.icon('left', 'xs')}</button>
 			${page_text_html}
-			<a class="next-page">&#8250;</a>
-			<button class="btn btn-default btn-xs last-page">
+			<button class="btn btn-secondary btn-xs next-page">${frappe.utils.icon('right', 'xs')}</button>
+			<button class="btn btn-secondary btn-xs last-page">
 				<span>${__('Last')}</span>
-				<span class="first-page-icon">&raquo;</span>
 			</button>`);
 	}
 
diff --git a/frappe/public/scss/grid.scss b/frappe/public/scss/grid.scss
index a88a2d6dba..0cab01206c 100644
--- a/frappe/public/scss/grid.scss
+++ b/frappe/public/scss/grid.scss
@@ -342,16 +342,18 @@
 }
 
 .prev-page, .next-page {
-	font-size: 14px;
+	.icon {
+		width: 10px;
+	}
 }
 
-a.prev-page {
-	padding-left: 15px;
+.prev-page {
+	margin-left: var(--margin-xs);
 	text-decoration: none;
 }
 
-a.next-page {
-	padding-right: 15px;
+.next-page {
+	margin-right: var(--margin-xs);
 	text-decoration: none;
 }