W3.CSS Icons
Unicode Icons
Many common icons are available as Unicode characters.
Home
Menu
Search
Close
Refresh
Check
Warning
Star
Settings
Info
Unicode icons do not require an icon library or an external stylesheet.
Unicode icons can be styled with W3.CSS size and color classes:
Example
<span class="w3-xxlarge w3-text-red">✓</span>
<span class="w3-xxlarge w3-text-blue">★</span>
<span class="w3-xxlarge w3-text-green">⚙</span>
Try It Yourself »
Many common icons are also available as emoji characters, so browsers often render them in colors.
Home
Search
Trash
Example
<div class="w3-xxxlarge">🏠<p class="w3-medium">Home</p></div>
<div class="w3-xxxlarge">🔍<p class="w3-medium">Search</p></div>
<div class="w3-xxxlarge">🗑<p class="w3-medium">Trash</p></div>
Try It Yourself »
Learn More:
Emojis can look slightly different depending on the browser, operating system, and font.
Study our Unicode tutorial.
Icon Libraries
W3.CSS does not include its own icon library.
You can use W3.CSS together with any icon library, for example:
- Font Awesome
- Google Material Icons
- Bootstrap Icons
Using an Icon Library
To use an icon library:
- Include the icon library in the
<head>section. - Add the icon using the syntax required by that library.
W3.CSS size and color classes can be used to style icons:
Example
<i class="fa-solid fa-house w3-xxlarge w3-text-red"></i>
Common W3.CSS size classes include:
w3-tinyw3-smallw3-largew3-xlargew3-xxlargew3-xxxlargew3-jumbo
Font Awesome Icons
Font Awesome is a popular icon library.
Include the Font Awesome stylesheet:
Example
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
Then add icons with Font Awesome classes:
fa-house
fa-bars
fa-arrow-left
fa-arrow-right
fa-magnifying-glass
fa-xmark
fa-rotate-right
fa-trash
fa-user
fa-car
fa-truck
fa-plane
Example
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-cloud"></i>
<i class="fa-solid fa-trash"></i>
Example Explained
fa-solid selects the Solid icon style.
fa-house selects the House icon.
Modern Font Awesome has several style prefixes, such as:
fa-solidfa-regular
In older Font Awesome versions you write:
class="fa fa-home"
Here fa is the base Font Awesome class and fa-home selects the icon.
Bootstrap Icons
Bootstrap Icons is a separate icon library and can be used with or without Bootstrap.
Include the Bootstrap Icons stylesheet:
Example
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
Then add icons with Bootstrap Icon classes:
bi-house
bi-list
bi-arrow-left
bi-arrow-right
bi-search
bi-x-lg
bi-arrow-clockwise
bi-trash
bi-person
bi-car-front
bi-truck
bi-airplane
Example
<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-cloud"></i>
<i class="bi bi-trash"></i>
Google Material Icons
Google Material Icons is an icon library from Google.
Include the Google Material Icons stylesheet:
Example
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
Google Material Icons use the icon name as the element content:
home
menu
arrow_back
arrow_forward
search
close
refresh
delete
person
directions_car
local_shipping
local_airport
Example
<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">cloud</span>
<span class="material-icons">delete</span>
Styling Icons with W3.CSS
W3.CSS size and color classes can be used to style the icons in these examples.
Example
<i class="fa-solid fa-house w3-large w3-text-red"></i>
<i class="fa-solid fa-house w3-xlarge w3-text-green"></i>
<i class="fa-solid fa-house w3-xxlarge w3-text-blue"></i>
What You Have Learned
In this chapter you have learned:
- How to use Unicode icons.
- How to Use icon libraries with W3.CSS
- How to use Font Awesome icons
- How to use Bootstrap Icons
- How to use Google Material Icons
- How to change icon sizes with W3.CSS size classes
- How to Change icon colors with W3.CSS text color classes
