# Is there a way to change default arrow icons that navigate pages left and right?

**URL:** https://forum.readymag.com/t/is-there-a-way-to-change-default-arrow-icons-that-navigate-pages-left-and-right/625
**Category:** Custom code
**Created:** [August 31, 2022, 12:43pm UTC](https://forum.readymag.com/t/is-there-a-way-to-change-default-arrow-icons-that-navigate-pages-left-and-right/625 "2022-08-31T12:43:02Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Repponen](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@Repponen](https://forum.readymag.com/u/Repponen)
#### Post date: [August 31, 2022, 12:43pm UTC](https://forum.readymag.com/t/is-there-a-way-to-change-default-arrow-icons-that-navigate-pages-left-and-right/625/1 "2022-08-31T12:43:03Z")

</div>

As in the topic:  
Is there a way to change default arrow icons that navigate pages left and right in R/m. I don’t think you can do that in the interface, but maybe someone did that with custom code and can share it with us.

 ![Screen Shot 2022-08-31 at 2.40.15 PM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/f94d3081c701b3a7a868fab1f5e8052e470abb91.png)

Thank you!

---

<div class="post-metadata">

### Author: ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)
#### Post date: [September 1, 2022, 10:40am UTC](https://forum.readymag.com/t/is-there-a-way-to-change-default-arrow-icons-that-navigate-pages-left-and-right/625/2 "2022-09-01T10:40:48Z")

</div>

Hi @Repponen Yes! There certainly is a way. You can do this using CSS with the following code. I’ve shared two options. One is to replace the image file. And there other is if you wish to use text or a glyph to make your arrows.

```auto
<style>
  /* OPTION 1: FOR REPLACING THE DEFAULT ARROW IMAGE */
  .right>.sprite {
    background-image: url('URLHERE');
  }

  .left>.sprite {
    background-image: url('URLHERE');
  }

  

  /* OPTION 2: FOR REPLACING THE DEFAULT ARROW WITH TEXT */
  .right>.sprite, .left>.sprite {
    background-image: none !important;
  }

  .left:after {
    color: #000 !important;
    content: 'Lefty' !important;
    font-size: 12px;
  }

  .right:after {
    color: #000 !important;
    content: 'Righty' !important;
    font-size: 12px;
  }
</style>

```