diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js
index c15fbce386..9eb2646637 100644
--- a/frappe/public/js/frappe/list/list_view.js
+++ b/frappe/public/js/frappe/list/list_view.js
@@ -1018,19 +1018,29 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
const title = liked_by.map((u) => frappe.user_info(u).fullname).join(", ");
const div = document.createElement("div");
- div.innerHTML = `
-
- ${frappe.utils.icon("es-solid-heart", "sm", "like-icon")}
-
- ${liked_by.length}
- `;
+ const like = document.createElement("span");
+ like.classList.add("like-action", heart_class);
+ const like_icon = document.createElement("svg");
+ like_icon.classList.add("es-icon", "es-solid", "icon-sm", "like-icon");
- const like = div.querySelector(".like-action");
+ const use = document.createElement("use");
+ use.setAttribute("href", "#es-solid-heart");
+ use.classList.add("like-icon");
+ like_icon.appendChild(use);
+
+ like.appendChild(like_icon);
+ like.dataset.doctype = this.doctype;
+ like.dataset.name = doc.name;
like.setAttribute("data-liked-by", doc._liked_by || "[]");
- like.setAttribute("data-doctype", this.doctype);
- like.setAttribute("data-name", doc.name);
like.setAttribute("title", title);
+ const likes_count = document.createElement("span");
+ likes_count.classList.add("likes-count");
+ likes_count.textContent = liked_by.length;
+
+ div.appendChild(like);
+ div.appendChild(likes_count);
+
return div.innerHTML;
}