Sizing Icons

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

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:

• Set up with Font Awesome in your project.
• Familiar with the basics of adding Font Awesome icons.

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.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

When my six o’clock alarm buzzes, I require a pot of good java.

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

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.

Coffee

”It is inhumane, in my opinion, 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.”

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