4 Easy Ways to Add Icons In HTML CSS (Simple Examples)

Welcome to a beginner’s tutorial on how to add icons in HTML and CSS. Need to add some icons to your website? Make the contents a little easier to navigate.

Here are 4 common ways to add icons in HTML CSS:

Use HTML symbols, simply copy and paste the respective HTML entity code. E.G. ★ represents a star symbol.
Download icon images from websites such as FlatIcon, and use them as it is. E.G. <img src="ICON.PNG">
Use a set of font icons, such as Webdings. E.G. 3456
Load and use icon libraries such as Font Awesome and Material Icons.

But just how are these done exactly? Let us walk through detailed examples in this guide – Read on!

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

EXAMPLE CODE DOWNLOAD

Click here to download

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

ADDING HTML CSS ICONS

All right, let us now get into the various methods on how to add icons in HTML and CSS.

TUTORIAL VIDEO

METHOD 1) HTML SYMBOLS

1A) SIMPLE HTML SYMBOLS

1a-html-symbols.html

<div>&#9733; Star</div>
<div>&#9730; Umbrella</div>
<div>&#9731; Snowman</div>
<div>&#9790; Moon</div>

HTML symbols are “special HTML characters” to represent arrows, currencies, letters, punctuation, Math symbols, units, and more. These symbols are native, there’s no need to load anything “special”.

Just define &#NUMBER; and it will “translate” into the respective HTML symbol. I will leave a link in the extras section below for the complete list of symbols.
HTML symbols are treated as “normal text”. We can customize them using CSS color, font-size, font-weight and text-decoration.

1B) HTML SYMBOLS WITH CSS

1b-html-symbols.html

<!-- (A) DEFINE ICONS -->
<style>
/* (A1) CONTAINER */
.icon {
  display: inline-block;
  width: 40px;
  color: blue;
  font-style: normal;
  font-weight: bold;
  text-align: center;
}
 
/* (A2) SYMBOLS */
.icon.star::before { content: "\02605"; }
.icon.umbrella::before { content: "\02602"; }
.icon.snowman::before { content: "\02603"; }
.icon.moon::before { content: "\0263E"; }
</style>
 
<!-- (B) USE ICONS -->
<div><i class="icon star"></i> Star</div>
<div><i class="icon umbrella"></i> Umbrella</div>
<div><i class="icon snowman"></i> Snowman</div>
<div><i class="icon moon"></i> Moon</div>

This is an alternate way to use HTML symbols in CSS:

(B) The idea is to standardize icons to .
(A1) Use .icon to set a “standard icon container”. So all icons have the same width, size, color, etc…
(A2) Use the .icon.ICON-NAME::before pseudo-class to set the HTML symbol.

METHOD 2) ICON IMAGES

2A) FLAT IMAGE ICON

2a-icon-image.html

<img src="icon-call.png"> So call me maybe?

Captain Obvious to the rescue – There are tons of “free icons” on the Internet. Just download and use them on your website.

2B) IMAGE FONT SET

2b-icon-set.html

<!-- (A) DEFINE ICONS -->
<style>
/* (A1) CONTAINER */
.icon {
  display: inline-block;
  width: 30px; height: 30px;
  background: url("icon-set.png") no-repeat;
}
 
/* (A2) SYMBOLS */
.icon.icon-call { background-position: 0 0; }
.icon.icon-email { background-position: -30px 0px; }
.icon.icon-print { background-position: 0 -30px; }
.icon.icon-phone { background-position: -30px -30px; }
</style>
 
<!-- (B) USE ICONS -->
<div><i class="icon icon-call"></i> Call</div>
<div><i class="icon icon-email"></i> Email</div>
<div><i class="icon icon-print"></i> Print</div>
<div><i class="icon icon-phone"></i> Phone</div>

Following up with the above example – This is a smarter way where we combine all icons into one image.

(B) Same idea as HTML symbols, we standardize all icons to .
(A1) Take note of how this works – Set the icon container to a fixed width and height, and use the icon image as the background.
(A2) “Map” to the exact icon using background-position.

METHOD 3) ICON FONT SET

3-icon-font.html

<!-- (A) DEFINE ICON -->
<style>
@font-face { font-family: Heydings; src: url("heydings_icons.ttf"); }
.icon {
  font-family: Heydings;
  font-style: normal;
}
</style>
 
<!-- (B) USE FONT ICONS -->
<div><i class="icon">8</i> Like</div>
<div><i class="icon">2</i> Dislike</div>

For those who are new – Some fonts contain icons instead of Alphabets. Heydings is one such example.
What we are doing here is simple. Download and host the “icon font” on your server, then use the “icon font” in CSS:
- @font-face { font-family: MYICONFONT; src: url(MYICONFONT.TTF); }
- .icon { font-family: MYICONFONT; }

I will leave some links to more “free font websites” below.

P.S. Just like HTML symbols, “icon fonts” are still fonts. We can apply CSS font size, weight, style, color, etc…

METHOD 4) ICON LIBRARIES

4A) FONT AWESOME

4a-font-awesome.html

<!-- (A) LOAD FROM CDN -->
<!-- https://cdnjs.com/libraries/font-awesome -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/LATEST-VERSION">
 
<!-- (B) DEFINE ICONS -->
<!-- https://fontawesome.com/icons?d=gallery -->
<div><i class="fas fa-bath"></i> Shower</div>
<div><i class="fas fa-bed"></i> Rest</div>
<div><i class="fas fa-battery-full"></i> Recharge</div>

Font Awesome is a popular icon library, and the usage is pretty straightforward.

Load the Font Awesome library from the CDN, and there are a lot of versions. If unsure, just load all.min.css which contains everything.
To insert an icon, use the  tag, and give it a CSS class="fa fa-ICON" – Check out the Font Awesome Gallery for the full list of available icons.

4B) MATERIAL ICONS

4b-mat-icons.html

<!-- (A) LOAD MATERIAL ICONS -->
<!-- https://google.github.io/material-design-icons/ -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
<!-- (B) USE ICONS -->
<!-- https://fonts.google.com/icons -->
<div><i class="material-icons">icecream</i> Ice Cream</div>
<div><i class="material-icons">restaurant</i> Dining</div>
<div><i class="material-icons">emoji_food_beverage</i> Tea</div>
<div><i class="material-icons">local_pizza</i> Pizza</div>

Material Icons is another set of popular free icons, which you may find very familiar… Because it’s by Google. Check out their page on Google Fonts for the full list of icons.

EXTRAS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

I prefer HTML symbols when it comes to small projects, as it is the most lightweight option.
Images are the safest option and will always work, but don’t go crazy – More images will bloat the loading time. Quite a hassle to find good icon sets too.
I usually use Font Awesome and Google Material Icons for projects where people don’t quite mind the loading time – Admin panels and complex web apps.

INFOGRAPHIC CHEATSHEET

Ways To Add Icons In HTML CSS (Click To Enlarge)

LINKS & REFERENCES

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!