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.

Ensure a successful icon upload with a template

Take the guesswork out of creating icons by using our official Font Awesome Icon Design Templates for Adobe Illustrator and Figma.

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.

My wide custom icon appears smaller than expected!

If you've uploaded a custom icon that is significantly wider than it is tall, this behavior is expected in certain use cases. Wide icons are handled differently depending on how you're using them:

For detailed information about how wide icons behave in different scenarios, see our wide custom icons rendering guide.

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:

Need Some Help?

Not seeing your issue here or getting the help you need? Get in touch with us and we'll see if we can lend a hand.
    No results