diff --git a/angular/demo/src/app/samples/rating/readonly.route.ts b/angular/demo/src/app/samples/rating/readonly.route.ts
index eb4dae9b4b..5fe15ec3d5 100644
--- a/angular/demo/src/app/samples/rating/readonly.route.ts
+++ b/angular/demo/src/app/samples/rating/readonly.route.ts
@@ -1,14 +1,22 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
+import heartFill from '!raw-loader!bootstrap-icons/icons/heart-fill.svg';
+import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
 	standalone: true,
 	imports: [AgnosUIAngularModule],
 	template: `
 		<ng-template auRatingStar #custom let-fill="fill">
-			<span class="star" [class.full]="fill === 100"> <span class="half" [style.width.%]="fill">&hearts;</span>&hearts;</span>
+			<span class="star" [class.full]="fill === 100">
+				<span class="half" [style.width.%]="fill" [innerHTML]="sanitizer.bypassSecurityTrustHtml(heartFill)"></span>
+				<span [innerHTML]="sanitizer.bypassSecurityTrustHtml(heartFill)"></span>
+			</span>
 		</ng-template>
 		<au-rating class="rating-custom" [rating]="3.64" [slotStar]="custom" [readonly]="true" [maxRating]="5" ariaLabel="readonly rating" />
 	`,
 })
-export default class ReadonlyRatingComponent {}
+export default class ReadonlyRatingComponent {
+	readonly sanitizer = inject(DomSanitizer);
+	readonly heartFill = heartFill;
+}
diff --git a/angular/demo/src/app/samples/alert/raw-loader.d.ts b/angular/demo/src/app/types/raw-loader.d.ts
similarity index 100%
rename from angular/demo/src/app/samples/alert/raw-loader.d.ts
rename to angular/demo/src/app/types/raw-loader.d.ts
diff --git a/common/demo.scss b/common/demo.scss
index af05270f5b..2d601892d7 100644
--- a/common/demo.scss
+++ b/common/demo.scss
@@ -36,8 +36,13 @@ main {
 	.star {
 		position: relative;
 		display: inline-block;
-		font-size: 300%;
+		font-size: 2.5rem;
 		color: #d3d3d3;
+		svg {
+			width: 1em;
+			height: 1em;
+			padding-right: 0.1rem;
+		}
 	}
 
 	.full {
diff --git a/e2e/rating/rating.e2e-spec.ts b/e2e/rating/rating.e2e-spec.ts
index 99608365f1..1469b32456 100644
--- a/e2e/rating/rating.e2e-spec.ts
+++ b/e2e/rating/rating.e2e-spec.ts
@@ -122,7 +122,7 @@ test.describe.parallel(`Rating tests`, () => {
 			text: '3.64 out of 5',
 			disabled: null,
 			readonly: 'true',
-			stars: ['♥♥', '♥♥', '♥♥', '♥♥', '♥♥'],
+			stars: ['', '', '', '', ''],
 			classes: expectedClasses,
 		};
 		expect(await ratingPO.state()).toEqual(expectedState);
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
index c6ecf91077..c3ba015e39 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-readonly.html
@@ -32,9 +32,35 @@
 						 class="half"
 						 style="width: 100%;"
 						>
-							"♥"
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
+						</span>
+						<span>
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
 						</span>
-						"♥"
 					</span>
 				</span>
 				<span
@@ -53,9 +79,35 @@
 						 class="half"
 						 style="width: 100%;"
 						>
-							"♥"
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
+						</span>
+						<span>
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
 						</span>
-						"♥"
 					</span>
 				</span>
 				<span
@@ -74,9 +126,35 @@
 						 class="half"
 						 style="width: 100%;"
 						>
-							"♥"
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
+						</span>
+						<span>
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
 						</span>
-						"♥"
 					</span>
 				</span>
 				<span
@@ -95,9 +173,35 @@
 						 class="half"
 						 style="width: 64%;"
 						>
-							"♥"
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
+						</span>
+						<span>
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
 						</span>
-						"♥"
 					</span>
 				</span>
 				<span
@@ -116,9 +220,35 @@
 						 class="half"
 						 style="width: 0%;"
 						>
-							"♥"
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
+						</span>
+						<span>
+							<svg
+							 class="bi bi-heart-fill"
+							 fill="currentColor"
+							 height="16"
+							 viewBox="0 0 16 16"
+							 width="16"
+							 xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+								 d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"
+								 fill-rule="evenodd"
+								/>
+							</svg>
 						</span>
-						"♥"
 					</span>
 				</span>
 			</div>
diff --git a/react/demo/app/samples/rating/Readonly.route.tsx b/react/demo/app/samples/rating/Readonly.route.tsx
index 803e18a2f9..99e02e716d 100644
--- a/react/demo/app/samples/rating/Readonly.route.tsx
+++ b/react/demo/app/samples/rating/Readonly.route.tsx
@@ -1,5 +1,6 @@
 import type {StarContext} from '@agnos-ui/core';
 import {Rating} from '@agnos-ui/react';
+import heartFill from 'bootstrap-icons/icons/heart-fill.svg?raw';
 
 const RatingDemo = () => {
 	return (
@@ -19,10 +20,8 @@ const RatingDemo = () => {
 					};
 					return (
 						<span className={starClassname.join(' ')}>
-							<span className="half" style={styles}>
-								&hearts;
-							</span>
-							&hearts;
+							<span className="half" style={styles} dangerouslySetInnerHTML={{__html: heartFill}}></span>
+							<span dangerouslySetInnerHTML={{__html: heartFill}}></span>
 						</span>
 					);
 				}}
diff --git a/svelte/demo/samples/rating/Readonly.route.svelte b/svelte/demo/samples/rating/Readonly.route.svelte
index e91273990d..6488c94442 100644
--- a/svelte/demo/samples/rating/Readonly.route.svelte
+++ b/svelte/demo/samples/rating/Readonly.route.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
 	import {Rating} from '@agnos-ui/svelte';
+	import heartFill from 'bootstrap-icons/icons/heart-fill.svg?raw';
 </script>
 
 <Rating className="rating-custom" rating={3.64} readonly={true} maxRating={5} ariaLabel="readonly rating">
 	<span slot="star" let:fill let:index class="star" class:full={fill === 100}>
-		<span class="half" style:width={fill + '%'}>&hearts;</span>&hearts;
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		<span class="half" style:width={fill + '%'}>{@html heartFill}</span>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		<span>{@html heartFill}</span>
 	</span>
 </Rating>