SVG / CSS: Icon Tricks

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

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