Both our Web Fonts + CSS and SVG + JS methods include some basic controls for sizing icons in your project.
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.
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-pot 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-pot 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-pot 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-pot"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee-pot 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-pot 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-pot fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
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.
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 | 10em | 14px |
fa-lg | 1.25em | 20px |
fa-xl | 1.5em | 24px |
fa-2xl | 2em | 32px |
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.
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>
<div style="text-align: center;">
<i class="fa-solid fa-ghost fa-5x"></i>
<h4 style="margin-top: 0.25em;">The Ghostbloods</h4>
<p>Not being timid. That was what she was doing. Shallan glanced at the brutish guard and raised an eyebrow, forcing her voice to sound calm. “You really went all-out on the decor. How long did you have to look to find a den in the Shattered Plains that had a creepy staircase in it?”</p>
</div>
Not being timid. That was what she was doing. Shallan glanced at the brutish guard and raised an eyebrow, forcing her voice to sound calm. “You really went all-out on the decor. How long did you have to look to find a den in the Shattered Plains that had a creepy staircase in it?”
| 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 |
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.
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.