CSS ICON - FONT AWESOME

Font Awesome is one of the easiest ways to add icons to CSS/HTML.

1. Add Font Awesome

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

2. Use icons

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-bars"></i>

3. Style with CSS

.icon {
    font-size: 30px;
    color: #2563eb;
}

.icon:hover {
    color: #1d4ed8;
}

<i class="fa-solid fa-house icon"></i>

Useful Font Awesome icons

<!-- Navigation -->
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-arrow-right"></i>
<i class="fa-solid fa-chevron-down"></i>

<!-- Users -->
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-users"></i>
<i class="fa-solid fa-user-plus"></i>

<!-- Actions -->
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-trash"></i>
<i class="fa-solid fa-pen"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-solid fa-share"></i>

<!-- Social -->
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-x-twitter"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-youtube"></i>

Tip: fa-solid is for solid icons, while fa-brands is for brand/social icons.