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 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’s code. You’ll need to convert each shape into a path.
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.
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 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.
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.