Home » Pure CSS » Pure CSS Icons

Pure.CSS Icons

Icons nowadays have become very vibrant. They help to make a website look more attractive and appealing. The icon packs by various sources gives user a huge variety to choose a particular icon suitable to website's look and feel from different options. There are many icon libraries present in the internet which one can use for free of cost or by paying a sum of money.


Pure CSS supports the following popular icon libraries ,these are free to use −
  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

Below are given the CDN paths of the icon packs which you can use to use the icons in your website. Just add these CDN paths in your webpage and you are open to use the icons from huge library.

Note: Just remember that you need to know the name of the classof the icon to add them in your website because every icon has a particular class. You have to place the name of the icon's class within the <i> tag. See the example below to understand how to use icons with <i> tag.

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">


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Icons </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <style> .xsmall { font-size: 70%; } .small { font-size: 85%; } .large { font-size: 110%; } .xlarge { font-size: 150%; } div { margin: 15px; } </style> <body> <h2><center>Icons</center></h2> <hr> <div> <h3>Font Awesome Icons</h3> <i class="fa fa-cloud xsmall"></i> <i class="fa fa-cloud small"></i> <i class="fa fa-cloud"></i> <i class="fa fa-cloud large"></i> <i class="fa fa-cloud xlarge"></i> <h3>Google Material Design Icons</h3> <i class="material-icons xsmall">cloud</i> <i class="material-icons small">cloud</i> <i class="material-icons large">cloud</i> <i class="material-icons xlarge">cloud</i> <i class="material-icons">cloud</i> <i class="material-icons">cloud</i> <h3>Bootstrap Icons</h3> <i class="glyphicon glyphicon-cloud xsmall"></i> <i class="glyphicon glyphicon-cloud small"></i> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-cloud large"></i> <i class="glyphicon glyphicon-cloud xlarge"></i> </div> <div> <button class="pure-button"> <i class="fab fa-google-plus-g fa-lg"></i> Google </button> <a class="pure-button" href="#"> <i class="fab fa-facebook-square fa-lg"></i> Facebook </a> <button class="pure-button"> <i class="fab fa-instagram fa-lg"></i> Instagram </button> <a class="pure-button" href="#"> <i class="fab fa-youtube fa-lg"></i> Youtube </a> <button class="pure-button"> <i class="fab fa-twitter fa-lg"></i> Twitter </button> </div> </body> </html>

Output

Pure.CSS Icons

Icons


Font Awesome Icons

Google Material Design Icons

cloud cloud cloud cloud cloud cloud

Bootstrap Icons

Facebook Youtube












Follow Us: