Font Awesome


Upload Your Own Icons in Font Awesome Kits!

Written:
on
by Brian Talbot

Why are you keeping this curiosity door locked?

Font Awesome Kits are already the easiest and most performant way to use Font Awesome on the web. But there’s now another reason to love and use them on all of your apps and sites. You can now add your own icons to a kit and use them right alongside (or as a replacement for) official Font Awesome icons!


There’s no “My” in “Icons”. Until Now.

Adding your own icons to Font Awesome Kits shuts the door on some of the most frustrating problems of working with an icon set and opens the ability to use any icon as easily as you do Font Awesome icons!

Have you ever searched through the thousands of Font Awesome icons, but come up with nothing that fits? Now there’s no more “no icons found”. There is another… way to get the icon you need, by adding it yourself! Search your files. You know it to be true.

Add Your Own Logo

Upload your official mark and use it just like you’re used to adding official brand icons. It’s a great way to make sure your brand renders perfectly and can be scaled/styled just the way you want it on your project. 

Examples of logos and fictitious brands alongside Font Awesome Brand Icons
Always wanted your logo added as a Font Awesome brand icon? Now you can yourself!

B.Y.O.I. – Bring Your Own Icons

Upload sets you and your team have made in-house or purchased elsewhere. Name them whatever you’d like – including after official Font Awesome icons to make swapping to a completely different style easy-peasy.

Examples of Font Awesome icons alongside their counterparts from other popular icon sets
Ever have a different set or style of icons you’ve wanted to easily use in a web project?

Update and Tweak Font Awesome Icons

Now you can upload your own version of a Font Awesome icon and replace ours – all without us knowing how much hatred you had. Just remember, hate leads to suffering… and uploading icons.

Examples of custom icons created from Font Awesome icons.
Love Font Awesome but really don’t like how we designed a particular icon?

Really need another state of an icon? There are just times where you need a monster truck with souped-up tires (truck-monster-tricked-out), or to put a ban on bacon (bacon-ban), or to turn down that cowbell (cowbell-less). Okay, well, maybe not that last case. But you get the idea. You can add states or really specific icons your project needs that aren’t covered with default Font Awesome.


What Can I do with Uploaded Icons?

Icons that are uploaded to a Font Awesome kit look, feel, and behave just like Font Awesome’s icons. You can do anything with them that you’ve done with official icons, including:

And, as always with kits, we’ll handle hosting and browser babysitting for you!


Add Your Own Icons Today!

We’re releasing this ability to add your own icons as a beta feature! We like to call it “Kit Icon Upload”. If you’re made of sterner stuff and want to start using it now, here’s what to do:

1 – Grab a subscription to our Standard Pro Plan (if you don’t have one).

2 – Enable Beta features in your account.

Remember! No telling Old Slugworth about anything you see.

3 – Make a kit that uses Pro Icons and is powered by our SVG tech. We’ll be tackling web font-based kits in the future.

A screenshot showing the proper settings to use the Icon Upload feature in a Font Awesome Kit
Icon Upload is only available on Pro + SVG configured kits

4 – Upload your icons as SVGs into that kit. If you’re new to designing icons or working with SVGs, we’ve written guides on how to start designing icons as well as prepping them for upload.

5 – Once you’ve uploaded your SVGs, they’re ready to use and reference (using a new unique fak  prefix) in your project immediately. Now that’s fak-ing awesome!

Try Adding Your Own Icons!

We’ll be looking to make it Kit Icon Upload over time, so if you’ve got any feedback after adding your own icons, give us a shout. We’re all fa-ears.