Ícones

flat-icon
├── css
│   └── style.css
├── img
│   ├── facebook.svg
│   ├── instagram.svg
│   └── twitter.svg
└── index.html

flat-icon
├── css
│   └── style.css
├── img
│   ├── facebook.svg
│   ├── instagram.svg
│   └── twitter.svg
└── index.html

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

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

ul {
  list-style-type: none;
  padding: 0;
}
 
li  {
  display: inline;
}
 
li a {
  text-decoration: none;
}
 
li img {
  width: 50px;
}
 

ul {
  list-style-type: none;
  padding: 0;
}
 
li  {
  display: inline;
}
 
li a {
  text-decoration: none;
}
 
li img {
  width: 50px;
}
 

iconify-icon
├── css
│   └── style.css
└── index.html

iconify-icon
├── css
│   └── style.css
└── index.html

<a href="#">
  <span class="iconify-inline icon" data-icon="fa-solid:home"></span>
</a>

<a href="#">
  <span class="iconify-inline icon" data-icon="fa-solid:home"></span>
</a>

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}
 

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}
 

font-awesome
├── css
│   └── style.css
└── index.html

font-awesome
├── css
│   └── style.css
└── index.html

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

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

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}
 

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}
 

material-icon
├── css
│   └── style.css
└── index.html

material-icon
├── css
│   └── style.css
└── index.html

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

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

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}
 

.dark .icon {
  color: #fff;
}
 
.dark .icon:hover {
  color: #ddd;
}
 
.icon {
  text-decoration: none;
  color: #000;
  font-size: 3rem;
}
 
.icon:hover {
  color: #555;
}