Hi,

You can use javascript to achieve this.

First, create two Images Up Arrow

Then have another image Right Arrow

then, on the hover event, you can change the element's images.

Refer to this link to get a clear idea https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

Hi @kazuma yamagata 

Greetings and welcome to the outsystems community.

(a) create one container and call icon into that container on that container call css class named  "arrow-container".

 (b) on arrow icon call css class named arrow-icon.

and call that css into your screen.

.arrow-container {    display: inline-block;    position: relative;    width: 50px;    height: 50px;    overflow: hidden;}.arrow-icon {    display: inline-block;    width: 0;    height: 0;    transform: translate(-50%, -50%);    transition: transform 0.3s ease-in-out;}.arrow-container:hover .arrow-icon {    transform: translate(-50%, -50%) translateX(20px);}

And check oml that am attached.

Regards 

Apoorv Choubey

Hi @kazuma yamagata ,

You can use css transform to rotate the Icon. please see below structure and css.

Structure:

<div class="container">

<i class="icon fa fa-up"></i>

</div>

CSS:

.container i {

  padding: 20px;

  display: block;

  font-size: 100px;

  transition: all 0.4s ease;

}

.container i:hover {

  transform: rotateZ(90deg);

}

Hope this help

Thanks

Hi @kazuma yamagata if you find one or more answer in that question please mark as solution so it will help other community member  as well.