SVG / CSS: Icon Tricks

Scot Ranney • April 07, 2026

Yes, this was worked up on ChatGP since I was out of Claude credits. ChatGP whipped it up into a nice Boostrap 5 block that probably looks better than anything else in this knowledgebase, sigh... actually it's quite nice and clean, what do you know?

Directional Icons (SVG & Font Awesome)

Use a single icon and flip it horizontally with CSS instead of maintaining multiple versions.

1. Base CSS Utility

.flip-x {
  transform: scaleX(-1);
  transform-origin: center;
  display: inline-block; /* important for inline elements */
}

2. SVG Example

Right

Left (flipped)

<svg class="flip-x">...</svg>

3. Font Awesome Example

Right

Left (flipped)

<i class="fa-solid fa-arrow-right flip-x"></i>

4. Optional Direction Classes

.arrow-left {
  transform: scaleX(-1);
}

.arrow-right {
  transform: none;
}

Tip: This works best for directional icons (arrows, chevrons, carets). Avoid flipping text or logos.

https://www.scotsscripts.com/mvblog/svg-css-icon-tricks.html

mvkb_svg mvkb_icons mvkb_css

SVG / CSS: Icon Tricks

Miva Knowledge Base