How to Get Free Icon Packs for your Website?

If you are all excited about adding icons to your website after reading my last article on the topic, then this article is a must-read. Here I will share with you 4 ways to get some fancy icons for your website.

#1 Font Awesome

Font awesome is one of my favourite free icon packs. There are over 600 icons to choose from. You can change the icon size, colour and shadow using CSS. This icon pack was originally designed for Bootstrap and is compatible across multiple frameworks. Using Font Awesome icon pack is very easy.

The easiest way to use Font Awesome icons in your website is using Font Awesome CDN. You can enter your email address here and you will be provided with a link via email (e.g. https://use.fontawesome.com/xxxxxxxxxx.js)

You can insert this as follows in the <head> tag of the website.

<script src="https://use.fontawesome.com/xxxxxxxxxx.js></script>

Alternatively, you can download the Font Awesome icon pack and then include the CSS file in your website using the below HTML tag.

<link rel="stylesheet" href="font-awesome-path/css/font-awesome.min.css">

To use the icon you can use the HTML code as follows:

<i class="fa fa-iconcode"></i>
You can find the full set of icon codes here.

#2 Icomoon

IcoMoon  has a free version with 450 icons which includes common pictograms for user interfaces as well as social media and browser symbols. You can also create multicolour icons by using CSS :after and :before selectors.

You can preview the free Icomoon icons here

#3 Fontello

Fontello is a tool to quickly pack vector images into web fonts. As mentioned by the author, this is indeed like Bootstrap for images. It has a big built-in collection of open source artworks of over 2300 icons which include Font Awesome, Fontelico, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons and Web Symbols. You can also upload your icon files to generate web fonts.

Fontello generates archive with fonts, CSS files and docs. And you can include the CSS file in your website using the <link> tag and display icons using <i> tag same as in the case of Font Awesome icons.

You can read all about using Fontello icons here.

#4 Fontastic

Similar to Fontello, Fontastic also packages vector images into web fonts. With Fontastic, you can download over 3500 icons.

You can read all about using Fontastic icons here.

What sets Fontastic apart from Fontello is the possibility of placing icons via data-attributes. Data-attributes see wide-spread use in HTML5-based designs nowadays. In this case, they are an alternative to controlling the pictograms using CSS classes. Just define a shortcut and call the icons like this:

<div class="icon" data-icon="a">text beside icon</div>
Read my previous article about using these icons on your website.

Check Also

Website Header with HTML5 and CSS3

A Simple Website Header with HTML5 and CSS3

Would you like to see the creation process of a simple website header using just HTML5 and CSS3 - from sketch to HTML page to working prototype?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.