diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
index 261adf2ddc7..74f2fee4fe2 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
@@ -1,9 +1,8 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
index 271d7776860..5b97f182396 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.scss
@@ -32,18 +32,6 @@
     }
 }
 
-.icon {
-    left: -4px;
-    opacity: 0;
-}
-
-.selected {
-    font-weight: bold;
-    .icon {
-        opacity: 1;
-    }
-}
-
 .middle-marker-container {
     position: absolute;
     top: 50%;
@@ -55,3 +43,14 @@
         border: 0.5px dashed black;
     }
 }
+
+.icon {
+    opacity: 0;
+}
+
+.selected {
+    font-weight: bold;
+    .icon {
+        opacity: 1;
+    }
+}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
index 63c1188a273..dea2d0c12e2 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'fd-scroll-spy-custom-example',
-  templateUrl: './scroll-spy-custom-example.component.html',
-  styleUrls: ['./scroll-spy-custom-example.component.scss']
+    selector: 'fd-scroll-spy-custom-example',
+    templateUrl: './scroll-spy-custom-example.component.html',
+    styleUrls: ['./scroll-spy-custom-example.component.scss']
 })
 export class ScrollSpyCustomExampleComponent implements OnInit {
 
@@ -16,7 +16,7 @@ export class ScrollSpyCustomExampleComponent implements OnInit {
 
     generateItems(count: number): void {
         for (let i = 0; i < count; ++i) {
-            this.items.push({name: 'Element ' + i, id: 'element-' + i});
+            this.items.push({ name: 'Element ' + i, id: 'element-' + i });
         }
     }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
index ec83a82ad18..76b4c0a3ebe 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
@@ -1,9 +1,8 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
index 271d7776860..f7606028e25 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
@@ -33,7 +33,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 
@@ -43,15 +42,3 @@
         opacity: 1;
     }
 }
-
-.middle-marker-container {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    height: 0;
-    width: calc(100% - 140px);
-    .marker {
-        height: 1px;
-        border: 0.5px dashed black;
-    }
-}
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
index fe4410f1f16..318a718bd12 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'fd-scroll-spy-offset-example',
-  templateUrl: './scroll-spy-offset-example.component.html',
-  styleUrls: ['./scroll-spy-offset-example.component.scss']
+    selector: 'fd-scroll-spy-offset-example',
+    templateUrl: './scroll-spy-offset-example.component.html',
+    styleUrls: ['./scroll-spy-offset-example.component.scss']
 })
 export class ScrollSpyOffsetExampleComponent implements OnInit {
 
@@ -16,7 +16,7 @@ export class ScrollSpyOffsetExampleComponent implements OnInit {
 
     generateItems(count: number): void {
         for (let i = 0; i < count; ++i) {
-            this.items.push({name: 'Element ' + i, id: 'element-' + i});
+            this.items.push({ name: 'Element ' + i, id: 'element-' + i });
         }
     }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
index 20a23cb959f..7fb952a6203 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
@@ -1,9 +1,8 @@
 <div class="header-container">
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
-        <span class="icon">
+        <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
index 87dfc08e9e0..757b69b0dbf 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
@@ -32,7 +32,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 
diff --git a/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html b/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
index 61cacc8566e..ba12e392e46 100644
--- a/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
+++ b/apps/docs/src/app/core/component-docs/scroll-spy/scroll-spy-docs.component.html
@@ -33,7 +33,7 @@
     The <code>targetOffset</code> property allows you to add the offset to the detection. The value is measured in pixels,
     so for example if there is <code>[targetOffset]="100"</code>, the event will be fired for element, that is 100px below.
 </description>
-<component-example [name]="'ex2'">
+<component-example [name]="'ex3'">
     <fd-scroll-spy-offset-example></fd-scroll-spy-offset-example>
 </component-example>
 <code-example [exampleFiles]="scrollSpyCustom"></code-example>
diff --git a/apps/docs/src/styles.scss b/apps/docs/src/styles.scss
index 7fc50fe52e0..b781673da50 100644
--- a/apps/docs/src/styles.scss
+++ b/apps/docs/src/styles.scss
@@ -78,6 +78,31 @@ fd-card {
     width: 95%;
 }
 
+.fd-scroll-spy-example-icon-class {
+    position: relative;
+    display: inline-block;
+    margin-right: 4px;
+    @at-root {
+        [dir="rtl"] &,
+        &[dir="rtl"] {
+            margin-right: 0;
+            margin-left: 4px;
+            transform: rotate(180deg);
+            bottom: 2px;
+        }
+    }
+}
+
+.middle-marker-container {
+    @at-root {
+        [dir="rtl"] &,
+        &[dir="rtl"] {
+            right: initial !important;
+            left: 0 !important;
+        }
+    }
+}
+
 pre {
     margin: 0;
     white-space: pre-wrap;