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.

Advertisement

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.

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
Advertisement

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)

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.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!