We have a number of options for sizing icons in your project. So much so, even Goldilocks would be happy.

Advertisement

We’ll cover the basics of industry standard sizing recommendations, and how you can size icons up when it’s useful, or when text alignment is not a concern.

Before You Get Started

Make sure you're:

By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them. In addition to that, Font Awesome comes with the following sizing tools.

Relative Sizing

Font Awesome includes a range of t-shirt based sizes that not only increase or decrease an icon's size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This is great for increasing/decreasing an icon's size while maintaining legibility and alignment alongside UI elements.

  <p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>

Like Font Awesome's icons, the relative sizing scale is created with modern browsers' default 16px font-size in mind and creates steps up/down from there.

Relative Sizing Class Font Size Equivalent in Pixels
fa-2xs 0.625em 10px
fa-xs 0.75em 12px
fa-sm 0.875em 14px
fa-lg 1.25em 20px
fa-xl 1.5em 24px
fa-2xl 2em 32px

Sizing on the Smaller Side

Font Awesome's icons are designed to render crisply at the equivalent of 16px. While we provide utilities to decrease their size, it's industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.

Advertisement

Literal Sizing

Font Awesome also includes a literal size scale to make increasing an icon's size from 1x to 10x easy and efficient. Literal sizing is useful for sizing icons at a larger scale or in cases where text alignment isn't a primary concern.

  <i class="fa-solid fa-camera fa-1x"></i>
  <i class="fa-solid fa-camera fa-2x"></i>
  <i class="fa-solid fa-camera fa-3x"></i>
  <i class="fa-solid fa-camera fa-4x"></i>
  <i class="fa-solid fa-camera fa-5x"></i>
  <i class="fa-solid fa-camera fa-6x"></i>
  <i class="fa-solid fa-camera fa-7x"></i>
  <i class="fa-solid fa-camera fa-8x"></i>
  <i class="fa-solid fa-camera fa-9x"></i>
  <i class="fa-solid fa-camera fa-10x"></i>

When text alignment and sizing icons is important to your design, you’ve got options for that, too.

  <div style="text-align: center;">
    <i class="fa-solid fa-coffee fa-5x"></i>
    <h4 style="margin-top: 0.25em;">Coffee</h4>
    <p>"It is inhumane, in <a href="https://www.washingtonpost.com/archive/lifestyle/magazine/1997/11/09/grounds-for-suspicion/075c7cfe-d5cf-4443-ae42-a95e6e46fed7/">my opinion</a>, to force people who have a genuine medical need for coffee to wait in line behind people who apparently view it as some kind of recreational activity."</p>  
  </div>
Literal Sizing Class Font Size
fa-1x 1em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

Did You Know?

You can also directly style an icon's size by setting a font-size in your project's CSS that targets an icon or directly in the style attribute of the HTML element referencing an icon.

Advanced Sizing Customization

If you're using our Sass or Less CSS pre-processor options, you can tweak both the relative and literal sizing scales to your liking via scale-based variables and mixins.

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!