diff --git a/frappe/public/js/frappe/form/controls/rating.js b/frappe/public/js/frappe/form/controls/rating.js
index 351c4f7122..8117bf24bf 100644
--- a/frappe/public/js/frappe/form/controls/rating.js
+++ b/frappe/public/js/frappe/form/controls/rating.js
@@ -52,7 +52,7 @@ frappe.ui.form.ControlRating  = frappe.ui.form.ControlInt.extend({
 		return cint(this.value, null);
 	},
 	set_formatted_input(value) {
-		let el = $(this.input_area).find('i');
+		let el = $(this.input_area).find('svg');
 		el.children('svg').prevObject.each( function(e) {
 			if (e < value) {
 				$(this).addClass('star-click');
diff --git a/frappe/public/js/frappe/form/formatters.js b/frappe/public/js/frappe/form/formatters.js
index 30ed7f15e4..6beb369922 100644
--- a/frappe/public/js/frappe/form/formatters.js
+++ b/frappe/public/js/frappe/form/formatters.js
@@ -61,12 +61,14 @@ frappe.form.formatters = {
 		return frappe.form.formatters._right(flt(value, precision) + "%", options);
 	},
 	Rating: function(value) {
-		return `<span class="rating">
-	${Array.from(new Array(5)).map((_, i) =>
-		`<i class="fa fa-fw fa-star ${i < (value || 0) ? "star-click": "" } star-icon" data-idx="${(i+1)}"></i>`
-	).join('')}
-		</span>`;
-	},
+		return `<div class="rating">
+			${[1, 2, 3, 4, 5].map(i =>
+				`<svg class="icon icon-md ${i <= (value || 0) ? "star-click": "" }" data-idx="${i}">
+					<use href="#icon-star"></use>
+				</svg>`
+			).join('')}
+		</div>`;
+		},
 	Currency: function (value, docfield, options, doc) {
 		var currency  = frappe.meta.get_field_currency(docfield, doc);
 		var precision = docfield.precision || cint(frappe.boot.sysdefaults.currency_precision) || 2;