Skip to content

Icon Design Guidelines

With a few key concepts in mind, you can create great looking custom icons that will fit right in and be able to use all the awesome of Font Awesome.

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.

Icon pixel grid 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.

Basic shapes in the icon pixel 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.

Square14 pixels by 14 pixels
Circle15px diameter
Rectangle (Vertical)12 pixels by 16 pixels
Rectangle (Horizontal)16 pixels by 12 pixels

Font Awesome Grid

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.

Comparing Font Awesome and uploaded book icons 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)