# Sizing Icons
Techniques for resizing Font Awesome icons in your web projects.
> 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.
Make sure you're:
- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).
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.
```html
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` | 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.
```html
```
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."
```html
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."
```
| 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](/web/use-with/scss.md) CSS pre-processor options, you can tweak both the relative and literal sizing scales to your liking via scale-based variables and mixins.