Loading icons onto a web page used to be a difficult and tedious task. In the past web developers essentially had to create and load image sprites in order to render any kind of non-text element onto the page. You couldn't really resize them and you couldn't add any type of style either.
At some point as browsers advanced, web developers started to use other means of rendering icons, such as SVG elements and more recently font icon libraries.
FontAwesome is one of those libraries. And it is fantastic for the most part. They have thousands of icons that you can use pretty much use anywhere and most of those icons are free to use. Creating an icon simply comes down to selecting the appropriate class names and adding that class to any inline HTML element such as a <span> or a <i>.
<span class='fa fa-house fa-fw'></span>
But if you are looking for a change and want to break away from the crowd just a bit, there are several alternatives that you can choose from. Here are a few of those alternatives that you might want to consider for your next project.
Fontello
Similar to FontAwesome, Fontello is also a font icon library but with a slight twist. Fontello is a font icon generator meaning that you can build up font icon sets using icons from other libraries. That includes FontAwesome as well. And best of all, you can select only the actual icons that you are interested in using.
You also have the option of modifying the given font icon name to whatever you wish.
Essentially, you get alot of flexibility when using Fontello as your font family generator. Similar to other font icon libraries, rendering an icon comes down to setting the appropriate icon name to an inline element.
<i class='icon-plus'></i>
Once you download the font icon set, you will be given the required css files and woff font files. If you are looking to trim down on your font icon file sizes, then this would be a good start to take.
Material Icons
If you are familiar with Google Fonts already, then you will be familiar with Google's Material Icons. You can include Material Icons in the exact same way that you would include a Google Font family on your webpage.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Font icons can then be included on a page using the following class name structure:
<span class="material-icons">face</span>
The main benefit of using Material Icons is the fact that they are designed using Google's Material Design guidelines. That means high fidelity, clean and simple and that they will look good regardless of where they are being rendered.
And similar to FontAwesome, you can also leverage two-tone color designs as well.
You can download the library right here.
Icofont
Icofont features over 2000 icons broken down into 30 categories for your choosing. Similar to Fontello, you can select only the fonts that you are interested in and create a collection based on those fonts. Once you are done selecting, you can download a new font icon library with only those fonts.
You also get access to the SVG images as well.
Again, this is a great way to reduce the total that it takes for a webpage to fully render and to reduce the initial page load flicker that comes with using web fonts.
Bootstrap Icons
Everyone is familiar with Bootstrap for the most part. It is one of the most highly used HTML, CSS and JS libraries out today. But fewer people are aware of Bootstrap Icons, which feature over 1300 icons that can be used as SVG items or web fonts for free.
And best of all, you don't actually have to use Bootstrap in order to make use of the icons. You can pretty much npm install the icons onto any of your web projects as such:
npm install bootstrap-icons
And you also have the option of linking to the library through the official CDN url.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
To load icons onto your web pages, you can use embedded SVG elements, like the following:
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
Which would render the following.
And like FontAwesome, you can also include the given icon class name to any inline element using the given web fonts, as such:
<i class="bi-alarm"></i>
And much like the other font icon libraries mentioned above, you can use CSS to style and format the icons as well.
If you are using Bootstrap already, then these icons will pair nicely with the framework.
In conclusion
I am a huge fan of FontAwesome and this website uses it in various places, but sometimes, it's good to have options when it comes to design.
So hopefully you consider using these alternatives in your current or future web applications.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.