{{> head title="Modern Icons"}}
{{> sidebar-ela}}
{{> header-ela}}

#### Modern Icons

##### Common Icons

fa-home
fa-user
fa-cog
fa-search
fa-heart
fa-star
fa-bell
fa-envelope
fa-trash
fa-edit
fa-check
fa-times

##### Navigation & Arrows

fa-arrow-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-chevron-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-angle-double-up
fa-angle-double-down
fa-caret-up
fa-caret-down

##### Business & Commerce

fa-chart-line
fa-chart-bar
fa-chart-pie
fa-dollar-sign
fa-shopping-cart
fa-credit-card
fa-briefcase
fa-building
fa-calculator
fa-coins
fa-receipt
fa-wallet

##### Files & Documents

fa-file
fa-file-alt
fa-file-pdf
fa-file-word
fa-file-excel
fa-file-image
fa-folder
fa-folder-open
fa-download
fa-upload
fa-paperclip
fa-copy

##### Social & Brands

fa-facebook
fa-twitter
fa-instagram
fa-linkedin
fa-github
fa-youtube
fa-google
fa-apple
fa-microsoft
fa-slack
fa-discord
fa-whatsapp

##### Common Icons

bi-house
bi-person
bi-gear
bi-search
bi-heart
bi-star
bi-bell
bi-envelope
bi-trash
bi-pencil
bi-check
bi-x

##### Bootstrap Specific

bi-bootstrap
bi-bootstrap-fill
bi-list
bi-grid
bi-grid-3x3
bi-columns
bi-layout-text-sidebar
bi-card-text
bi-menu-button
bi-toggles
bi-sliders
bi-palette

##### Media & Files

bi-image
bi-camera
bi-play-circle
bi-pause-circle
bi-volume-up
bi-volume-mute
bi-file-earmark
bi-file-pdf
bi-file-word
bi-file-excel
bi-file-zip
bi-folder
Icon Sizes

###### Font Awesome Sizes

    <i class="fas fa-star fa-xs"></i>
    <i class="fas fa-star fa-sm"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star fa-lg"></i>
    <i class="fas fa-star fa-2x"></i>
    <i class="fas fa-star fa-3x"></i>

###### Bootstrap Icons with Font Size

    <i class="bi bi-star" style="font-size: 1rem;"></i>
    <i class="bi bi-star" style="font-size: 2rem;"></i>
    <i class="bi bi-star" style="font-size: 3rem;"></i>

Icon Colors

###### Using Bootstrap Text Colors

    <i class="fas fa-heart text-primary"></i>
    <i class="fas fa-heart text-success"></i>
    <i class="fas fa-heart text-danger"></i>

###### Custom Colors

    <i class="bi bi-heart-fill" style="color: #e91e63;"></i>

Icon Animations

###### Font Awesome Animations

    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>

###### Pulse Animation

    <i class="fas fa-heart fa-beat"></i>
    <i class="fas fa-bell fa-shake"></i>

Icon Styles

###### Font Awesome Styles

    <i class="fas fa-user"></i> <!-- Solid -->
    <i class="far fa-user"></i> <!-- Regular -->
    <i class="fab fa-github"></i> <!-- Brands -->

###### Bootstrap Icons Variants

    <i class="bi bi-heart"></i>
    <i class="bi bi-heart-fill"></i>
    <i class="bi bi-heart-half"></i>

Usage in Components

###### Buttons with Icons

###### Input Groups

###### List Groups

- Home
- Profile
- Settings

{{> footer}}
{{> scripts}}