diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs
index 301ca56bdfd3..9f70863b67b6 100644
--- a/packages/main/src/RatingIndicator.hbs
+++ b/packages/main/src/RatingIndicator.hbs
@@ -23,6 +23,8 @@
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else if this.halfStar}}
 				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+			{{else if ../readonly}}
+				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
 			{{else}}
 				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
 			{{/if}}
diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css
index 0aa7b162fb43..70d55ea5d688 100644
--- a/packages/main/src/themes/RatingIndicator.css
+++ b/packages/main/src/themes/RatingIndicator.css
@@ -14,6 +14,10 @@
 	cursor: initial;
 }
 
+:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+	color: var(--sapContent_UnratedColor);
+}
+
 :host([_focused]) {
 	outline: 1px dotted var(--sapContent_FocusColor);
 }
@@ -34,11 +38,11 @@
 
 .ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
 	content: "\2605";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50%;
-    height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 50%;
+	height: 100%;
 	color: var(--sapContent_RatedColor);
 	overflow: hidden;
 }