Font Awesome Icons - Bootstrap Design System

Usage

Font Awesome icons are included via <i> tags with style and icon classes. Font Awesome 6 Pro includes solid, regular, light, thin, duotone, sharp solid, sharp regular, sharp light, and brands styles.

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-heart text-danger"></i>
<i class="fa-solid fa-star text-warning"></i>
<i class="fa-solid fa-circle-check text-success"></i>

Icon Styles

Font Awesome 6 Pro offers nine different icon style families for maximum design flexibility.

Solid Style

Filled icons with solid shapes - the classic default style.

<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-circle"></i>
<i class="fa-solid fa-bell"></i>

Regular Style

Outlined icons with medium stroke weight.

<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-circle"></i>
<i class="fa-regular fa-bell"></i>

Light Style

Thin outlined icons with lighter visual weight (Pro only).

<i class="fa-light fa-heart"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-circle"></i>
<i class="fa-light fa-bell"></i>

Thin Style

Ultra-thin outlined icons for delicate designs (Pro only).

<i class="fa-thin fa-heart"></i>
<i class="fa-thin fa-star"></i>
<i class="fa-thin fa-circle"></i>
<i class="fa-thin fa-bell"></i>

Duotone Style

Two-tone colored icons with customizable primary and secondary colors (Pro only).

<i class="fa-duotone fa-heart"></i>
<i class="fa-duotone fa-star"></i>
<i class="fa-duotone fa-circle"></i>
<i class="fa-duotone fa-bell"></i>

Sharp Solid Style

Sharp-cornered solid icons for modern, geometric designs (Pro only).

<i class="fa-sharp fa-solid fa-heart"></i>
<i class="fa-sharp fa-solid fa-star"></i>
<i class="fa-sharp fa-solid fa-circle"></i>
<i class="fa-sharp fa-solid fa-bell"></i>

Sharp Regular Style

Sharp-cornered regular outlined icons (Pro only).

<i class="fa-sharp fa-regular fa-heart"></i>
<i class="fa-sharp fa-regular fa-star"></i>
<i class="fa-sharp fa-regular fa-circle"></i>
<i class="fa-sharp fa-regular fa-bell"></i>

Sharp Light Style

Sharp-cornered light outlined icons (Pro only).

<i class="fa-sharp fa-light fa-heart"></i>
<i class="fa-sharp fa-light fa-star"></i>
<i class="fa-sharp fa-light fa-circle"></i>
<i class="fa-sharp fa-light fa-bell"></i>

Brands Style

Brand and logo icons for social media, companies, and services.

<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>

Duotone Customization

Duotone icons feature two layers with customizable colors and opacity levels. Use CSS custom properties to create unique color combinations.

Default Duotone

<i class="fa-duotone fa-house"></i>
<i class="fa-duotone fa-heart"></i>
<i class="fa-duotone fa-star"></i>

Swap Opacity

Use fa-swap-opacity to flip which layer is more prominent.

<i class="fa-duotone fa-house fa-swap-opacity"></i>
<i class="fa-duotone fa-heart fa-swap-opacity"></i>

Custom Colors with CSS Variables

Control duotone colors and opacity using CSS custom properties.

<i class="fa-duotone fa-house"
   style="--fa-primary-color: #0d6efd;
          --fa-secondary-color: #0dcaf0;
          --fa-primary-opacity: 1.0;
          --fa-secondary-opacity: 0.4;"></i>

<i class="fa-duotone fa-heart"
   style="--fa-primary-color: #dc3545;
          --fa-secondary-color: #ffc107;"></i>

CSS Custom Properties

--fa-primary-color: Set the primary layer color
--fa-secondary-color: Set the secondary layer color
--fa-primary-opacity: Set primary layer opacity (0.0 to 1.0)
--fa-secondary-opacity: Set secondary layer opacity (0.0 to 1.0)

Sharp Icons

Font Awesome Pro includes Sharp icon variants with crisp, angular corners for a modern geometric aesthetic. Compare rounded vs sharp styles side-by-side.

Classic vs Sharp Comparison

Classic Solid

Sharp Solid

Sharp Style Variations

All three sharp styles (Solid, Regular, Light) maintain consistent angular corners.

Sharp Solid

Sharp Regular

Sharp Light

<!-- Sharp Solid -->
<i class="fa-sharp fa-solid fa-house"></i>

<!-- Sharp Regular -->
<i class="fa-sharp fa-regular fa-house"></i>

<!-- Sharp Light -->
<i class="fa-sharp fa-light fa-house"></i>

Icon Sizing

Font Awesome provides multiple sizing options using relative and fixed sizing classes.

Relative Sizing

<i class="fa-solid fa-heart fa-2xs"></i>
<i class="fa-solid fa-heart fa-xs"></i>
<i class="fa-solid fa-heart fa-sm"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart fa-lg"></i>
<i class="fa-solid fa-heart fa-xl"></i>
<i class="fa-solid fa-heart fa-2xl"></i>

