Thanks to the power of SVG+JS, you can position icons randomly using the data-fa-transform element attribute.

Advertisement

We’ll cover the basics of flipping icons, scaling them up or down, and moving them left or right, for some super-useful effects.

Before You Get Started

Make sure you're:

Scaling

Power Transform scaling affects icon size without changing or moving the container. To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals. Units are 1/16em. For clarity in the example, we've added a background color on the icon so you can see the effect.

  <div class="fa-4x">
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
  </div>

Positioning

Power Transform positioning affects the icon location without changing or moving the container. To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals. Units are 1/16em. For clarity in the example, we've added a background color on the icon so you can see the effect.

  <div class="fa-4x">
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
  </div>
Advertisement

Rotating and Flipping

Power Transform rotating & flipping affects the icon angle and reflection without changing or moving the container. To rotate or flip icons use any combination of rotate-#, flip-v, and flip-h with any arbitrary value. Units are degrees with negative numbers allowed (see fifth icon in the example). For clarity in the example, we've added a background color on the icon so you can see the effect.

  <div class="fa-4x">
    <i class="fa-solid fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
    <i class="fa-solid fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
  </div>

Power Transform data-fa-transform Attributes

HTML data- Attribute Details
data-fa-transform="shrink-[value]" Shrinks an icon
data-fa-transform="grow-[value]" Grows an icon
data-fa-transform="up-[value]" Moves an icon up
data-fa-transform="right-[value]" Moves an icon right
data-fa-transform="down-[value]" Moves an icon down
data-fa-transform="left-[value]" Moves an icon left
data-fa-transform="rotate-[angle]" rotates an icon by a specific degree (with negative numbers allowed)
data-fa-transform="flip-h" mirrors an icon horizontally
data-fa-transform="flip-v" mirrors icon vertically

Did you know?

You can mix and match any of the power transforms noted above together on a single icon.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!