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.
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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
Two (2) path elements (one of which has <100% opacity)
To delineate the primary and secondary layers for duotone icons
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
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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?
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using 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(opens new window)).
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
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"
Two compound paths (one at 100% opacity, and one at <100% opacity for duotone).
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”
Export the artboards to the location of your choice.
Two vector nodes (one at 100% opacity, and one at <100% opacity for duotone).
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.