Earlier this week I was working on styling a website and trying to keep a component as customizable as possible. Within it, I needed the ability to reverse an icon with CSS only and I found out that using transform: scale(-1) will automatically flip the element you use it on. You can also specify the direction you’d like to flip it:

Horizontally

.element {
  transform: scaleX(-1);
}

Vertically

.element {
  transform: scaleY(-1);
}

See the Pen Flipping Elements With Negative Transforms by Tanner Record (@tarecord) on CodePen.

This blew my mind. Thanks CSS Tricks for the tip