HTML Icons: How to Add Icons to Your HTML Page Using CSS and Icon Libraries

By Emmanuel Chinonso

Web Developer

Last updated: 06 April 2026

HTML Icons: How to Add Icons to Your Web Pages

Icons are small graphical symbols used in web design to represent actions, categories, or objects. Adding icons to your HTML page improves user experience, makes navigation more intuitive, and gives your website a polished, professional look.

The simplest way to add icons in HTML is by using an icon library such as Font Awesome, Bootstrap Icons, or Google Material Icons. These libraries provide hundreds of free, scalable vector icons that you can customize with CSS for size, color, and effects.

How to Add Icons in HTML

There are three main methods for adding icons to HTML:

Icon font libraries (Font Awesome, Bootstrap Icons) — add via  or  tags with CSS classes
SVG icons — embed inline SVG or use <img> tags
CSS-only icons — use pseudo-elements and CSS shapes (limited use cases)

The most common and easiest approach is using an icon font library. Here is how each major library works.

Adding Icons with Font Awesome

Font Awesome is the most popular icon library for HTML. It offers over 2,000 free icons across solid, regular, and brand styles.

Step 1: Add the Font Awesome CDN link to your HTML <head>:

html

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

Step 2: Use the  tag with the appropriate class:

html

<i class="fas fa-home"></i>       <!-- Solid home icon -->
<i class="fas fa-heart"></i>      <!-- Solid heart icon -->
<i class="fas fa-search"></i>     <!-- Solid search icon -->
<i class="fas fa-envelope"></i>   <!-- Solid envelope icon -->
<i class="fas fa-star"></i>       <!-- Solid star icon -->
<i class="fab fa-github"></i>     <!-- Brand GitHub icon -->
<i class="fab fa-twitter"></i>    <!-- Brand Twitter icon -->

Customizing Font Awesome Icons with CSS

You can change the size, color, and style of Font Awesome icons using CSS:

html

<!-- Change icon size -->
<i class="fas fa-home fa-xs"></i>   <!-- Extra small -->
<i class="fas fa-home fa-sm"></i>   <!-- Small -->
<i class="fas fa-home fa-lg"></i>   <!-- Large -->
<i class="fas fa-home fa-2x"></i>   <!-- 2x size -->
<i class="fas fa-home fa-3x"></i>   <!-- 3x size -->
<i class="fas fa-home fa-5x"></i>   <!-- 5x size -->

<!-- Change icon color -->
<i class="fas fa-heart" style="color: red;"></i>
<i class="fas fa-star" style="color: gold;"></i>

<!-- Animated icons -->
<i class="fas fa-spinner fa-spin"></i>    <!-- Spinning icon -->
<i class="fas fa-circle-notch fa-spin"></i> <!-- Loading spinner -->

Adding Icons with Bootstrap Icons

Bootstrap Icons is an open-source icon library designed specifically for Bootstrap, but it works with any HTML project. It includes over 2,000 icons.

Step 1: Add the Bootstrap Icons CDN:

html

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
</head>

Step 2: Use the  tag with bi classes:

html

<i class="bi bi-house-door"></i>     <!-- Home icon -->
<i class="bi bi-search"></i>         <!-- Search icon -->
<i class="bi bi-person"></i>         <!-- Person icon -->
<i class="bi bi-envelope"></i>       <!-- Envelope icon -->
<i class="bi bi-cart"></i>           <!-- Cart icon -->
<i class="bi bi-gear"></i>           <!-- Settings icon -->
<i class="bi bi-bell"></i>           <!-- Notification bell -->
<i class="bi bi-trash"></i>          <!-- Delete icon -->

Adding Icons with Google Material Icons

Google Material Icons provides a set of icons following Google's Material Design guidelines.

Step 1: Add the Material Icons stylesheet:

html

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>

Step 2: Use the  tag with the material-icons class:

html

<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">favorite</span>
<span class="material-icons">settings</span>
<span class="material-icons">delete</span>
<span class="material-icons">shopping_cart</span>

Adding Icons with Inline SVG

For maximum control, you can embed SVG icons directly in your HTML. SVG icons are scalable, lightweight, and fully customizable with CSS:

