Skip to content
Font Awesome Docs

The Icon Canvas

Learn how Font Awesome‘s icons are consistently rendered on the web and how to customize them to suit your project’s needs.

In order to keep them visually consistent, Font Awesome’s icons have been designed using a square 20 pixel grid. We use that grid as an “Icon Canvas” and set an icon’s proportions and position relative to it.

Check out our icon design guidelines to learn more about the grid!

Fixed Width

Section titled “Fixed Width”

By default, all Font Awesome icons on the web display at a fixed width which fills the entire Icon Canvas. Icons will be visually centered in the Canvas with balanced whitespace around them.

This default allows for easy alignment when using icons in a list or in subsequent vertical lines. And when placing icons horizontally next to each other, such as in an icon-based navigation, they will display at a consistent and uniform width.

Bread
Eggs
Milk
Apples
Broccoli
<!-- vertically aligning icons -->
<div>
  <div><i class="fa-solid fa-bread-slice" style="background: LightSalmon;"></i> Bread</div>
  <div><i class="fa-solid fa-egg" style="background: LightSalmon;"></i> Eggs</div>
  <div><i class="fa-solid fa-cow" style="background: LightSalmon;"></i> Milk</div>
  <div><i class="fa-solid fa-apple-whole" style="background: LightSalmon;"></i> Apples</div>
  <div><i class="fa-solid fa-broccoli" style="background: LightSalmon;"></i> Broccoli</div>
</div>
<!-- icon-based controls with consistent widths -->
<div class="fa-3x" style="display: flex; gap: 0.5rem;">
  <i class="fa-solid fa-backward" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-play" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-forward" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-volume-xmark" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-volume-low" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-volume-high" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-sliders" style="background: LightSalmon;"></i>
</div>

Automatic Width

Section titled “Automatic Width”

Add a class of fa-width-auto on the HTML element referencing your icon to set the its width to only the interior symbol and not the entire Icon Canvas. This is great to use when you don’t want extra whitespace around an icon, or you want to insert it inline with text.

<!-- icons with automatic widths -->
<div class="fa-3x" style="display: flex; gap: 0.5rem;">
  <i class="fa-solid fa-exclamation" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-circle-check" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-input-numeric" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-ruler-vertical" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-ruler-horizontal" style="background: LightSalmon;"></i>
  <i class="fa-solid fa-airplay" style="background: LightSalmon;"></i>
</div>

Automatic Width by Default

Section titled “Automatic Width by Default”

If you want to set all icons to render using Automatic Width rather than the default Fixed Width, you can do so via the following ways.

Set the Automatic Width Class

Section titled “Set the Automatic Width Class”

Add a class of fa-width-auto on the HTML element and icons that are nested in that part of the DOM will inherit that class’ rule. If you want this setting applied at the project level, add that the class on the <body> element or somewhere central in your templates.

<!-- all icons on the page will render using Automatic Width -->
<body class="fa-width-auto">
  ...
</body>
<!-- all icons in this HTML section  will render using Automatic Width -->
<section class="fa-width-auto">
  ...
</section>

Using CSS Custom Properties

Section titled “Using CSS Custom Properties”

You can alternatively set Font Awesome’s included --fa-width CSS custom property app or site’s CSS.

/* set '--fa-width' custom property to 'auto' */
:root {
  --fa-width: auto;
}
/* set '--fa-width' custom property to 'auto' for an element with the .my-section class*/
.my-section {
  --fa-width: auto;
}

Icon Height and Visual Padding

Section titled “Icon Height and Visual Padding”

While designed on visual grids with 20 or more units, our software displays and vertically centers icons in an element with a base rendering height equivalent of 1em ( out of the box, that the default 16px that most browsers set). This display and centering is what makes aligning them with text on the web super easy.

To achieve visual balance across our collection, some of our icons leverage more of visual grid and have parts that vertically extend outside of that base rendering height when rendered - such as our -slash icons.


For example, at a font-size equivalent to 48px, our file icon is exactly 48px tall. The file-slash icon is also 48px tall — at least, optically. The -slash element slightly extends past the top and bottom of the base height.

This makes both icons equally tall visually. We call this extra extended vertical space “Icon Padding” (not to be confused with CSS padding).

Cropping Issues with Icon Padding

Section titled “Cropping Issues with Icon Padding”

There are some conditions where this Icon Padding can become visually cropped if you have:

  1. an icon inside an HTML element that is just as tall as the icon
  2. overflow: hidden applied via CSS to that parent HTML element

In those conditions, make sure you allow the Icon Padding to be visible by slightly increasing the element’s computed height - either with a larger line-height, or padding-top and padding-bottom.

<!-- this <div> and the following ones will all have a visual height of 48px thanks to font-size and line-height  -->
<div style="font-size: 48px; line-height: 1; overflow: hidden; background: LightSalmon;">
  <!-- fa-file does not render into the Icon Padding -->
  <i class="fa-solid fa-file"></i>
</div>


<div style="font-size: 48px; line-height: 1; overflow: hidden; background: LightSalmon;">
  <!-- fa-file-slash's Icon Padding is visually cut off -->
  <i class="fa-solid fa-file-slash"></i>
</div>


<div style="font-size: 48px; line-height: 1; overflow: hidden; background: LightSalmon;">
  <!-- accounting for fa-file-slash's Icon Padding with extra line-height -->
  <i class="fa-solid fa-file-slash" style="line-height: 1.2;"></i>
</div>


<div style="font-size: 48px; line-height: 1; overflow: hidden; background: LightSalmon;">
  <!-- accounting for fa-file-slash's Icon Padding with vertical padding -->
  <i class="fa-solid fa-file-slash" style="padding-top: 0.1em; padding-bottom: 0.1em"></i>
</div>