Demo Using Font Awesome 5's SVG Framework

---

Support Styling Examples

Here are examples of styling support you get out-of-the-box with Font Awesome 5's SVG Framework

Example: Icons Adjust with Text Size

small

big

deathstar

Example: Icons Match Color of Parent

Icon Size Scale

Fixed Width Icons

  Home   Library   Applications   Settings

List Icons

• List icons
• can be used
• as bullets
• in lists

Bordered and Pulled Icons

Animated Icons

Rotated and Flipped Icons

Stacked

---

Transform

We've given you some easy ways to transform your icons at a basic level. Scaling and rotating should be super easy now. You can pass any value from 0 to 360 when rotating and continously step up and down the scale-scale (pun semi-intended).

Examples: Growing and Shrinking

Examples: Rotating

---

Positioning

We've added some easy ways to nudge and move icons relative to their surroundings. You can move icons left, right, up, and down by individual steps. We find this helps when we want that extra control over how Font Awesome icons work with your layouts.

Examples: Basic Positioning

---

Compositions

Compositions allow you to combine two icons into one shape. The background behind the icon will show through. This is perfect for placing icons on basic shapes.

Example: Basic composition

---

Layers

Layers are the new way to place icons visually on top of each other. Its meant to replace our classic stacked support styling. With this new approach you can use more than 2 icons. Yuss!

Example: Basic Stacking

Example: Multiple Layers

---

Text Overlays

Using positioning, transforms, and layers, you can overlay text information on top of icons. We find this pretty handy for particular symbols in our UI like calendars and file types. But don't stop there!

Example: Simple Text Overlay

12

Example: Simple Text Overlay

12

Example: Abbreviations

DOC

Example: Cheeky

Be mine

Counter Badge Overlays

We've also added some simple utilities for count-based badges as special overlays for Font Awesome icons.

Example: Simple Counter Badge

1

Example: No Content Counter Badge

Example: Double-digit, Bottom Left Content Counter Badge

15

Example: Large number, Top Right Content Counter Badge

1,517

Example: Crazy large number, Top Left Content Counter Badge

9,517,923,443

---

Extras

There are also some extra advanced options you have available with our SVG Framework.

Show you missing icons

Auto Accessibility: Add Aria-Hidden

Auto Accessibility: Add Title

DOC

Render Icons with Ligatures, Unicode, or Unicode + HTML encoding

magic  