Run into a bit of trouble? Let’s figure out your vector, Victor (or Victoria). Here are some of the more common pits of quick sand, imperial blockades, and troublesome cases we’ve come across when designing and uploading icons.
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 shapes in my SVG!
If you’re seeing shapes like rect, circle, ellipse, and polygon in your SVG code, you’ll need to convert each shape into a path in your source file and then try uploading again.
I’ve got strokes in my SVG!
To make sure that all aspects of your icon scale properly when sizing it on the web, you’ll need to expand all strokes to be part of their path's dimensions.
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 that image to use when designing your icon.
My icon’s scale 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’ve got multiple paths in my SVG!
We recommend icons be created from one single path. You should join paths that don’t overlap into a compound path. If you have paths that overlap each other (and thus have overlapping points), using your design software’s union, subtract, intersect, or exclude tools are the best way to simplify those.
I have overlapping paths in my SVG!
These paths need to be joined into one path. Using the union, subtract, intersect, or exclude tools in your design software is the best way to simplify those.
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 objects with transforms applied that cannot be converted into an icon.
There are transforms 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 SVG contains strokes that need be expanded.
There were strokes detected in your SVG. You'll need to convert all shapes to outlines in your source file, re-export the SVG, and try uploading again.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.This SVG contains fills which should be expanded. Colors are ignored when creating icons.
There were color fills detected 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, remove all colors in your in your source file before exporting your SVG.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. You'll need to remove them, export your SVG again, and reupload.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.This SVG contains lines that need to be expanded.
There are lines in your SVG that need to be expanded. Select any lines in your sources file and convert them to outlines then re-export the SVG and try uploading again.This SVG lacks a valid "viewBox" attribute to define the visible area.
There was no viewBox for your SVG and we weren't able to fix it. You'll need to add a viewBox to your source file, export your SVG again, and reupload.This SVG contains masks applied to objects that cannot be converted into an icon. If you want to mask parts of an icon, use Font Awesome's support styling after you've uploaded your icon.
There are masks in your SVG, so you'll need to make them into a compound path, export your SVG again, and reupload.Extraneous code and comments have been removed.
There were some extra code and comments in your SVG. We can usually remove this stuff without issue since we don't use that information in uploaded SVGs, but you should double-check that the icon looks correct before saving.This SVG has too many points that overlap - you may have duplicated objects.
We detected overlapping points in your SVG, so we couldn't convert it to a single icon. You'll need to make combine them into a single compound path, export your SVG again, and reupload.The icon path data has low precision. This may be fine, but check your icon carefully for distortion from your original.
The numeric values in your SVG data have low precision which may cause distortion when we scale it up. You should double-check that the icon looks correct before saving.All CSS styles and classes have been removed from the SVG.
There was some CSS embedded in your SVG. We can usually remove styles and classes without issue since we don't use that information in uploaded SVGs, but you should double-check that the icon looks correct before saving.Shapes have been converted into paths.
There were some shapes detected 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, outline all objects in your source file before exporting your SVG.All attributes other than "d" have been removed from path(s).
There was some embedded data in your SVG. We can usually remove these types of stuff without issue since we don't use that information in uploaded SVGs, 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.All objects have been ungrouped.
There were some grouped objects in your SVG, and since we can usually guess how to fix these issues, we prepped the SVG for upload. But you should double-check that the icon looks correct before saving, and ungroup all objects in your source file so you don't get the same message again.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.We removed objects found outside of the SVG viewBox.
There were objects 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.We removed objects that were visually hidden.
There were some hidden objects in your SVG, and since we can usually just remove them without causing issues, we prepped the SVG for upload. But you should double-check that the icon looks correct before saving, and remove those objects from your source file so you don't get the same message again.The icon proportions have been scaled up to fit alongside other icons.
We always scale to 512px high (our standard SVG height) and will use CSS to resize it to the equivalent of 16px high (our standard icon height) or whatever size you define using CSS.The icon proportions have been scaled down to fit alongside other icons.
We always scale to 512px high (our standard SVG height) and will use CSS to resize it to the equivalent of 16px high (our standard icon height) or whatever size you define using CSS.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.This SVG lacked a valid "viewBox" attribute to define the visible area so we created one for you. If it doesn't look correct, please try uploading again with your own "viewBox".
There was no viewBox for your SVG and since we can usually guess how to fix these issues, we prepped the SVG for upload. But you should double-check that the icon looks correct before saving, and add a viewBox to your source file so you don't get the same message again.Many upload issues can be fixed by following our icon prep instructions or starting with our Adobe Illustrator or Figma (opens new window) templates.
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 (through your active Pro subscription or from backing/pre-ordering Font Awesome 5). 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 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.
Also note that our Web Fonts-based kits only support the WOFF2 font format and so uploaded icons in Web Font-based kits won't work in Internet Explorer 10 or 11 (those browsers need the older WOFF format). We're exploring options to add WOFF support, but your best bet is to use an SVG-based kit for now.