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.
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:
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:
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.
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"
Exporting Icons from Adobe Illustrator
- Start with each of your icon designs in their own artboards.
- Outline any strokes with “Object → Path → Outline Stroke,” and any text with “Type → Create Outlines”
- When you’re done designing, use “Object → Compound Path → Make” to combine your icon into either:
- 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.
- Upload your icons to a Font Awesome kit! (Learn more)
Exporting Icons from Figma
- Start with each of your icon designs in their own frames.
- Outline any text or strokes, unless you’re including them as part of a boolean group.
- When you’re done designing, use one of Figma’s boolean operations to combine your icon into either:
- 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.
- Upload your icons to a Font Awesome kit! (Learn more)