diff --git a/apps/docs/src/app/app.component.html b/apps/docs/src/app/app.component.html
index 774591c1..f3aa29a3 100644
--- a/apps/docs/src/app/app.component.html
+++ b/apps/docs/src/app/app.component.html
@@ -113,6 +113,7 @@
 
   <div class="mt-2">
     <router-outlet />
+    <flowbite-scroll-top />
   </div>
 
   <ng-template #footerContent>
diff --git a/apps/docs/src/app/app.component.ts b/apps/docs/src/app/app.component.ts
index 2ab231c0..aa686587 100644
--- a/apps/docs/src/app/app.component.ts
+++ b/apps/docs/src/app/app.component.ts
@@ -14,6 +14,7 @@ import {
 } from 'flowbite-angular/navbar';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
+import { ScrollTopComponent } from 'flowbite-angular/scroll-top';
 
 import { Location } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
@@ -44,6 +45,7 @@ import {
     FlowbiteRouterLinkDirective,
     FlowbiteRouterLinkActiveDirective,
     BadgeComponent,
+    ScrollTopComponent,
   ],
   selector: 'flowbite-root',
   templateUrl: './app.component.html',
diff --git a/libs/flowbite-angular/scroll-top/scroll-top.component.ts b/libs/flowbite-angular/scroll-top/scroll-top.component.ts
index 57f57fe5..0ca474f1 100644
--- a/libs/flowbite-angular/scroll-top/scroll-top.component.ts
+++ b/libs/flowbite-angular/scroll-top/scroll-top.component.ts
@@ -11,7 +11,8 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_UP_SVG_ICON } from 'flowbite-angular/utils';
 
-import type { OnInit } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { OnInit, TemplateRef } from '@angular/core';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -31,6 +32,10 @@ export const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken<
   keyof ScrollTopPositions
 >('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');
 
+export const FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE = new InjectionToken<
+  TemplateRef<unknown> | undefined
+>('FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE');
+
 export const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
   DeepPartial<ScrollTopTheme>
 >('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');
@@ -44,6 +49,10 @@ export const scrollTopDefaultValueProvider = makeEnvironmentProviders([
     provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
     useValue: 'bottom-right',
   },
+  {
+    provide: FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE,
+    useValue: undefined,
+  },
   {
     provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
     useValue: {},
@@ -56,10 +65,16 @@ export const scrollTopDefaultValueProvider = makeEnvironmentProviders([
 @Component({
   selector: 'flowbite-scroll-top',
   standalone: true,
-  imports: [IconComponent],
-  template: `<flowbite-icon
-    svgIcon="flowbite-angular:chevron-up"
-    class="w-5 h-5" />`,
+  imports: [IconComponent, NgTemplateOutlet],
+  template: `
+    @if (icon()) {
+      <ng-container [ngTemplateOutlet]="icon()!" />
+    } @else {
+      <flowbite-icon
+        svgIcon="flowbite-angular:chevron-up"
+        class="w-5 h-5" />
+    }
+  `,
   host: {
     '(click)': 'onClick()',
   },
@@ -93,8 +108,16 @@ export class ScrollTopComponent extends BaseComponent<ScrollTopClass> implements
    * @default bottom-right
    */
   public position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));
+  /**
+   * Set the scroll top icon
+   *
+   * @default undefined
+   */
+  public icon = model(inject(FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE));
   /**
    * Set the custom style for this scroll top
+   *
+   * @default {}
    */
   public customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion