Skip to content

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.

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 ClassFont SizeEquivalent in Pixels
fa-2xs0.625em10px
fa-xs0.75em12px
fa-sm0.875em14px
fa-lg1.25em20px
fa-xl1.5em24px
fa-2xl2em32px

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 ClassFont Size
fa-1x1em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

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.