diff --git a/js/src/o-scroll-up.js b/js/src/o-scroll-up.js
index 9872bd339d..eccb74a340 100644
--- a/js/src/o-scroll-up.js
+++ b/js/src/o-scroll-up.js
@@ -61,7 +61,7 @@ class ScrollUp {
 
     $(window).on(Event.SCROLL, $.proxy(this._process, this))
     $(Selector.SCROLL_TOP).on(Event.CLICK_SCROLL, $.proxy(this._backToTop, this))
-    $(this._element).addClass('is-fixed')
+    $(this._element).addClass('is-fixed d-none')
     this._process()
   }
 
@@ -109,11 +109,7 @@ class ScrollUp {
   }
 
   _process() {
-    if ($(this._scrollElement).scrollTop() > Number($(this._scrollElement).height())) {
-      $(Selector.SCROLL_TOP).show()
-    } else {
-      $(Selector.SCROLL_TOP).hide()
-    }
+    $(Selector.SCROLL_TOP).toggleClass('d-none', $(this._scrollElement).scrollTop() < Number($(this._scrollElement).height()))
   }
 
   _clear() {
diff --git a/scss/_o-scroll-up.scss b/scss/_o-scroll-up.scss
index dbab0a3508..9a1a8a52d5 100644
--- a/scss/_o-scroll-up.scss
+++ b/scss/_o-scroll-up.scss
@@ -4,95 +4,47 @@
 //
 
 .o-scroll-up {
-  .o-scroll-up-icon {
-    &::before {
-      font-family: icon-orange;
-      font-size: 1.25rem;
-      line-height: 1.8;
-      content: "\e93f";
-    }
-    align-items: center;
-    justify-content: center;
-    float: right;
-    width: $o-scroll-up-width;
-    height: $o-scroll-up-height;
-    color: #000;
-    text-align: center;
-    text-decoration: none;
-    background-color: #fff;
-    border-style: solid;
-    border-width: 2px;
-
-    /* rtl:ignore */
-    transform: rotate(90deg);
-
-    /* rtl:ignore */
-  }
-
   position: fixed;
   right: 0;
   bottom: 2.5rem;
   z-index: $zindex-o-scroll-up;
-  display: none;
-  // put a safety space between the right of the screen and the scroll link
+  display: inline-flex;
+  align-items: center;
+  padding-left: map-get($spacers, 2);
+  font-weight: $font-weight-bold;
+  background-color: rgba($white, .8);
+
   @each $breakpoint, $container-margin in $container-fluid-margin-widths {
     @include media-breakpoint-up($breakpoint) {
       right: $container-margin;
+      bottom: map-get($o-scroll-up-bottom, $breakpoint);
     }
   }
-  @include media-breakpoint-up(xs) {
-    bottom: .25rem;
-  }
-  @include media-breakpoint-up(sm) {
-    bottom: .375rem;
-  }
-  @include media-breakpoint-up(md) {
-    bottom: .75rem;
-  }
-  @include media-breakpoint-up(lg) {
-    bottom: 2rem;
-  }
-  @include media-breakpoint-up(xl) {
-    bottom: 2.5rem;
-  }
-  @include media-breakpoint-up(xxl) {
-    bottom: 3.75rem;
-  }
 
-  .o-scroll-up-text {
+  &::after {
     display: inline-block;
-    padding: (($o-scroll-up-height - 1.25) / 2) .625rem;
-    font-weight: $font-weight-bold;
-    background-color: #fff;
-    opacity: .8;
-  }
-  // custom class to allow a fixed position
-  &.static {
-    position: static;
-    z-index: auto;
-    display: inline;
-    float: left;
-    .o-scroll-up-text {
-      float: left;
-    }
-    .o-scroll-up-icon {
-      position: relative;
-      display: inline-block;
-      float: none;
-    }
+    width: $o-scroll-up-size;
+    height: $o-scroll-up-size;
+    margin-left: map-get($spacers, 2);
+    content: "";
+    background: $white escape-svg($o-scroll-up-icon) no-repeat center / 50% 50%;
+    border: $border-width solid $black;
+    transform: rotate(.25turn);
   }
 
-  @include hover-focus() {
-    color: $primary;
-    .o-scroll-up-icon {
-      color: #fff;
-      background-color: #000;
-    }
+  &:hover::after,
+  &:focus::after {
+    background: $black escape-svg($o-scroll-up-icon-hover) no-repeat center / 50% 50%;
+    border-color: $black;
   }
 
-  &:active .o-scroll-up-icon {
-    color: #fff;
-    background-color: $primary;
+  &:active::after {
+    background: $primary escape-svg($o-scroll-up-icon-hover) no-repeat center / 50% 50%;
     border-color: $primary;
   }
+
+  &.static {
+    position: static;
+    z-index: auto;
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 655336597e..ce8f50b5e7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1264,8 +1264,17 @@ $icon-font-path:          "../fonts/" !default;
 // o-scroll-up
 //
 //
-$o-scroll-up-height: 2.5rem !default; //30px
-$o-scroll-up-width: $o-scroll-up-height !default; // 30px
+$o-scroll-up-size:       2.5rem !default; // 40px
+$o-scroll-up-icon:       $chevron-icon !default;
+$o-scroll-up-icon-hover: $chevron-icon-hover !default;
+$o-scroll-up-bottom: (
+  xs: .25rem,
+  sm: .375rem,
+  md: .75rem,
+  lg: 2rem,
+  xl: 2.5rem,
+  xxl: 3.75rem
+) !default;
 
 // Pills
 $nav-pills-focus-link-bg: theme-color("primary") !default;
diff --git a/site/_includes/scripts.html b/site/_includes/scripts.html
index a2e55a0538..5bad0d33ca 100644
--- a/site/_includes/scripts.html
+++ b/site/_includes/scripts.html
@@ -1,8 +1,7 @@
 <!-- Boosted mod -->
 <nav role="navigation">
   <a href="#" class="o-scroll-up" title="Back to top">
-    <span class="o-scroll-up-text d-none d-sm-inline-block">Back to top</span>
-    <span class="o-scroll-up-icon" aria-hidden="true"></span>
+    <span class="d-none d-sm-inline-block">Back to top</span>
   </a>
 </nav>
 <!-- end mod -->
diff --git a/site/docs/4.3/components/scroll-up.md b/site/docs/4.3/components/scroll-up.md
index b8ecf6e6e4..2888ebb8b2 100644
--- a/site/docs/4.3/components/scroll-up.md
+++ b/site/docs/4.3/components/scroll-up.md
@@ -8,28 +8,21 @@ toc: true
 
 ## Scroll up auto display
 Displays a link at the bottom right of the page after scrolling down one page height. 
-On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
 
-Adds a link at the end of the page with the `o-scroll-up` class. The link is made up of 2 elements. The first element is a text with the `.o-scroll-up-text` class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the `.o-scroll-up-icon` class. For accessibility reasons, add a consistant `title` to the link, and add `aria-hidden='true'` to the icon.
-
-You can see a sample on how it works by scrolling this page.
+Adds a link at the end of the page with the `o-scroll-up` class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). The arrow up icon is added via CSS. 
+For accessibility reasons, add a `title` to the link that's **consistent** with text content.
 
 {% highlight html %}
 <a href="#" class="o-scroll-up" title="back to top">
-  <span class="o-scroll-up-text d-none d-sm-inline-block">Back to top</span>
-  <span class="o-scroll-up-icon" aria-hidden="true"></span>
+  <span class="d-none d-sm-inline-block">Back to top</span>
 </a>
 {% endhighlight %}
 
 ## Scroll up static
-Displays a link in the page with the arrow up icon.
-
-Adds a link in the page with the `o-scroll-up` and `static` class. 
-You can let the text `.o-scroll-up-text` display on all devices.
+Displays a static “Back to top” link, by adding it in the page with the `o-scroll-up` and `static` class.
 {% capture example %}
 <a href="#" class="o-scroll-up static" title="back to top">
-  <span class="o-scroll-up-text">Back to top</span>
-  <span class="o-scroll-up-icon" aria-hidden="true"></span>
+  <span class="d-none d-sm-inline-block">Back to top</span>
 </a>
 {% endcapture %} {% include example.html content=example %}
 
@@ -54,4 +47,4 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>Allow you to specify a query selector of the custom top of the page. If it's set the go back to top action will scroll into the view to this anchor instead of positionning the offset top to 0</td>
     </tr>
   </tbody>
-</table>
\ No newline at end of file
+</table>