Icons

Flat Icon Image

Icons: Facebook, Instagram, Twitter

flat-icon/:

site
├── css
│   └── master.css
├── img
│   ├── facebook.svg
│   ├── instagram.svg
│   └── twitter.svg
└── index.html

ul {
  list-style-type: none;
}

li  {
  display: inline;
}

li img {
  width: 50px;
}

<ul>
  <li>
    <a href="#">
      <img src="img/facebook.svg" alt="Logo Facebook">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/instagram.svg" alt="Logo Instagram">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="img/twitter.svg" alt="Logo Twitter">
    </a>
  </li>
</ul>

Output:

Font Awesome

Icon: Facebook

font-awesome/:

site
├── css
│   └── master.css
└── index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<a href="#">
  <i class="fab fa-facebook"></i>
</a>

a {
  font-size: 2rem;
  color: #3b5898;
  text-decoration: none;
}

Output:

Google Material Icon

Icon: School

material-icon/:

site
├── css
│   └── master.css
└── index.html

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

<a href="#">
  <i class="material-icons">school</i>
</a>

a {
  text-decoration: none;
}

.material-icons {
  color: #ccc;
  font-size: 3rem;
}

.material-icons:hover {
  color: #000;
}

Output:

References