Font Awesome’s icons have been designed for easy use in digital interfaces so they’ve been optimized for legibility alongside the default web browser font size of 16 pixels. In order to create pixel-perfect and visually consistent icons, we design all of our icons using a 16 pixel-based icon grid and default shape guidelines.
That icon grid sets a base width and height of 16 pixels by 16 pixels. The grid has an additional 4 pixel horizontal overflow to accommodate icons with a wider footprint.
The Font Awesome 16 pixel grid has built in horizontal overflow (taking its max width to 20 pixels)
Shapes on the Grid
We’ve defined the size of shapes (such as circles, squares, and rectangles) using our icon grid.
Our square, circle, vertical rectangle, and horizontal rectangle paired with icons that are based on each shape
When making your own icons using our icon grid, you’ll want to keep these shapes in mind and even recreate their sizes directly.
Shape
Size
Square
14 pixels by 14 pixels
Circle
15px diameter
Rectangle (Vertical)
12 pixels by 16 pixels
Rectangle (Horizontal)
16 pixels by 12 pixels
Font Awesome Grid
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
When you upload your own icons to a kit, we’ll translate that icon onto our icon grid. We do this to ensure uploaded icons’ size and appearance will look right at home when side-by-side with official Font Awesome icons. Using our grid and guidelines when designing your own icon goes a long way to making that translation accurate and easy.
Using our grid system, you can make design choices that are consistent with official Font Awesome icons (and even extend official icons like the one above)
Need a jump start or template to get going?
Download the Font Awesome Icon Design Templates for Adobe Illustrator or Figma to get started with a proper viewbox (a.k.a. artboard), icon grid guides, and examples.
