The Best CSS Icon Fonts for Web Designers and Developers

Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. Using @font-face to loaded icon fonts on a webpage. Once a custom icon font to be loaded, you can style them with CSS in the same way you style regular text which has made them a popular choice on the web.

For an example by @font-face.

@font-face {
  font-family: 'Roboto';
  src: local('Roboto Thin'), 
  url(roboto.woff2) format('woff2');
}

Then use it to style elements like this:

body {
  font-family: 'Roboto', sans-serif;
}

Font Awesome

file

Font Awesome is the web's most popular and open project icon set, including brand icons.

Add the following line inside the <head> section.

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

and then referencing icons:

<i class="fas fa-flag"></i>
<i class="fas fa-camera fa-sm"></i> <!-- sizing icon size -->

Google Material Design Icons

file

Material Design Icons by Google free and open source on Github. Material Design is a design language, Material Icons follow the material design guidlines, they are designed to be simple, modern, friendly.

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

and then using the icons in HTML.

<i class="material-icons">face</i>

Learn more about Material Design Icons tutorial, Material Design Icons: Sizing Icons and New Outlined, Shape and More Styles

Line Awesome

file

Line Awesome is a new free font icons alternative for Font Awesome, based off of the Icons8 Windows 10 style.

Line Awesome can have 3 styles: regular, solid or brand. For each style there is a corresponding class: lar, las or lab.

CSS.gg

file

CSS.gg is a set of minimalistic font icons, designed from a developer for developers.

Weather icons

file

Free and open source weather icons on github, including 222 weather themed icons.

The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like:

<i class="wi wi-day-sunny"></i>

Weather icons not published to internet by official that means you should hosting icon fonts by self.

Bootstrap Icons

file

Bootstrap now has its own icon library Bootstrap Icons that are designed to work with Bootstrap components, from form controls to navigation.

Bootstrap Icons are SVGs, so you can't render icon through CSS like Font Awesome on default. But you can use background-image with CSS to display icon.

<style>
      .bi::after {
         display: inline-block;
         content: "";
         background-repeat: no-repeat;
         width: 1rem;
         height: 1rem;
         background-image: url("data:image/svg+xml,<svg class='bi bi-alarm-fill' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.5.5A.5.5 0 016 0h4a.5.5 0 010 1H9v1.07a7.002 7.002 0 013.537 12.26l.817.816a.5.5 0 01-.708.708l-.924-.925A6.967 6.967 0 018 16a6.967 6.967 0 01-3.722-1.07l-.924.924a.5.5 0 01-.708-.708l.817-.816A7.002 7.002 0 017 2.07V1H5.999a.5.5 0 01-.5-.5zM.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 013.527 3.527A2.5 2.5 0 0013.5 1zm-5 4a.5.5 0 00-1 0v3.882l-1.447 2.894a.5.5 0 10.894.448l1.5-3A.5.5 0 008.5 9V5z' clip-rule='evenodd'/></svg>");
      }
   </style>

and the HTML

<i class="bi bi-alarm-fill"></i>

Octicons

file

Octicons are a set of SVG icons built by GitHub for GitHub.

Devicons

Devicons is a full stack iconic font made for developers.

Adding the following code into the <HEAD> section of your HTML:

<link href='//cdn.jsdelivr.net/npm/devicons@1.8.0/css/devicons.min.css' rel='stylesheet'>

and then add the following line code to <BODY>.

<span class="devicons devicons-bing_small"></span>

In The End

Font Awesome and Material Design Icons is my favorite icons in my projects.