# Symbol Factory component flip Horizontical

**URL:** <https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 4, 2025, 7:47am UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702 "2025-04-04T07:47:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\
**Post date:** [April 4, 2025, 7:47am UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702/1 "2025-04-04T07:47:24Z")

</div>

Hi,  
I am using a motor component imported from Symbol Factory. Now I want to flip horizontally, but I could not find any option in the property editor.

Actual:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/95bbf6b6ebe0ddd5944e2038e7518e3a0ef84298.png)

Desired:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/4/14e9882d3b87ad8d766f3bc4a9b70a098b8a5fc2.png)

Thanks.

---

<div class="post-metadata">

**Author:** ![Fran\_Dujmovic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fran_dujmovic/32/70280_2.png) [@Fran\_Dujmovic](https://forum.inductiveautomation.com/u/Fran_Dujmovic)\
**Post date:** [April 4, 2025, 8:24am UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702/2 "2025-04-04T08:24:46Z")

</div>

You probably want to create a custom style class that you will apply to your motor symbol. Here's an example of what I mean;

```python
.psc-motorStyle{
	transition: 1s ease-in-out;
}
.psc-motorStyle:hover{
	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);
 	cursor: pointer;
}

```

You'd apply 'motorStyle' to you motor icon and this would be the result.

![motor_flip](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba5cf5e0259220dfdcdca8eb8b9283b2e51d3399.gif)

---

<div class="post-metadata">

**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\
**Post date:** [April 4, 2025, 12:19pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702/3 "2025-04-04T12:19:53Z")

</div>

Hi first thanks for help.  
I just want to flip and not move continuously.  
As we have the pump direction left, but in default image is right.

---

<div class="post-metadata">

**Author:** ![Fran\_Dujmovic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fran_dujmovic/32/70280_2.png) [@Fran\_Dujmovic](https://forum.inductiveautomation.com/u/Fran_Dujmovic)\
**Post date:** [April 4, 2025, 12:50pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702/4 "2025-04-04T12:50:51Z")

</div>

Look at the code snippet I sent previously, it's already there. Here's the style class that only mirrors the motor via the specified axis;

```python
.psc-motorStyle{
 	transform: scaleX(-1);	/*Mirror via the X axis*/
 	transform: scaleY(-1);	/*Mirror via the Y axis*/
 	/*rotate: 90deg;	Rotate the image*/
}

```

You can play around with this to adjust the snippet to your specific needs. Also, if you're using a coordinate container be sure to warp the motor symbol in a flex container and then apply the style class to the motor.

---

<div class="post-metadata">

**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\
**Post date:** [April 4, 2025, 1:12pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-component-flip-horizontical/104702/5 "2025-04-04T13:12:34Z")

</div>

Thanks alot.