Prep Icons for Upload

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.

Help Us Help You!

We take care of a lot of common SVGs issues on our end automagically, but the closer you follow the steps below, the more we can help along the way. If your creations are still giving you a lot of issues during upload, check out our handy-dandy troubleshooting guide.

General Guidelines

Valid SVGs

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

Avoiding Rasters

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.

Ins and Outs of Viewboxes

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.

The width and height of an artboard or frame is directly translated into an SVG’s boundary values

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.

Any paths or points outside the viewBox will get left behind!

What About Colors?

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.

Setting Up Monotone Icons

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).

Here’s an example of how all those shapes get combined…

Combining your shapes into a compound path in Illustrator

Combining your shapes into a boolean group in Figma

…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>

Setting up Duotone Icons

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.

Heads up!

If you want the ability to swap your primary and secondary layers after upload with no funky side effects, you’ll want to make sure that the two paths of your duotone icon don’t overlap.

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).

Two separate, non-overlapping paths for a duotone icon

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.

Combining your shapes into separate compound paths in Illustrator

Combining your shapes into separate nodes in Figma

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>

Exporting Icons from Adobe Illustrator

Check out the Font Awesome Icon Template for Illustrator!

1. Start with each of your icon designs in their own artboards.
2. Outline any strokes with “Object → Path → Outline Stroke,” and any text with “Type → Create Outlines”
3. When you’re done designing, use “Object → Compound Path → Make” to combine your icon into either:
   • One compound path (for monotone)
   • Two compound paths (one at 100% opacity, and one at < 100% opacity for duotone).
4. Use “File → Export → Export for Screens”, select the artboards you want to export, and choose “Format → SVG”. Also, click the little gear icon and use these SVG settings:
   • Styling: Presentation Attributes
   • Font: Convert to Outlines
   • Object IDs: Minimal
   • Decimal: 3
   • Check “Minify”
   • Uncheck “Responsive”
5. Export the artboards to the location of your choice.
6. Upload your icons to a Font Awesome kit! (Learn more)

Exporting Icons from Figma

Check out the Font Awesome Icon Template for Figma to get a jumpstart!

1. Start with each of your icon designs in their own frames.
2. Outline any text or strokes, unless you’re including them as part of a boolean group.
3. When you’re done designing, use one of Figma’s boolean operations to combine your icon into either:
   • One vector node (for monotone)
   • Two vector nodes (one at 100% opacity, and one at < 100% opacity for duotone).
4. Select your icon frame(s) and click the “Export” section in the right sidebar. Choose “SVG” from the dropdown, and export the frames to the location of your choice.
5. Upload your icons to a Font Awesome kit! (Learn more)