Pure CSS Icons

Followings are the list of popular Pure CSS icons libraries.

Font Awesome Icons
Google Material Icons
Bootstrap Icons

How To Use Icon Library

Every icon has its own class.So,you have to place the icon class to the <i> element base class.

CDN:Path

Font Awesome :

     
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

Bootstrap :

     
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google Material :

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

General Syntax

      <i class="custom-alignment--concept"></i>
<i class="material-icons xsmall">cloud</i>
<i class="glyphicon glyphicon-cloud small"></i>

Try it now

Source Code

          
            <i class="custom-alignment--concept"></i>
<i class="fa fa-handshake-o" aria-hidden="true"></i>
<h3>Google Material Design Icons</h3>
<i class="material-icons xsmall">cloud</i>
<i class="material-icons small">cloud</i>
<h3>Bootstrap Icons</h3>
<i class="glyphicon glyphicon-cloud xsmall"></i>
<i class="glyphicon glyphicon-cloud small"></i>

Try it now

Source Code : Output

  

Google Material Design Icons
cloud
cloud
Bootstrap Icons

Pure CSS Icons

How To Use Icon Library

CDN:Path

Google Material Design Icons

Bootstrap Icons

Web Tutorials