# Power Transforms

Learn how to use power transforms to manipulate Font Awesome icons.

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

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

Make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Using [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md).
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

## 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.

  <img
    slot="media"
    src="/web/style/images/scaling.png"
    alt="Scaling"
  />
  <span class="wa-card-image-description">
    Scaling
  </span>

```html
<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.

  <img
    slot="media"
    src="/web/style/images/positioning.png"
    alt="Scaling"
  />
  <span class="wa-card-image-description">
    Scaling
  </span>

```html
<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>
```

## 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.

  <img
    slot="media"
    src="/web/style/images/rotating-flipping.png"
    alt="Rotating and Flipping"
  />
  <span class="wa-card-image-description">
    Rotating and Flipping
  </span>

```html
<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>
```

  <h4>
    Your Turn!
  </h4>

Try rocking out with these <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/fontawesome/pen/pomyqgb">Codepen power-transform examples</a>.

## 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                                              |

  <h4>
    Did you know?
  </h4>

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