diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js
index 3544fedd94..d5f406925f 100644
--- a/frappe/public/js/frappe/list/base_list.js
+++ b/frappe/public/js/frappe/list/base_list.js
@@ -765,9 +765,7 @@ class FilterArea {
 		$(`<div class="filter-selector">
 			<button class="btn btn-default btn-sm filter-button">
 				<span class="filter-icon">
-					<svg class="icon icon-sm">
-						<use xlink:href="#icon-filter"></use>
-					</svg>
+					${frappe.utils.icon('filter')}
 				</span>
 				<span class="button-label">
 					${__("Filter")}
diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js
index c561606dcd..0b79e88a7b 100644
--- a/frappe/public/js/frappe/list/list_view.js
+++ b/frappe/public/js/frappe/list/list_view.js
@@ -831,9 +831,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		const comment_count = `<span class="${
 			!doc._comment_count ? "text-extra-muted" : ""
 		} comment-count">
-				<svg class="icon icon-sm">
-					<use xlink:href="#icon-small-message"></use>
-				</svg>
+				${frappe.utils.icon('small-message')}
 				${doc._comment_count > 99 ? "99+" : doc._comment_count}
 			</span>`;
 
diff --git a/frappe/public/js/frappe/ui/group_by/group_by.js b/frappe/public/js/frappe/ui/group_by/group_by.js
index b7b5e20cf9..c8df5f9982 100644
--- a/frappe/public/js/frappe/ui/group_by/group_by.js
+++ b/frappe/public/js/frappe/ui/group_by/group_by.js
@@ -235,9 +235,7 @@ frappe.ui.GroupBy = class {
 			$(`<div class="group-by-selector">
 				<button class="btn btn-default btn-sm group-by-button ellipsis">
 					<span class="group-by-icon">
-						<svg class="icon icon-sm">
-							<use xlink:href="#icon-group-by"></use>
-						</svg>
+						${frappe.utils.icon('group-by')}
 					</span>
 					<span class="button-label">
 						${__('Add Group')}
diff --git a/frappe/public/js/frappe/views/image/image_view.js b/frappe/public/js/frappe/views/image/image_view.js
index b313846150..00cd32b3e1 100644
--- a/frappe/public/js/frappe/views/image/image_view.js
+++ b/frappe/public/js/frappe/views/image/image_view.js
@@ -110,9 +110,7 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 
 		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>
+				${frappe.utils.icon('expand', 'xs')}
 			</div>`
 			: '';
 
diff --git a/frappe/public/js/frappe/views/kanban/kanban_board.js b/frappe/public/js/frappe/views/kanban/kanban_board.js
index 245d1116ac..5969987777 100644
--- a/frappe/public/js/frappe/views/kanban/kanban_board.js
+++ b/frappe/public/js/frappe/views/kanban/kanban_board.js
@@ -557,13 +557,11 @@ frappe.provide("frappe.views");
 			if (card.comment_count > 0)
 				html +=
 				`<span class="list-comment-count small text-muted ">
-					<svg class="icon icon-sm">
-						<use xlink:href="#icon-small-message"></use>
-					</svg>
+					${frappe.utils.icon('small-message')}
 					${card.comment_count}
 				</span>`;
 
-			assignees_html = get_assignees_html();
+			const assignees_html = get_assignees_html();
 
 			html += `<span class="kanban-assignments">${assignees_html}</span>`;
 
@@ -608,9 +606,7 @@ frappe.provide("frappe.views");
 				`<span class="kanban-assignments">
 					${get_assignees_html()}
 					<a class="add-assignment avatar avatar-small avatar-empty">
-						<svg class="icon icon-sm">
-							<use xlink:href="#icon-small-message"></use>
-						</svg>
+						${frappe.utils.icon('small-message')}
 					</a>
 				</span>`;