CSS Icons

Icons are small images, typically less than 30 pixels square.

They provide visual cues that help communicate concepts on webpages.

An icon can be an image, but they can also be characters in a font-file.

Example

#

A telephone icon that comes from a font file.

<link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
      crossorigin="anonymous">

<i class="fa fa-phone"></i>

Adding Icons

Icons can be added with the <img> tag and a small image file.

Or, you can use an icon library, such as Font Awesome.

Simply add the icon's class name to an inline element, such as, <i> or <span>.

Icons from icon libraries are fully customizable with CSS (size, color, shadow, etc.)

Font Awesome

To use Font Awesome icons, add the following line to your page's <head> section:

<link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
      crossorigin="anonymous">

Then select icons using fa fa-* classes. Below are some icons.

<link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" 
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
      crossorigin="anonymous">

<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>

<div class="icon-wrapper">
  <i class="fa fa-check"></i>
  <i class="fa fa-times"></i>
  <i class="fa fa-plus"></i>
  <i class="fa fa-trash"></i>
  <i class="fa fa-heart"></i>
</div>

Bootstrap Icons

To use the Bootstrap icons, add the following line to your page's <head> section:

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

Bootstrap icons can be included in SVG, SVG sprite, or web font format. As web fonts use the correct bi bi-* class names. Below are some examples -- as web font and svg images.

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

<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>

<div class="icon-wrapper">
  <!-- use as web font-->
  <i class="bi bi-arrow-left"></i>
  <i class="bi bi-arrow-right"></i>

  <!-- use as SVG-->
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" />
  </svg>
</div>

Google Icons

To use the Google icons, add the following line to your page's <head> section:

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

Google icons utilizes the material design icons. Include them by using a material-icons class name and the icon name as the content.

home search save battery_full network_wifi
<link rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons">

<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>

<div class="icon-wrapper">
  <i class="material-icons">home</i>
  <i class="material-icons">search</i>
  <i class="material-icons">save</i>
  <i class="material-icons">battery_full</i>
  <i class="material-icons">network_wifi</i>
</div>

Did you know?

Did you know?

Why is the <i> tag used for including icons?

CSS icons are often added using the <i> tag. Why is this?

It's just a matter of convenience because it's shorter than the <span> tag.

The <i> tag can also stand for an icon or image.

Technically, there is no reason why <i> is preferred, its just commonly used.


You may also like

Guides