CSS: Adding Icons to your Webpage

Icons make the content on your website more visual. Generally, icons are used in buttons alongside text, in navigation menus, or alongside some important information. Earlier whenever someone had to use an icon on their webpage, they used to first download the icon, and then add an img tag with the icon's path as src to show the icon.

Not anymore, thanks to some amazing Icon Fonts like Flaticon Interface Icons, Font Amazing, Google Material Icons and Bootstrap Icons, using which we can directly use the icons without downloading or installing anything.

Also, when we download and use any icon, the size of the icon image is fixed, hence for larger screen resolution it will become blur. Also, if you want one icon in 3 colors, then you have to download 3 different icon images.

Using Icon Font libraries, we can adjust the size, color, shadow of the icon, just like we do for any other text on our webpage.

Font Awesome → website

To use Font awesome library into our webpage, we need to add the following code inside the head tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/
font-awesome.min.css">

The above line of code, includes the CSS file for Font Awesome from the CDN server, and now we can add icons as follows:

<i class="fa fa-cab"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-home"></i&

Live Example →

Google Material Icons → website

To use Google Material icons library into our webpage, we need to add the following code inside the head tag.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

The above line of code, includes the CSS file for Google Material Icons from the Google API server, and now we can add icons as follows:

<i class="material-icons">card_giftcard</i>
<i class="material-icons">fingerprint</i>
<i class="material-icons">place</i>

Live Example →

The Google Material icons are mobile ready and are based on the Android Material theme.

Bootstrap Icons → website

To use Bootstrap 5.x icons library into our webpage, we need to add the following code inside the head tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

The above line of code, includes the CSS file for Bootstrap Icons from the JSDelivr server, and now we can add icons as follows:

<i class="bi bi-alarm"></i>
<i class="bi bi-hammer"></i>
<i class="bi bi-handbag"></i>

Live Example →