html

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  <polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>

Benefits of inline SVG icons:

No external HTTP requests needed
Full CSS control over color, size, and animation
Accessible with aria-label attributes
Sharp at any size on any screen

HTML Icons List: Common Icons by Category

Here is a quick reference list of commonly used HTML icons across icon libraries:

Navigation Icons

Icon	Font Awesome	Bootstrap Icons	Material Icons
Home	`fa-home`	`bi-house-door`	`home`
Search	`fa-search`	`bi-search`	`search`
Menu	`fa-bars`	`bi-list`	`menu`
Arrow Left	`fa-arrow-left`	`bi-arrow-left`	`arrow_back`
Arrow Right	`fa-arrow-right`	`bi-arrow-right`	`arrow_forward`
Close	`fa-times`	`bi-x`	`close`

Action Icons

Icon	Font Awesome	Bootstrap Icons	Material Icons
Edit	`fa-pen`	`bi-pencil`	`edit`
Delete	`fa-trash`	`bi-trash`	`delete`
Download	`fa-download`	`bi-download`	`download`
Upload	`fa-upload`	`bi-upload`	`upload`
Share	`fa-share`	`bi-share`	`share`
Save	`fa-save`	`bi-save`	`save`

Social Media Icons

Icon	Font Awesome	Bootstrap Icons
GitHub	`fab fa-github`	`bi-github`
Twitter/X	`fab fa-twitter`	`bi-twitter-x`
Facebook	`fab fa-facebook`	`bi-facebook`
LinkedIn	`fab fa-linkedin`	`bi-linkedin`
Instagram	`fab fa-instagram`	`bi-instagram`
YouTube	`fab fa-youtube`	`bi-youtube`

Status Icons

Icon	Font Awesome	Bootstrap Icons	Material Icons
Check	`fa-check`	`bi-check`	`check`
Warning	`fa-exclamation-triangle`	`bi-exclamation-triangle`	`warning`
Error	`fa-times-circle`	`bi-x-circle`	`error`
Info	`fa-info-circle`	`bi-info-circle`	`info`
Star	`fa-star`	`bi-star-fill`	`star`
Heart	`fa-heart`	`bi-heart-fill`	`favorite`

Styling Icons with CSS

Regardless of which icon library you use, you can customize icons with standard CSS properties:

css

/* Size */
.icon-large {
  font-size: 2rem;
}

/* Color */
.icon-primary {
  color: #3b82f6;
}

/* Hover effect */
.icon-hover:hover {
  color: #2563eb;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* Icon in a circular background */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e5e7eb;
  color: #374151;
}

html

<i class="fas fa-home icon-large icon-primary"></i>
<i class="fas fa-heart icon-hover"></i>
<span class="icon-circle"><i class="fas fa-user"></i></span>

Frequently Asked Questions

How do I add an icon to my HTML page?

The easiest way is to use an icon font library. Add the library's CDN stylesheet in your <head> tag, then use an  or  element with the icon's CSS class. For example, with Font Awesome: .

What is the best icon library for HTML?

Font Awesome is the most widely used with over 2,000 free icons. Bootstrap Icons is ideal if you already use Bootstrap. Google Material Icons follows Material Design guidelines. All three are free and easy to integrate.

Can I change the color and size of HTML icons?

Yes. Icon font libraries render icons as text, so you can use CSS color and font-size properties to style them. For example: .

Are HTML icons accessible?

Icon fonts alone are not accessible to screen readers. Add aria-hidden="true" for decorative icons and provide an aria-label or visually hidden text for meaningful icons. SVG icons can use role="img" with aria-label for accessibility.

Do icon libraries slow down my website?

Loading a full icon library adds an HTTP request and CSS file (typically 30-80KB). To minimize impact, use a CDN with caching, load only the icon subsets you need, or switch to inline SVG for critical icons.

What is the difference between icon fonts and SVG icons?

Icon fonts use CSS classes and render as text characters — easy to add but limited in multi-color support. SVG icons are embedded as XML graphics — they offer full styling control, multi-color support, and better accessibility, but require more markup.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

CSS Grid

CSS Pagination