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

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-color: LightSalmon;"></i> Bread</div>
  <div><i class="fa-solid fa-egg" style="background-color: LightSalmon;"></i> Eggs</div>
  <div><i class="fa-solid fa-cow" style="background-color: LightSalmon;"></i> Milk</div>
  <div><i class="fa-solid fa-apple-whole" style="background-color: LightSalmon;"></i> Apples</div>
  <div><i class="fa-solid fa-broccoli" style="background-color: LightSalmon;"></i> Broccoli</div>
</div>

<!-- icon-based controls with consistent widths -->
<div style="font-size: 1.5rem; display: flex; gap: 0.75rem;">
  <i class="fa-solid fa-backward" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-play" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-forward" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-volume-xmark" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-volume-low" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-volume-high" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-sliders" style="background-color: LightSalmon;"></i>
</div>

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 style="font-size: 1.5rem; display: flex; gap: 0.75rem;">
  <i class="fa-solid fa-exclamation" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-circle-check" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-input-numeric" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-ruler-vertical" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-ruler-horizontal" style="background-color: LightSalmon;"></i>
  <i class="fa-solid fa-airplay" style="background-color: LightSalmon;"></i>
</div>

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

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

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;
}