So you’ve designed your own perfect icons, and now it’s time to get them camera ready for their Font Awesome debut. There are many different paths to vector greatness — but to help your icons display nicely alongside our official ones, follow these requirements and recommendations when preparing them for upload.
SVGs (or scalable vector graphics) are the only type of file we accept for custom icon uploads. In order for our system to parse those files correctly, there are a few required parameters to double-check:
| Requirements | Why? |
|---|---|
A viewBox attribute with height and width values | The viewBox attribute acts like an artboard or frame in your design software. It defines how much space an icon uses when rendered digitally. |
An xmlns="http://www.w3.org/2000/svg" attribute | This official XML namespace value is needed to help validate your SVG against the general schema, or rulebook, for the file type. |
One (1) path element OR | For monotone icons |
Two (2) path elements (one of which has <100% opacity) | To delineate the primary and secondary layers for duotone icons |
As a quick example, here’s our solid circle icon’s valid SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
</svg>
SVGs are a great medium for icons because they scale very well in almost any context. It’s right there in the name! Conversely, raster (i.e. pixel-based) images like PNGs, JPGs, and GIFs do not. Because of this, raster images that are referenced in an SVG can bloat file sizes, and scale and render incorrectly.
A viewBox attribute in SVG code is essentially an icon’s canvas, informing both its size and alignment when it’s rendered. The path data representing the icon itself needs to be be placed completely inside the viewBox with no points lying outside its boundaries.
If you’re using design software to create icons, the viewBox attribute can be handily taken from the dimensions of your file’s artboards or frames when exporting SVGs.
One of the reasons we design our icons on a pixel grid is to ensure that things will render cleanly and crisply at a lot of standard sizes — and part of that is ensuring that no stray points or path data veer outside of the viewBox. Anything found outside or passing through the SVG’s boundaries will be ignored or shunned during upload, so double-check your X and Y coordinates and keep everything nice and snug inside.
While we can all agree that colors are rad, our system actually ignores those attributes to speed things along during the upload process. So don’t worry about making sure all your SVGs are using the same hex code, or stripping out superfluous chromatic properties. You can use our support styling to color your icon to any hue you’d like once it’s in your web project.
Most official Font Awesome icons are created from just a single SVG path. If your icon visually consists of multiple objects (e.g. stacked horizontal bars for a menu), you’ll need to join them into a compound path (in Illustrator) or a boolean group (in Figma (opens new window)).
Here’s an example of how all those shapes get combined…
…and here’s how that looks in code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="m1,3c0-.553.447-1,1-1h12c.553,0,1,.447,1,1s-.447,1-1,1H2c-.553,0-1-.447-1-1Zm0,5c0-.553.447-1,1-1h12c.553,0,1,.447,1,1s-.447,1-1,1H2c-.553,0-1-.447-1-1Zm14,5c0,.553-.447,1-1,1H2c-.553,0-1-.447-1-1s.447-1,1-1h12c.553,0,1,.447,1,1Z"/>
</svg>
But it’s a great, big, beautiful icon world out there! (Figuratively, of course — these icons are actually quite small.) Some Font Awesome styles aren’t limited to just one path, and yours shouldn’t be either.
To create a Font Awesome-friendly duotone icon, you can follow the same steps as above, but just make sure you have two separate compound paths (Illustrator) or nodes (Figma).
Those paths will form the two separate pieces of your icon, but our system needs one extra step to know to handle them differently: opacity.
Font Awesome Duotone icons use two levels of opacity (one for each part of the icon) to tell which is the primary path and which is the secondary. Your primary path should have an opacity of 100%, but you can set the secondary path’s opacity to anything less than 100%.
Regardless of how you decide to set up your opacity, the icon’s secondary layer will be set to 40% once the icon is uploaded to match our Font Awesome icons. But after that, you can style it however your heart desires.
Here’s an example of the above Sharp Duotone as an SVG. Notice the two separate path elements and that the second one has opacity=".4"
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
<path d="m19,9.213l-1.29,1.29-2.217-2.217,1.29-1.29,2.217,2.217Zm-8.628,4.194l-.372,2.593,2.589-.376,4.414-4.414-2.217-2.217-4.414,4.414Z"/>
<path d="m15,2v3H1v-3h3V0h2v2h4V0h2v2h3ZM1,6h14v1.388l-5.655,5.656-.425,2.956H1V6Zm3,4h6v-1.5h-6v1.5Zm0,3h4v-1.5h-4v1.5Z" opacity=".4"/>
</svg>