Fixed Sizing (2x through 10x)

<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-3x"></i>
<i class="fa-solid fa-star fa-4x"></i>

Icon Colors

Use Bootstrap's text color utilities to change icon colors.

<i class="fa-solid fa-circle text-primary"></i>
<i class="fa-solid fa-circle text-success"></i>
<i class="fa-solid fa-circle text-danger"></i>

Animations

Font Awesome 6 includes built-in animation classes for dynamic effects.

<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-spinner fa-pulse"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-triangle-exclamation fa-fade"></i>
<i class="fa-solid fa-basketball fa-bounce"></i>
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-compact-disc fa-flip"></i>

Rotations & Flips

Rotate and flip icons with simple utility classes.

Rotations

<i class="fa-solid fa-arrow-right"></i>
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-rotate-270"></i>

Flips

<i class="fa-solid fa-shield-halved"></i>
<i class="fa-solid fa-shield-halved fa-flip-horizontal"></i>
<i class="fa-solid fa-shield-halved fa-flip-vertical"></i>

Stacking Icons

Stack multiple icons to create composite effects.

<span class="fa-stack fa-2x">
    <i class="fa-solid fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>

Actions & Operations

Common action and operation icons for user interfaces.

plus

minus

xmark

check

pen

pencil

trash

trash-can

floppy-disk

copy

paste

scissors

download

upload

share

link

link-slash

rotate

rotate-right

rotate-left

print

magnifying-glass

ellipsis

ellipsis-vertical

Arrows & Navigation

Directional and navigation icons for interfaces and user flows.

arrow-up

arrow-down

arrow-left

arrow-right

chevron-up

chevron-down

chevron-left

chevron-right

angle-up

angle-down

angle-left

angle-right

angles-up

angles-down

angles-left

angles-right

circle-arrow-up

circle-arrow-down

circle-arrow-left

circle-arrow-right

external-link

sign-in

sign-out

location-arrow

User & People

User, account, and people-related icons.

user

user-group

user-plus

user-minus

user-check

user-xmark

user-gear

user-shield

user-tie

user-doctor

users

users-gear

id-card

address-card

circle-user

person

Communication

Icons for messaging, mail, and communication interfaces.

envelope

envelope-open

message

messages

comment

comments

phone

phone-flip

mobile

inbox

paper-plane

at

bell

bell-slash

rss

bullhorn

Media & Files

Icons for media files, images, and content management.

file

folder

folder-open

image

images

photo-film

video

camera

music

file-pdf

file-word

file-excel

file-powerpoint

file-zipper

file-code

file-lines

Devices & Hardware

Icons for computers, mobile devices, and hardware.

desktop

laptop

tablet

mobile-screen

keyboard

computer-mouse

tv

headphones

microphone

volume-high

volume-xmark

print

camera

video

hard-drive

memory

Commerce & Finance

Shopping, payment, and financial icons.

cart-shopping

bag-shopping

credit-card

money-bill

dollar-sign

euro-sign

sterling-sign

coins

wallet

receipt

tag

Weather & Nature

Weather conditions and nature-related icons.

sun

moon

cloud

cloud-sun

cloud-moon

cloud-rain

cloud-showers-heavy

cloud-bolt

snowflake

wind

temperature-high

temperature-low

droplet

umbrella

rainbow

leaf

UI Elements

Common user interface elements and controls.

house

bars

grip

sliders

filter

gear

gears

list

table

table-cells

calendar

calendar-days

clock

bookmark

star

heart

thumbs-up

thumbs-down

eye

eye-slash

lock

unlock

key

shield

Status & Alerts

Status indicators, alerts, and notification icons.

circle-check

circle-xmark

circle-exclamation

circle-info

circle-question

triangle-exclamation

ban

flag

bookmark

spinner

hourglass

battery-full

battery-half

battery-empty

signal

wifi

Charts & Data

Data visualization and chart icons.

chart-line

chart-bar

chart-pie

chart-column

chart-area

chart-simple

arrow-trend-up

arrow-trend-down

database

table

table-list

calculator

Development & Code

Programming, development, and technical icons.

code

terminal

bug

code-branch

code-commit

code-merge

cube

cubes

server

cloud

gears

wrench

screwdriver-wrench

laptop-code

window-maximize

brackets-curly

Brand Icons

Popular brand and social media logos.

facebook

twitter

instagram

youtube

github

gitlab

bitbucket

google

apple

microsoft

windows

android

linux

aws

docker

More Brands

Additional brand logos and company icons.

discord

slack

tiktok

snapchat

twitch

spotify

dribbble

behance

figma

sketch

node-js

react

vuejs

angular

python

java

npm

bootstrap

wordpress

shopify

Font Awesome Pro Icons