diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 07ad5779e..a3fc12c30 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -3,7 +3,9 @@
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
     <div class="card flex flex-col gap-4 items-center">
-        <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
+        <span
+            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
+        >
         <div class="flex justify-center gap-2">
             <div v-ripple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">Green</div>
             <div v-ripple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">Orange</div>
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index 50eff3e16..ed558f32f 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -3,7 +3,9 @@
         <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
+        <span
+            >Ripple option at the <span class="mx-1 h-8 w-8 rounded-border inline-flex items-center justify-center bg-primary text-primary-contrast"><i class="pi pi-palette"></i></span> configurator needs to be turned on for the demo.</span
+        >
         <div v-ripple class="ripple-box">Default</div>
     </div>
     <DocSectionCode :code="code" />