diff --git a/components/lib/scrolltop/BaseScrollTop.vue b/components/lib/scrolltop/BaseScrollTop.vue
index ec4c18cd3..2793893de 100644
--- a/components/lib/scrolltop/BaseScrollTop.vue
+++ b/components/lib/scrolltop/BaseScrollTop.vue
@@ -39,7 +39,7 @@ const styles = `
 
 const classes = {
     root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
-    icon: ({ props }) => ['p-scrolltop-icon', props.icon]
+    icon: 'p-scrolltop-icon'
 };
 
 const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrolltop_style', manual: true });
diff --git a/components/lib/scrolltop/ScrollTop.vue b/components/lib/scrolltop/ScrollTop.vue
index fee9fe101..5b46e69ea 100644
--- a/components/lib/scrolltop/ScrollTop.vue
+++ b/components/lib/scrolltop/ScrollTop.vue
@@ -1,17 +1,17 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
         <button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')">
-            <slot name="icon">
-                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
+            <slot name="icon" :class="cx('icon')">
+                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
             </slot>
         </button>
     </transition>
 </template>
 
 <script>
-import BaseScrollTop from './BaseScrollTop.vue';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import BaseScrollTop from './BaseScrollTop.vue';
 
 export default {
     name: 'ScrollTop',