Troubleshoot Uploads

Run into a bit of trouble? Let’s figure out your vector, Victor (or Victoria). Here are some of the more common pits of quicksand, imperial blockades, and troublesome cases we’ve come across when designing and uploading icons.

Over the years, we’ve improved icon uploads to handle almost anything an intrepid icon designer can throw at us. We automatically strip out extra cruft like masks and groups, and convert shapes and strokes to paths to keep things clean and simple. That said, you might still run into the occasional file we can’t process perfectly.

The file I want to upload isn’t being accepted!

We only accept SVG files (ending in a .svg extension) when uploading icons to a Kit. Sorry, no PNGs, PDFs, etc. If you are trying to upload an SVG file, please make sure it’s a valid SVG.

I’ve got typefaces or font files in my SVG!

It sounds like you forgot to convert any typefaces you used into paths when designing your icon.

I’ve got images in my SVG!

Raster images, like PNGs, GIFs, and JPGs, won’t scale and should be removed from the SVG. If possible, you should find a vector version of the image to use when designing your icon.

My icon looks too small or too large!

Double-check that your viewbox is the correct height. If you’ve designed your icon in software like Adobe Illustrator, check your artboard’s dimensions as well.

The next thing to review is the placement of your icon on that artboard - is it scaled properly to your preferred proportions of the visual canvas?

Not sure what a correct viewbox height is or how to position your icon properly? Check out our icon design guidelines for our recommendations.

Lastly, confirm that there are no other paths or points on the artboard/viewbox. Additional paths or points may cause rendering and scaling issues.

I got a warning or error message I don’t understand!

Here are some of the messages you might get during upload, and what to do about them. (Many can be fixed by following our icon prep instructions.)

This SVG contains some code we can’t understand.

We weren’t able to read the SVG file, either because something happened during export, or maybe it’s not an SVG file? You’ll need to fix your file and try uploading again.

This SVG contains multiple objects that should be joined into one compound path.

There were multiple objects in your SVG, and we prepped the SVG for upload by combining them into a compound path. You should double-check that the icon looks correct before saving. To prevent this message from appearing again, create a single compound path in your source file before exporting your SVG.

Expected to find a valid SVG element.

We weren’t able to read the SVG file, either because something happened during export, or maybe it’s not an SVG file? You’ll need to fix your file and try uploading again.

Contains bitmap images that cannot be converted into icons.

There are bitmap images in your file and we can’t include them in an icon. In this case, we simply removed them from the file, which may cause rendering errors, visual glitches, or a blank icon. We’d suggest removing the bitmap image and re-uploading.

This SVG contains glyphs that cannot be converted into an icon.

There are glyphs in your file and we can’t include them in an icon. You’ll need to remove them, export your SVG again, and reupload.

This icon contains text elements that need to be converted to outlines.

There is text that needs to be converted to outlines in your SVG. You’ll need to outline all strokes for any text in your source file, re-export the SVG, and try uploading again.

We have outlined some strokes.

There were lines in your SVG that needed to be expanded. We prepped the SVG for upload, but you should double-check that the icon looks correct before saving. To prevent this from happening again, convert any lines to outlines in your source file before exporting.

All attributes other than “d” have been removed from path(s).

There was some additional embedded data in your SVG. We can usually remove this type of stuff without issue, but you should double-check that the icon looks correct before saving.

Multiple paths have been joined in a compound path.

There were multiple paths in your SVG but we were able to guess at the correct fix and prep it for upload anyway. You should double-check that the icon looks correct before saving. To prevent this from happening again, create a single compound path for all objects in your source file before exporting your SVG.

Some objects are partially outside of the SVG viewbox.

There were objects partially outside the viewBox for your SVG. You’ll need to adjust your icon so it fits entirely in the viewBox in your source file, export your SVG again, and reupload.

Not sure what went wrong but we were not able to scale this SVG to the correct size, so we can’t upload it.

We aren’t able to scale your icon correctly. Double-check that you followed the icon prep instructions and try uploading again.

Not sure what went wrong but during optimization something failed, so we can’t upload it.

Something unexpected happened during upload, and we weren’t able to upload your icon. Double-check that you followed the icon prep instructions and try uploading again.

This icon contains overlapping paths that might lead to display issues.

There were overlapping paths in your SVG, which may cause display issues. We prepped the SVG for upload, but you should double-check that the icon looks correct before saving. To prevent this from happening again, combine or simplify overlapping elements in your source file.

This SVG has many points that are very close together, which may cause unexpected issues or visual glitches.

There were many tightly packed points in your SVG, which may lead to visual glitches. We prepped the SVG for upload, but you should double-check that the icon looks correct before saving. To avoid this message in the future, simplify your paths before exporting the SVG.

We automatically subtracted the primary layer from the secondary layer.

We prepped the SVG for upload by subtracting the primary layer from the secondary one. You should double-check that the icon looks correct before saving.

The secondary layer was fully covered by the primary and has been removed.

We removed a layer that was completely hidden beneath another. We prepped the SVG for upload, but you should double-check that the icon looks correct before saving. To prevent this in the future, remove hidden layers from your source file before exporting.

My uploaded icons aren’t displaying in my project!

That’s no bueno. Start by reviewing the following things:

You have access to Font Awesome Pro Services. Our Kits, and thus their uploaded icons, are considered a Pro service.
The Kit you’ve referenced in your project contains the uploaded icons you want to use. Uploaded icons are tied to a specific Kit and will only work on projects that reference that Kit.
The domain where you are trying to use the icon is allowed for that Kit (i.e. the Kit is open or the domain has been added).
You’ve added your specific Kit embed code into the <head> portion of your project’s HTML pages or templates.
You’ve referenced the uploaded icon you want to display by using the <i class="fak fa-[uploadedIconName]"></i> syntax in your project’s HTML.
You’re using the right icon prefix (fak) and not one of Font Awesome’s other style prefixes when referencing your uploaded icons.