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.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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.
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!
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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?
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.
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.
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.
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.