Web Icons - Quick Guide

Web Icons - Introduction

An icon is a symbol that is used to represent a specific action or a capability on a webpage. Icons are used in documents as well as applications and they can be either selectable or non-selectable. For example, the images that we see on the buttons of an application are all icons and these buttons are selectable. Similarly, when we use an icon as a company logo, it is normally non-selectable.

In Windows environment, if we mute the system volume, it will be represented with the help of an icon, as shown below.

Using web icons, we can represent a loading page, a disabled option, a link, a redirection, etc. These icons can be flipped, rotated, resized, bordered, inverted, and colored.

Icon Fonts

Icon Fonts contain symbols and glyphs. Once you load a desired font, you can use any of the icons provided by that font using the class name of the icon. We can also apply different colors to the icons and resize them using the CSS properties. There are several icon libraries(fonts) that provide icons. This tutorial focuses on three main fonts, namely −

Font Awesome
Bootstrap Glyphicons
Google's Material Icons

Font Awesome

This font provides 519 free scalable vector icons. This library is completely free, for both personal as well as commercial use. These icons can be customized easily. Originally, they were developed for Bootstrap.

Bootstrap Glyphicons

This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in your web projects. These icons are not free, however you can use them in Bootstrap based projects without having to purchase them.

Google's Material Icons

Google provides about 750 icons designed under "material designed guidelines" and these are known as Material Design icons. These icons are simple and they support all modern web browsers. Since these icons are vector based, they are scalable as well. To use these icons, we have to load the font (library) material-icons.

Font Awesome Icons

Font Awesome icons library provides 519 free scalable vector icons. This library is completely free for both personal and commercial use. Originally designed for Bootstrap, these icons can be customized easily.

Loading the Font Library

To load the Font Awesome library, copy and paste the following line in the <head> section of the webpage.

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

Using the Icon

Font Awesome provides several icons. Choose one of them and add the name of the icon class to any HTML element within the <body> tag. In the following example, we have used the icon of the Indian currency.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

It will produce the following output −

Defining the Size

You can increase or decrease the size of an icon by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have declared the size as 6 em.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

It will produce the following output −

Defining the Color

Just like size, you can define the color of the icons using CSS. The following example shows how to change the color of the Indian currency icon.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

List of Categories

Font Awesome provides 519 icons in the following categories −

Web Application Icons
Hand Icons
Transportation Icons
Gender Icons
File Type Icons
Spinner Icons
Form Control Icons
Payment Icons
Chart Icons
Currency Icons
Text editor Icons
Directional Icons
Video Player Icons
Brand Icons

To use any of these icons, you have to replace the class name in the programs given in this chapter with the class name of the desired icon. In the coming chapters of this Unit (Font Awesome), we have explained category-wise the usage and the respective outputs of various Font Awesome icons.

Font Awesome - Web Application Icons

This chapter explains the usage of Font Awesome Web Application icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Web Application icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class= "fa fa-adjust custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-archive custom"></i>
<i class="fa fa-area-chart custom"></i>
<i class="fa fa-arrows custom"></i>
<i class="fa fa-arrows-h custom"></i>
<i class="fa fa-arrows-v custom"></i>
<i class="fa fa-asterisk custom"></i>
<i class="fa fa-at custom"></i>
<i class="fa fa-automobile custom"></i>
<i class="fa fa-balance-scale custom"></i>
<i class="fa fa-ban custom"></i>
<i class="fa fa-bank custom"></i>
<i class="fa fa-bar-chart custom"></i>
<i class="fa fa-bar-chart-o custom"></i>
<i class="fa fa-barcode custom"></i>
<i class="fa fa-bars custom"></i>
<i class="fa fa-bed custom"></i>
<i class="fa fa-beer custom"></i>
<i class="fa fa-bell custom"></i>
<i class="fa fa-wrench custom"></i>
<i class="fa fa-bell-o custom"></i>
<i class="fa fa-bell-slash custom"></i>
<i class="fa fa-bell-slash-o custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-battery-0 custom"></i>
<i class="fa fa-battery-1 custom"></i>
<i class="fa fa-battery-2 custom"></i>
<i class="fa fa-battery-3 custom"></i>
<i class="fa fa-battery-4 custom"></i>
<i class="fa fa-battery-empty custom"></i>
<i class="fa fa-battery-quarter custom"></i>
<i class="fa fa-battery-half custom"></i>
<i class="fa fa-battery-three-quarters custom"></i>
<i class="fa fa-battery-full custom"></i>
<i class="fa fa-birthday-cake custom"></i>
<i class="fa fa-bolt custom"></i>
<i class="fa fa-bomb custom"></i>
<i class="fa fa-book custom"></i>
<i class="fa fa-bookmark custom"></i>
<i class="fa fa-bookmark-o custom"></i>
<i class="fa fa-briefcase custom"></i>
<i class="fa fa-bug custom"></i>
<i class="fa fa-building custom"></i>
<i class="fa fa-building-o custom"></i>
<i class="fa fa-bullhorn custom"></i>
<i class="fa fa-bullseye custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-video-camera custom"></i>
<i class="fa fa-calendar custom"></i>
<i class="fa fa-calendar-check-o custom"></i>
<i class="fa fa-calendar-minus-o custom"></i>
<i class="fa fa-calendar-o custom"></i>
<i class="fa fa-calendar-plus-o custom"></i>
<i class="fa fa-calendar-times-o custom"></i>
<i class="fa fa-camera custom"></i>
<i class="fa fa-camera-retro custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-cc custom"></i>
<i class="fa fa-caret-square-o-down custom"></i>
<i class="fa fa-caret-square-o-left custom"></i>
<i class="fa fa-caret-square-o-right custom"></i>
<i class="fa fa-caret-square-o-up custom"></i>
<i class="fa fa-cart-arrow-down custom"></i>
<i class="fa fa-cart-plus custom"></i>
<i class="fa fa-certificate custom"></i>
<i class="fa fa-child custom"></i>
<i class="fa fa-check custom"></i>
<i class="fa fa-check-circle custom"></i>
<i class="fa fa-check-circle-o custom"></i>
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-circle-thin custom"></i>
<i class="fa fa-clock-o custom"></i>
<i class="fa fa-clone custom"></i>
<i class="fa fa-close custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-cloud-download custom"></i>
<i class="fa fa-cloud-upload custom"></i>
<i class="fa fa-code custom"></i>
<i class="fa fa-code-fork custom"></i>
<i class="fa fa-coffee custom"></i>
<i class="fa fa-cog custom"></i>
<i class="fa fa-cogs custom"></i>
<i class="fa fa-comment custom"></i>
<i class="fa fa-comment-o custom"></i>
<i class="fa fa-commenting custom"></i>
<i class="fa fa-commenting-o custom"></i>
<i class="fa fa-comments custom"></i>
<i class="fa fa-comments-o custom"></i>
<i class="fa fa-compass custom"></i>
<i class="fa fa-copyright custom"></i>
<i class="fa fa-creative-commons custom"></i>
<i class="fa fa-credit-card custom"></i>
<i class="fa fa-crop custom"></i>
<i class="fa fa-crosshairs custom"></i>
<i class="fa fa-cube custom"></i>
<i class="fa fa-cubes custom"></i>
<i class="fa fa-cutlery custom"></i>
<i class="fa fa-dashboard custom"></i>
<i class="fa fa-database custom"></i>
<i class="fa fa-desktop custom"></i>
<i class="fa fa-diamond custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-download custom"></i>
<i class="fa fa-edit custom"></i>
<i class="fa fa-ellipsis-h custom"></i>
<i class="fa fa-ellipsis-v custom"></i>
<i class="fa fa-envelope custom"></i>
<i class="fa fa-envelope-o custom"></i>
<i class="fa fa-envelope-square custom"></i>
<i class="fa fa-eraser custom"></i>
<i class="fa fa-exchange custom"></i>
<i class="fa fa-exclamation custom"></i>
<i class="fa fa-exclamation-circle custom"></i>
<i class="fa fa-exclamation-triangle custom"></i>
<i class="fa fa-external-link custom"></i>
<i class="fa fa-external-link-square custom"></i>
<i class="fa fa-eye custom"></i>
<i class="fa fa-eye-slash custom"></i>
<i class="fa fa-eyedropper custom"></i>
<i class="fa fa-fax custom"></i>
<i class="fa fa-feed custom"></i>
<i class="fa fa-female custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-file-archive-o custom"></i>
<i class="fa fa-file-audio-o custom"></i>
<i class="fa fa-file-code-o custom"></i>
<i class="fa fa-file-excel-o custom"></i>
<i class="fa fa-volume-down custom"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-pdf-o custom"></i>
<i class="fa fa-file-photo-o custom"></i>
<i class="fa fa-file-picture-o custom"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o custom"></i>
<i class="fa fa-film custom"></i>
<i class="fa fa-filter custom"></i>
<i class="fa fa-fire custom"></i>
<i class="fa fa-fire-extinguisher custom"></i>
<i class="fa fa-flag custom"></i>
<i class="fa fa-flag-checkered custom"></i>
<i class="fa fa-flag-o custom"></i>
<i class="fa fa-flash custom"></i>
<i class="fa fa-flask custom"></i>
<i class="fa fa-flask custom"></i>
<i class="fa fa-folder custom"></i>
<i class="fa fa-folder-o custom"></i>
<i class="fa fa-folder-open custom"></i>
<i class="fa fa-folder-open-o custom"></i>
<i class="fa fa-frown-o custom"></i>
<i class="fa fa-volume-off custom"></i>
<i class="fa fa-gamepad custom"></i>
<i class="fa fa-gavel custom"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-gears custom"></i>
<i class="fa fa-gift custom"></i>
<i class="fa fa-glass custom"></i>
<i class="fa fa-globe custom"></i>
<i class="fa fa-graduation-cap custom"></i>
<i class="fa fa-group custom"></i>
<i class="fa fa-hand-grab-o custom"></i>
<i class="fa fa-hand-lizard-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hand-peace-o custom"></i>
<i class="fa fa-hand-pointer-o custom"></i>
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-scissors-o custom"></i>
<i class="fa fa-hand-spock-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hdd-o custom"></i>
<i class="fa fa-headphones custom"></i>
<i class="fa fa-heart custom"></i>
<i class="fa fa-heart-o custom"></i>
<i class="fa fa-heartbeat custom"></i>
<i class="fa fa-history custom"></i>
<i class="fa fa-home custom"></i>
<i class="fa fa-hotel custom"></i>
<i class="fa fa-hourglass custom"></i>
<i class="fa fa-hourglass-start custom"></i>
<i class="fa fa-hourglass-half custom"></i>
<i class="fa fa-hourglass-end custom"></i>
<i class="fa fa-i-cursor custom"></i>
<i class="fa fa-image custom"></i>
<i class="fa fa-inbox custom"></i>
<i class="fa fa-industry custom"></i>
<i class="fa fa-info custom"></i>
<i class="fa fa-info-circle custom"></i>
<i class="fa fa-institution custom"></i>
<i class="fa fa-key custom"></i>
<i class="fa fa-keyboard-o custom"></i>
<i class="fa fa-language custom"></i>
<i class="fa fa-laptop custom"></i>
<i class="fa fa-leaf custom"></i>
<i class="fa fa-legal custom"></i>
<i class="fa fa-lemon-o custom"></i>
<i class="fa fa-level-down custom"></i>
<i class="fa fa-level-up custom"></i>
<i class="fa fa-life-bouy custom"></i>
<i class="fa fa-life-ring custom"></i>
<i class="fa fa-life-saver custom"></i>
<i class="fa fa-lightbulb-o custom"></i>
<i class="fa fa-line-chart custom"></i>
<i class="fa fa-location-arrow custom"></i>
<i class="fa fa-lock custom"></i>
<i class="fa fa-magic custom"></i>
<i class="fa fa-magnet custom"></i>
<i class="fa fa-mail-forward custom"></i>
<i class="fa fa-mail-reply custom"></i>
<i class="fa fa-mail-reply-all custom"></i>
<i class="fa fa-male custom"></i>
<i class="fa fa-map custom"></i>
<i class="fa fa-map-marker custom"></i>
<i class="fa fa-map-o custom"></i>
<i class="fa fa-map-pin custom"></i>
<i class="fa fa-map-signs custom"></i>
<i class="fa fa-meh-o custom"></i>
<i class="fa fa-microphone custom"></i>
<i class="fa fa-microphone-slash custom"></i>
<i class="fa fa-minus custom"></i>
<i class="fa fa-minus-circle custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i>
<i class="fa fa-mobile custom"></i>
<i class="fa fa-money custom"></i>
<i class="fa fa-moon-o custom"></i>
<i class="fa fa-mortar-board custom"></i>
<i class="fa fa-motorcycle custom"></i>
<i class="fa fa-mouse-pointer custom"></i>
<i class="fa fa-music custom"></i>
<i class="fa fa-users custom"></i>
<i class="fa fa-object-group custom"></i>
<i class="fa fa-object-ungroup custom"></i>
<i class="fa fa-paint-brush custom"></i>
<i class="fa fa-paper-plane custom"></i>
<i class="fa fa-paper-plane-o custom"></i>
<i class="fa fa-paw custom"></i>
<i class="fa fa-pencil custom"></i>
<i class="fa fa-pencil-square custom"></i>
<i class="fa fa-pencil-square-o custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-photo custom"></i>
<i class="fa fa-picture-o custom"></i>
<i class="fa fa-pie-chart custom"></i>
<i class="fa fa-plane custom"></i>
<i class="fa fa-volume-up custom"></i>
<i class="fa fa-plus custom"></i>
<i class="fa fa-plus-circle custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-plus-square-o custom"></i>
<i class="fa fa-power-off custom"></i>
<i class="fa fa-print custom"></i>
<i class="fa fa-puzzle-piece custom"></i>
<i class="fa fa-qrcode custom"></i>
<i class="fa fa-question custom"></i>
<i class="fa fa-question-circle custom"></i>
<i class="fa fa-quote-left custom"></i>
<i class="fa fa-quote-right custom"></i>
<i class="fa fa-random custom"></i>
<i class="fa fa-recycle custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-registered custom"></i>
<i class="fa fa-remove custom"></i>
<i class="fa fa-reorder custom"></i>
<i class="fa fa-reply custom"></i>
<i class="fa fa-reply-all custom"></i>
<i class="fa fa-retweet custom"></i>
<i class="fa fa-road custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-rss custom"></i>
<i class="fa fa-rss-square custom"></i>
<i class="fa fa-search custom"></i>
<i class="fa fa-search-minus custom"></i>
<i class="fa fa-search-plus custom"></i>
<i class="fa fa-send custom"></i>
<i class="fa fa-send-o custom"></i>
<i class="fa fa-server custom"></i>
<i class="fa fa-share custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-share-alt-o custom"></i>
<i class="fa fa-shield custom"></i>
<i class="fa fa-ship custom"></i>
<i class="fa fa-shopping-cart custom"></i>
<i class="fa fa-sign-in custom"></i>
<i class="fa fa-sign-out custom"></i>
<i class="fa fa-signal custom"></i>
<i class="fa fa-sitemap custom"></i>
<i class="fa fa-sliders custom"></i>
<i class="fa fa-smile-o custom"></i>
<i class="fa fa-warning custom"></i>
<i class="fa fa-sort custom"></i>
<i class="fa fa-sort-alpha-asc custom"></i>
<i class="fa fa-sort-alpha-desc custom"></i>
<i class="fa fa-sort-asc custom"></i>
<i class="fa fa-sort-desc custom"></i>
<i class="fa fa-sort-down custom"></i>
<i class="fa fa-sort-numeric-asc custom"></i>
<i class="fa fa-sort-numeric-desc custom"></i>
<i class="fa fa-sort-up custom"></i>
<i class="fa fa-space-shuttle custom"></i>
<i class="fa fa-spinner custom"></i>
<i class="fa fa-spoon custom"></i>
<i class="fa fa-square custom"></i>
<i class="fa fa-square-o custom"></i>
<i class="fa fa-star custom"></i>
<i class="fa fa-star-half custom"></i>
<i class="fa fa-star-half-empty custom"></i>
<i class="fa fa-star-half-full custom"></i>
<i class="fa fa-star-half-o custom"></i>
<i class="fa fa-star-o custom"></i>
<i class="fa fa-sticky-note custom"></i>
<i class="fa fa-sticky-note-o custom"></i>
<i class="fa fa-street-view custom"></i>
<i class="fa fa-suitcase custom"></i>
<i class="fa fa-sun-o custom"></i>
<i class="fa fa-support custom"></i>
<i class="fa fa-tablet custom"></i>
<i class="fa fa-tachometer custom"></i>
<i class="fa fa-tag custom"></i>
<i class="fa fa-tags custom"></i>
<i class="fa fa-tasks custom"></i>
<i class="fa fa-taxi custom"></i>
<i class="fa fa-television custom"></i>
<i class="fa fa-terminal custom"></i>
<i class="fa fa-thumb-tack custom"></i>
<i class="fa fa-thumbs-down custom"></i>
<i class="fa fa-ticket custom"></i>
<i class="fa fa-times custom"></i>
<i class="fa fa-times-circle custom"></i>
<i class="fa fa-times-circle-o custom"></i>
<i class="fa fa-tint custom"></i>
<i class="fa fa-toggle-down custom"></i>
<i class="fa fa-toggle-left custom"></i>
<i class="fa fa-toggle-off custom"></i>
<i class="fa fa-toggle-on custom"></i>
<i class="fa fa-toggle-right custom"></i>
<i class="fa fa-toggle-up custom"></i>
<i class="fa fa-trademark custom"></i>
<i class="fa fa-tras custom"></i>
<i class="fa fa-trash-o custom"></i>
<i class="fa fa-tree custom"></i>
<i class="fa fa-trophy custom"></i>
<i class="fa fa-truck custom"></i>
<i class="fa fa-wheelchair custom"></i>
<i class="fa fa-tv custom"></i>
<i class="fa fa-umbrella custom"></i>
<i class="fa fa-university custom"></i>
<i class="fa fa-unlock custom"></i>
<i class="fa fa-unlock-alt custom"></i>
<i class="fa fa-unsorted custom"></i>
<i class="fa fa-upload custom"></i>
<i class="fa fa-user custom"></i>
<i class="fa fa-user-plus custom"></i>
<i class="fa fa-user-secret custom"></i>
<i class="fa fa-user-times custom"></i>

Font Awesome - Hand Icons

This chapter explains the usage of Font Awesome Hand icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Hand icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-o-left custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-stop-o custom"></i>
<i class="fa fa-thumbs-o-up custom"></i>
<i class="fa fa-hand-lizard-o custom"></i>
<i class="fa fa-hand-o-right custom"></i>
<i class="fa fa-hand-peace-o custom"></i>
<i class="fa fa-hand-scissors-o custom"></i>
<i class="fa fa-thumbs-down custom"></i>
<i class="fa fa-thumbs-up custom"></i>
<i class="fa fa-hand-o-up custom"></i>
<i class="fa fa-hand-pointer-o custom"></i>
<i class="fa fa-hand-spock-o custom"></i>
<i class="fa fa-thumbs-o-down custom"></i>

Font Awesome - Transportation Icons

This chapter explains the usage of Font Awesome Transportation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Transportation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-ambulance custom"></i>
<i class="fa fa-automobile custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-motorcycle custom"></i>
<i class="fa fa-plane custom"></i>
<i class="fa fa-rocket custom"></i>
<i class="fa fa-ship custom"></i>
<i class="fa fa-space-shuttle custom"></i>
<i class="fa fa-subway custom"></i>
<i class="fa fa-taxi custom"></i>
<i class="fa fa-train custom"></i>
<i class="fa fa-truck custom"></i>
<i class="fa fa-wheelchair custom"></i>

Font Awesome - Gender Icons

This chapter explains the usage of Font Awesome Gender icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Gender icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-genderless custom"></i>
<i class="fa fa-intersex custom"></i>
<i class="fa fa-mars custom"></i>
<i class="fa fa-mars-double custom"></i>
<i class="fa fa-mars-stroke custom"></i>
<i class="fa fa-mars-stroke-h custom"></i>
<i class="fa fa-mars-stroke-v custom"></i>
<i class="fa fa-mercury custom"></i>
<i class="fa fa-neuter custom"></i>
<i class="fa fa-transgender custom"></i>
<i class="fa fa-transgender-alt custom"></i>
<i class="fa fa-venus custom"></i>
<i class="fa fa-venus-double custom"></i>
<i class="fa fa-venus-mars custom"></i>

Font Awesome - File Type Icons

This chapter explains the usage of Font Awesome File Type icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

Live Demo

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome File Type icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-file custom"></i>
<i class="fa fa-file-archive-o custom"></i>
<i class="fa fa-file-audio-o custom"></i>
<i class="fa fa-file-code-o custom"></i>
<i class="fa fa-file-excel-o custom"></i>
<i class="fa fa-file-image-o custom"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-o custom"></i>
<i class="fa fa-file-pdf-o custom"></i>
<i class="fa fa-file-photo-o custom"></i>
<i class="fa fa-file-picture-o custom"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-text custom"></i>
<i class="fa fa-file-text-o custom"></i>

Font Awesome - Spinner Icons

This chapter explains the usage of Font Awesome Spinner icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Spinner icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-cog custom"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-spinner custom"></i>

Font Awesome - Form Control Icons

This chapter explains the usage of Font Awesome Form Control icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Form Control icons. Replace the <body> tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-plus-square-o custom"></i>
<i class="fa fa-square custom"></i>
<i class="fa fa-square-o custom"></i>

Font Awesome - Payment Icons

This chapter explains the usage of Font Awesome Payment icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Payment icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-cc-amex custom"></i>
<i class="fa fa-cc-diners-club custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-stripe custom"></i>
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-credit-card custom"></i>

Font Awesome - Chart Icons

This chapter explains the usage of Font Awesome Chart icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Chart icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-area-chart custom"></i>
<i class="fa fa-bar-chart custom"></i>
<i class="fa fa-bar-chart-o custom"></i>
<i class="fa fa-line-chart custom"></i>
<i class="fa fa-pie-chart custom"></i>

Font Awesome - Currency Icons

This chapter explains the usage of Font Awesome Currency icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Currency icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-bitcoin custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-cny custom"></i>
<i class="fa fa-dollar custom"></i>
<i class="fa fa-eur custom"></i>
<i class="fa fa-euro custom"></i>
<i class="fa fa-gbp custom"></i>
<i class="fa fa-gg custom"></i>
<i class="fa fa-gg-circle custom"></i>
<i class="fa fa-ils custom"></i>
<i class="fa fa-inr custom"></i>
<i class="fa fa-jpy custom"></i>
<i class="fa fa-krw custom"></i>
<i class="fa fa-money custom"></i>
<i class="fa fa-rmb custom"></i>
<i class="fa fa-rouble custom"></i>
<i class="fa fa-rub custom"></i>
<i class="fa fa-ruble custom"></i>
<i class="fa fa-rupee custom"></i>
<i class="fa fa-shekel custom"></i>
<i class="fa fa-sheqel custom"></i>
<i class="fa fa-try custom"></i>
<i class="fa fa-turkish-lira custom"></i>
<i class="fa fa-usd custom"></i>
<i class="fa fa-won custom"></i>
<i class="fa fa-yen custom"></i>

Font Awesome - Text Editor Icons

This chapter explains the usage of Font Awesome Text Editor icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Text Editor icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-align-center custom"></i>
<i class="fa fa-align-justify custom"></i>
<i class="fa fa-align-left custom"></i>
<i class="fa fa-align-right custom"></i>
<i class="fa fa-bold custom"></i>
<i class="fa fa-chain custom"></i>
<i class="fa fa-chain-broken custom"></i>
<i class="fa fa-clipboard custom"></i>
<i class="fa fa-columns custom"></i>
<i class="fa fa-copy custom"></i>
<i class="fa fa-cut custom"></i>
<i class="fa fa-dedent custom"></i>
<i class="fa fa-eraser custom"></i>
<i class="fa fa-file custom"></i>
<i class="fa fa-file-o custom"></i>
<i class="fa fa-file-text custom"></i>
<i class="fa fa-file-text-o custom"></i>
<i class="fa fa-files-o custom"></i>
<i class="fa fa-floppy-o custom"></i>
<i class="fa fa-font custom"></i>
<i class="fa fa-header custom"></i>
<i class="fa fa-indent custom"></i>
<i class="fa fa-italic custom"></i>
<i class="fa fa-link custom"></i>
<i class="fa fa-list custom"></i>
<i class="fa fa-list-alt custom"></i>
<i class="fa fa-list-ol custom"></i>
<i class="fa fa-list-ul custom"></i>
<i class="fa fa-outdent custom"></i>
<i class="fa fa-paperclip custom"></i>
<i class="fa fa-paragraph custom"></i>
<i class="fa fa-paste custom"></i>
<i class="fa fa-repeat custom"></i>
<i class="fa fa-rotate-left custom"></i>
<i class="fa fa-rotate-right custom"></i>
<i class="fa fa-save custom"></i>
<i class="fa fa-scissors custom"></i>
<i class="fa fa-strikethrough custom"></i>
<i class="fa fa-subscript custom"></i>
<i class="fa fa-table custom"></i>
<i class="fa fa-text-heigh custom"></i>
<i class="fa fa-text-width custom"></i>
<i class="fa fa-th custom"></i>
<i class="fa fa-th-large custom"></i>
<i class="fa fa-th-list custom"></i>
<i class="fa fa-underline custom"></i>
<i class="fa fa-undo custom"></i>
<i class="fa fa-unlink custom"></i>

Font Awesome - Directional Icons

This chapter explains the usage of Font Awesome Directional icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Directional icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="fa fa-angle-double-down custom" ></i>
<i class="fa fa-angle-double-left custom" ></i>
<i class="fa fa-angle-double-right custom" ></i>
<i class="fa fa-angle-double-up custom" ></i>
<i class="fa fa-angle-down custom" ></i>
<i class="fa fa-angle-left custom" ></i>
<i class="fa fa-angle-right custom" ></i>
<i class="fa fa-angle-up custom" ></i>
<i class="fa fa-arrow-circle-down custom" ></i>
<i class="fa fa-arrow-circle-left custom" ></i>
<i class="fa fa-arrow-circle-right custom" ></i>
<i class="fa fa-arrow-circle-up custom" ></i>
<i class="fa fa-arrow-circle-o-down custom" ></i>
<i class="fa fa-arrow-circle-o-left custom" ></i>
<i class="fa fa-arrow-circle-o-right custom" ></i>
<i class="fa fa-arrow-circle-o-up custom" ></i>
<i class="fa fa-arrow-down custom" ></i>
<i class="fa fa-arrow-left custom" ></i>
<i class="fa fa-arrow-right custom" ></i>
<i class="fa fa-arrow-up custom" ></i>
<i class="fa fa-arrows custom" ></i>
<i class="fa fa-arrows-alt custom" ></i>
<i class="fa fa-arrows-h custom" ></i>
<i class="fa fa-arrows-v custom" ></i>
<i class="fa fa-caret-down custom" ></i>
<i class="fa fa-caret-left custom" ></i>
<i class="fa fa-caret-right custom" ></i>
<i class="fa fa-caret-up custom" ></i>
<i class="fa fa-caret-square-o-down custom" ></i>
<i class="fa fa-caret-square-o-left custom" ></i>
<i class="fa fa-caret-square-o-right custom" ></i>
<i class="fa fa-caret-square-o-up custom" ></i>
<i class="fa fa-chevron-circle-down custom" ></i>
<i class="fa fa-chevron-circle-left custom" ></i>
<i class="fa fa-chevron-circle-right custom" ></i>
<i class="fa fa-chevron-circle-up custom" ></i>
<i class="fa fa-chevron-down custom" ></i>
<i class="fa fa-chevron-left custom" ></i>
<i class="fa fa-chevron-right custom" ></i>
<i class="fa fa-chevron-up custom" ></i>
<i class="fa fa-hand-o-down custom" ></i>
<i class="fa fa-hand-o-left custom" ></i>
<i class="fa fa-hand-o-right custom" ></i>
<i class="fa fa-hand-o-up custom" ></i>
<i class="fa fa-long-arrow-down custom" ></i>
<i class="fa fa-long-arrow-left custom" ></i>
<i class="fa fa-long-arrow-right custom" ></i>
<i class="fa fa-long-arrow-up custom" ></i>
<i class="fa fa-toggle-down custom" ></i>
<i class="fa fa-toggle-left custom" ></i>
<i class="fa fa-toggle-right custom" ></i>
<i class="fa fa-toggle-up custom" ></i>
<i class="fa fa-exchange custom" ></i>

Font Awesome - Video Player Icons

This chapter explains the usage of Font Awesome Video Player icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Video Player icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Icons
<i class="fa fa-arrows-alt custom"></i>
<i class="fa fa-backward custom"></i>
<i class="fa fa-compress custom"></i>
<i class="fa fa-eject custom"></i>
<i class="fa fa-expand custom"></i>
<i class="fa fa-fast-backward custom"></i>
<i class="fa fa-fast-forward custom"></i>
<i class="fa fa-forward custom"></i>
<i class="fa fa-play-circle custom"></i>
<i class="fa fa-play-circle-o custom"></i>
<i class="fa fa-random custom"></i>
<i class="fa fa-step-backward custom"></i>
<i class="fa fa-stop custom"></i>
<i class="fa fa-pause custom"></i>
<i class="fa fa-play custom"></i>
<i class="fa fa-youtube-play custom"></i>

Font Awesome - Brand icons

This chapter explains the usage of Font Awesome Brand icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

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

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Brand icons. Replace the <body> tag of the above program with the code given in the table to get the respective outputs −

Usage	Icons
<i class="fa fa-500px custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-android custom"></i>
<i class="fa fa-angellist custom"></i>
<i class="fa fa-adn custom"></i>
<i class="fa fa-apple custom"></i>
<i class="fa fa-behance custom"></i>
<i class="fa fa-behance-square custom"></i>
<i class="fa fa-bitbucket custom"></i>
<i class="fa fa-bitbucket-square custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-black-tie custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-buysellads custom"></i>
<i class="fa fa-cc-amex custom"></i>
<i class="fa fa-cc-diners-club custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-stripe custom"></i>
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-chrome custom"></i>
<i class="fa fa-codepen custom"></i>
<i class="fa fa-connectdevelop custom"></i>
<i class="fa fa-contao custom"></i>
<i class="fa fa-css3 custom"></i>
<i class="fa fa-dashcube custom"></i>
<i class="fa fa-delicious custom"></i>
<i class="fa fa-deviantart custom"></i>
<i class="fa fa-digg custom"></i>
<i class="fa fa-dribbble custom"></i>
<i class="fa fa-dropbox custom"></i>
<i class="fa fa-drupal custom"></i>
<i class="fa fa-empire custom"></i>
<i class="fa fa-expeditedssl custom"></i>
<i class="fa fa-facebook custom"></i>
<i class="fa fa-facebook-f custom"></i>
<i class="fa fa-facebook-official custom"></i>
<i class="fa fa-facebook-square custom"></i>
<i class="fa fa-firefox custom"></i>
<i class="fa fa-flickr custom"></i>
<i class="fa fa-fonticons custom"></i>
<i class="fa fa-forumbee custom"></i>
<i class="fa fa-foursquare custom"></i>
<i class="fa fa-ge custom"></i>
<i class="fa fa-get-pocket custom"></i>
<i class="fa fa-gg custom"></i>
<i class="fa fa-gg-circle custom"></i>
<i class="fa fa-git custom"></i>
<i class="fa fa-git-square custom"></i>
<i class="fa fa-github custom"></i>
<i class="fa fa-github-alt custom"></i>
<i class="fa fa-github-square custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-google custom"></i>
<i class="fa fa-google-plus custom"></i>
<i class="fa fa-google-plus-square custom"></i>
<i class="fa fa-youtube-play custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-hacker-news custom"></i>
<i class="fa fa-houzz custom"></i>
<i class="fa fa-html5 custom"></i>
<i class="fa fa-instagram custom"></i>
<i class="fa fa-internet-explorer custom"></i>
<i class="fa fa-ioxhost custom"></i>
<i class="fa fa-joomla custom"></i>
<i class="fa fa-jsfiddle custom"></i>
<i class="fa fa-lastfm custom"></i>
<i class="fa fa-lastfm-square custom"></i>
<i class="fa fa-leanpub custom"></i>
<i class="fa fa-linkedin custom"></i>
<i class="fa fa-linkedin-square custom"></i>
<i class="fa fa-linux custom"></i>
<i class="fa fa-maxcdn custom"></i>
<i class="fa fa-meanpath custom"></i>
<i class="fa fa-medium custom"></i>
<i class="fa fa-odnoklassniki custom"></i>
<i class="fa fa-odnoklassniki-square custom"></i>
<i class="fa fa-opencart custom"></i>
<i class="fa fa-opera custom"></i>
<i class="fa fa-optin-monster custom"></i>
<i class="fa fa-openid custom"></i>
<i class="fa fa-pagelines custom"></i>
<i class="fa fa-youtube custom"></i>
<i class="fa fa-pied-piper custom"></i>
<i class="fa fa-pied-piper-alt custom"></i>
<i class="fa fa-pinterest custom"></i>
<i class="fa fa-pinterest-p custom"></i>
<i class="fa fa-pinterest-square custom"></i>
<i class="fa fa-qq custom"></i>
<i class="fa fa-ra custom"></i>
<i class="fa fa-rebel custom"></i>
<i class="fa fa-reddit custom"></i>
<i class="fa fa-renren custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-safari custom"></i>
<i class="fa fa-sellsy custom"></i>
<i class="fa fa-youtube-square custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-shirtsinbulk custom"></i>
<i class="fa fa-simplybuilt custom"></i>
<i class="fa fa-skyatlas custom"></i>
<i class="fa fa-skype custom"></i>
<i class="fa fa-slack custom"></i>
<i class="fa fa-yc-square custom"></i>
<i class="fa fa-soundcloud custom"></i>
<i class="fa fa-spotify custom"></i>
<i class="fa fa-stack-exchange custom"></i>
<i class="fa fa-stack-overflow custom"></i>
<i class="fa fa-steam custom"></i>
<i class="fa fa-steam-square custom"></i>
<i class="fa fa-stumbleupon custom"></i>
<i class="fa fa-stumbleupon-circle custom"></i>
<i class="fa fa-tencent-weibo custom"></i>
<i class="fa fa-trello custom"></i>
<i class="fa fa-tripadvisor custom"></i>
<i class="fa fa-tumblr custom"></i>
<i class="fa fa-tumblr-square custom"></i>
<i class="fa fa-yahoo custom"></i>
<i class="fa fa-twitter custom"></i>
<i class="fa fa-twitter-square custom"></i>
<i class="fa fa-viacoin custom"></i>
<i class="fa fa-vimeo custom"></i>
<i class="fa fa-vimeo-square custom"></i>
<i class="fa fa-vine custom"></i>
<i class="fa fa-vk custom"></i>
<i class="fa fa-wechat custom"></i>
<i class="fa fa-weibo custom"></i>
<i class="fa fa-weixin custom"></i>
<i class="fa fa-whatsapp custom"></i>
<i class="fa fa-wikipedia-w custom"></i>
<i class="fa fa-windows custom"></i>
<i class="fa fa-wordpress custom"></i>
<i class="fa fa-xing custom"></i>
<i class="fa fa-xing-square custom"></i>
<i class="fa fa-y-combinator custom"></i>
<i class="fa fa-y-combinator-square custom"></i>
<i class="fa fa-yc custom"></i>

Font Awesome - Medical Icons

This chapter explains the usage of Font Awesome Medical icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

The following table shows the usage and the results of Font Awesome Medical icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Icon
<i class="fa fa-ambulance custom"></i>
<i class="fa fa-h-square custom"></i>
<i class="fa fa-heart custom"></i>
<i class="fa fa-heart-o custom"></i>
<i class="fa fa-heartbeat custom"></i>
<i class="fa fa-hospital-o custom"></i>
<i class="fa fa-medkit custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-stethoscope custom"></i>
<i class="fa fa-user-md custom"></i>
<i class="fa fa-wheelchair custom"></i>

Material Icons

Google provides a set of 750 icons designed under "material design guidelines" and these are known as Material Design icons. These icons are simple and they support all modern web browsers. Since these icons are vector based, they are scalable as well. To use these icons, we have to load the font (library) material-icons.

Loading the Font (library)

To load the material-icons library, copy and paste the following line in the <head> section of a webpage.

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

Using the Icon

Google's Material Icons provides a long list of icons. Choose any one of them and add the name of the icon class to any HTML element within the < body > tag. In the following example, we have used the icon named accessibility that belongs to the action category.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

It will produce the following output −

Defining the Size

You can increase or decrease the size of an icon by defining its size in the CSS and using it along with the class name as shown below. In the following example, we have declared the size as 6 em.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

It will produce the following output −

Defining the Color

You can use the CSS to define the color of an icon. The following example shows how you can change the color of an icon called accessibility.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

It will produce the following output −

List of Categories

Google's Material Icons font provides 519 icons in the following categories −

Action Icons
Alert Icons
AV Icons
Communication Icons
Content Icons
Device Icons
Editor Icons
File Icons
Hardware Icons
Image Icons
Maps Icons
Navigation Icons
Notification Icons
Social Icons
Toggle Icons

To use any of these icons, you have to replace the class name in the programs given in this chapter with the class name of the desired icon. In the coming chapters of this Unit (Material Icons), we have explained category-wise the usage and the respective outputs of various Material Icons.

Material - Action Icons

This chapter explains the usage of Google's (Material) Action Icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Action Icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">3d_rotation</i>
<i class="material-icons custom">accessibility</i>
<i class="material-icons custom">account_balance</i>
<i class="material-icons custom">account_balance_wallet</i>
<i class="material-icons custom">account_box</i>
<i class="material-icons custom">account_circle</i>
<i class="material-icons custom">add_shopping_cart</i>
<i class="material-icons custom">alarm</i>
<i class="material-icons custom">alarm_add</i>
<i class="material-icons custom">alarm_off</i>
<i class="material-icons custom">alarm_on</i>
<i class="material-icons custom">android</i>
<i class="material-icons custom">announcement</i>
<i class="material-icons custom">aspect_ratio</i>
<i class="material-icons custom">assessment</i>
<i class="material-icons custom">assignment</i>
<i class="material-icons custom">assignment_ind</i>
<i class="material-icons custom">assignment_late</i>
<i class="material-icons custom">assignment_return</i>
<i class="material-icons custom">assignment_returned</i>
<i class="material-icons custom">assignment_turned_in</i>
<i class="material-icons custom">autorenew</i>
<i class="material-icons custom">backup</i>
<i class="material-icons custom">book</i>
<i class="material-icons custom">bookmark</i>
<i class="material-icons custom">bookmark_border</i>
<i class="material-icons custom">bug_report</i>
<i class="material-icons custom">build</i>
<i class="material-icons custom">cached</i>
<i class="material-icons custom">camera_enhance</i>
<i class="material-icons custom">card_giftcard</i>
<i class="material-icons custom">card_membership</i>
<i class="material-icons custom">card_travel</i>
<i class="material-icons custom">change_history</i>
<i class="material-icons custom">check_circle</i>
<i class="material-icons custom">chrome_reader_mode</i>
<i class="material-icons custom">class</i>
<i class="material-icons custom">code</i>
<i class="material-icons custom">credit_card</i>
<i class="material-icons custom">dashboard</i>
<i class="material-icons custom">delete</i>
<i class="material-icons custom">description</i>
<i class="material-icons custom">dns</i>
<i class="material-icons custom">done</i>
<i class="material-icons custom">done_all</i>
<i class="material-icons custom">eject</i>
<i class="material-icons custom">event</i>
<i class="material-icons custom">event_seat</i>
<i class="material-icons custom">exit_to_app</i>
<i class="material-icons custom">explore</i>
<i class="material-icons custom">extension</i>
<i class="material-icons custom">face</i>
<i class="material-icons custom">favorite</i>
<i class="material-icons custom">favorite_border</i>
<i class="material-icons custom">feedback</i>
<i class="material-icons custom">find_in_page</i>
<i class="material-icons custom">find_replace</i>
<i class="material-icons custom">flight_land</i>
<i class="material-icons custom">flight_takeoff</i>
<i class="material-icons custom">flip_to_back</i>
<i class="material-icons custom">flip_to_front</i>
<i class="material-icons custom">get_app</i>
<i class="material-icons custom">gif</i>
<i class="material-icons custom">grade</i>
<i class="material-icons custom">group_work</i>
<i class="material-icons custom">help</i>
<i class="material-icons custom">help_outline</i>
<i class="material-icons custom">highlight_off</i>
<i class="material-icons custom">history</i>
<i class="material-icons custom">home</i>
<i class="material-icons custom">hourglass_empty</i>
<i class="material-icons custom">hourglass_full</i>
<i class="material-icons custom">http</i>
<i class="material-icons custom">https</i>
<i class="material-icons custom">info</i>
<i class="material-icons custom">info_outline</i>
<i class="material-icons custom">input</i>
<i class="material-icons custom">invert_colors</i>
<i class="material-icons custom">label</i>
<i class="material-icons custom">label_outline</i>
<i class="material-icons custom">language</i>
<i class="material-icons custom">launch</i>
<i class="material-icons custom">list</i>
<i class="material-icons custom">lock</i>
<i class="material-icons custom">lock_open</i>
<i class="material-icons custom">lock_outline</i>
<i class="material-icons custom">loyalty</i>
<i class="material-icons custom">markunread_mailbox</i>
<i class="material-icons custom">note_add</i>
<i class="material-icons custom">offline_pin</i>
<i class="material-icons custom">open_in_browser</i>
<i class="material-icons custom">open_in_new</i>
<i class="material-icons custom">open_with</i>
<i class="material-icons custom">pageview</i>
<i class="material-icons custom">payment</i>
<i class="material-icons custom">perm_camera_mic</i>
<i class="material-icons custom">perm_contact_cale</i>
<i class="material-icons custom">perm_data_settings</i>
<i class="material-icons custom">perm_device_information</i>
<i class="material-icons custom">perm_identity</i>
<i class="material-icons custom">perm_media</i>
<i class="material-icons custom">perm_phone_msg</i>
<i class="material-icons custom">perm_scan_wifi</i>
<i class="material-icons custom">picture_in_picture</i>
<i class="material-icons custom">play_for_work</i>
<i class="material-icons custom">polymer</i>
<i class="material-icons custom">power_settings_new</i>
<i class="material-icons custom">print</i>
<i class="material-icons custom">query_builder</i>
<i class="material-icons custom">question_answer</i>
<i class="material-icons custom">receipt</i>
<i class="material-icons custom">redeem</i>
<i class="material-icons custom">reorder</i>
<i class="material-icons custom">report_problem</i>
<i class="material-icons custom">restore</i>
<i class="material-icons custom">room</i>
<i class="material-icons custom">schedule</i>
<i class="material-icons custom">search</i>
<i class="material-icons custom">settings</i>
<i class="material-icons custom">settings_applications</i>
<i class="material-icons custom">settings_bluetooth</i>
<i class="material-icons custom">settings_brightness</i>
<i class="material-icons custom">settings_cell</i>
<i class="material-icons custom">settings_ethernet</i>
<i class="material-icons custom">settings_input_antenna</i>
<i class="material-icons custom">settings_input_component</i>
<i class="material-icons custom">settings_input_hdmi</i>
<i class="material-icons custom">settings_input_svideo</i>
<i class="material-icons custom">settings_overscan</i>
<i class="material-icons custom">settings_phone</i>
<i class="material-icons custom">settings_power</i>
<i class="material-icons custom">settings_remote</i>
<i class="material-icons custom">settings_voice</i>
<i class="material-icons custom">shop</i>
<i class="material-icons custom">shop_two</i>
<i class="material-icons custom">shopping_basket</i>
<i class="material-icons custom">shopping_cart</i>
<i class="material-icons custom">speaker_notes</i>
<i class="material-icons custom">spellcheck</i>
<i class="material-icons custom">star_rate</i>
<i class="material-icons custom">stars</i>
<i class="material-icons custom">store</i>
<i class="material-icons custom">subject</i>
<i class="material-icons custom">supervisor_account</i>
<i class="material-icons custom">swap_horiz</i>
<i class="material-icons custom">swap_vert</i>
<i class="material-icons custom">swap_vertical_circle</i>
<i class="material-icons custom">system_update_alt</i>
<i class="material-icons custom">tab</i>
<i class="material-icons custom">tab_unselected</i>
<i class="material-icons custom">theaters</i>
<i class="material-icons custom">thumb_down</i>
<i class="material-icons custom">thumb_up</i>
<i class="material-icons custom">thumbs_up_down</i>
<i class="material-icons custom">toc</i>
<i class="material-icons custom">today</i>
<i class="material-icons custom">toll</i>
<i class="material-icons custom">track_changes</i>
<i class="material-icons custom">translate</i>
<i class="material-icons custom">trending_down</i>
<i class="material-icons custom">trending_flat</i>
<i class="material-icons custom">trending_up</i>
<i class="material-icons custom">turned_in</i>
<i class="material-icons custom">verified_user</i>
<i class="material-icons custom">view_agenda</i>
<i class="material-icons custom">view_array</i>
<i class="material-icons custom">view_carousel</i>
<i class="material-icons custom">view_column</i>
<i class="material-icons custom">view_day</i>
<i class="material-icons custom">view_headline</i>
<i class="material-icons custom">view_list</i>
<i class="material-icons custom">view_module</i>
<i class="material-icons custom">view_quilt</i>
<i class="material-icons custom">view_stream</i>
<i class="material-icons custom">view_week</i>
<i class="material-icons custom">visibility</i>
<i class="material-icons custom">visibility_off</i>
<i class="material-icons custom">work</i>
<i class="material-icons custom">youtube_searched_for</i>
<i class="material-icons custom">zoom_in</i>
<i class="material-icons custom">zoom_out</i>

Material - Alert Icons

This chapter explains the usage of Google's (Material) Alert icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Alert icons. Replace the <body> tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">add_alert</i>
<i class="material-icons custom">error</i>
<i class="material-icons custom">error_outline</i>
<i class="material-icons custom">warning</i>

Material - AV Icons

This chapter explains the usage of Google's (Material) AV icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) AV icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">airplay</i>
<i class="material-icons custom">album</i>
<i class="material-icons custom">av_timer</i>
<i class="material-icons custom">closed_caption</i>
<i class="material-icons custom">equalizer</i>
<i class="material-icons custom">explicit</i>
<i class="material-icons custom">fast_forward</i>
<i class="material-icons custom">fast_rewind</i>
<i class="material-icons custom">forward_10</i>
<i class="material-icons custom">forward_30</i>
<i class="material-icons custom">forward_5</i>
<i class="material-icons custom">games</i>
<i class="material-icons custom">hd</i>
<i class="material-icons custom">hearing</i>
<i class="material-icons custom">high_quality</i>
<i class="material-icons custom">library_add</i>
<i class="material-icons custom">library_books</i>
<i class="material-icons custom">library_music</i>
<i class="material-icons custom">loop</i>
<i class="material-icons custom">mic</i>
<i class="material-icons custom">mic_none</i>
<i class="material-icons custom">mic_off</i>
<i class="material-icons custom">movie</i>
<i class="material-icons custom">pause_circle_outline</i>
<i class="material-icons custom">new_releases</i>
<i class="material-icons custom">not_interested</i>
<i class="material-icons custom">pause</i>
<i class="material-icons custom">pause_circle_filled</i>
<i class="material-icons custom">play_arrow</i>
<i class="material-icons custom">play_circle_filled</i>
<i class="material-icons custom">play_circle_outline</i>
<i class="material-icons custom">playlist_add</i>
<i class="material-icons custom">queue</i>
<i class="material-icons custom">queue_music</i>
<i class="material-icons custom">radio</i>
<i class="material-icons custom">recent_actors</i>
<i class="material-icons custom">repeat</i>
<i class="material-icons custom">repeat_one</i>
<i class="material-icons custom">replay</i>
<i class="material-icons custom">airplay</i>
<i class="material-icons custom">replay_30</i>
<i class="material-icons custom">replay_5</i>
<i class="material-icons custom">shuffle</i>
<i class="material-icons custom">skip_next</i>
<i class="material-icons custom">skip_previous</i>
<i class="material-icons custom">snooze</i>
<i class="material-icons custom">sort_by_alpha</i>
<i class="material-icons custom">stop</i>
<i class="material-icons custom">subtitles</i>
<i class="material-icons custom">surround_sound</i>
<i class="material-icons custom">video_library</i>
<i class="material-icons custom">videocam</i>
<i class="material-icons custom">videocam_off</i>
<i class="material-icons custom">volume_down</i>
<i class="material-icons custom">volume_mute</i>
<i class="material-icons custom">volume_off</i>
<i class="material-icons custom">volume_up</i>
<i class="material-icons custom">web</i>

Material - Communication Icons

This chapter explains the usage of Google's (Material) Communication icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Communication icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">business</i>
<i class="material-icons custom">call</i>
<i class="material-icons custom">call_made</i>
<i class="material-icons custom">call_merge</i>
<i class="material-icons custom">call_missed</i>
<i class="material-icons custom">call_received</i>
<i class="material-icons custom">call_split</i>
<i class="material-icons custom">chat</i>
<i class="material-icons custom">chat_bubble</i>
<i class="material-icons custom">chat_bubble_outline</i>
<i class="material-icons custom">clear_all</i>
<i class="material-icons custom">comment</i>
<i class="material-icons custom">contact_phone</i>
<i class="material-icons custom">contacts</i>
<i class="material-icons custom">dialer_sip</i>
<i class="material-icons custom">dialpad</i>
<i class="material-icons custom">forum</i>
<i class="material-icons custom">import_export</i>
<i class="material-icons custom">invert_colors_off</i>
<i class="material-icons custom">live_help</i>
<i class="material-icons custom">location_off</i>
<i class="material-icons custom">location_on</i>
<i class="material-icons custom">message</i>
<i class="material-icons custom">no_sim</i>
<i class="material-icons custom">phone</i>
<i class="material-icons custom">phonelink_erase</i>
<i class="material-icons custom">phonelink_lock</i>
<i class="material-icons custom">phonelink_ring</i>
<i class="material-icons custom">phonelink_setup</i>
<i class="material-icons custom">portable_wifi_off</i>
<i class="material-icons custom">present_to_all</i>
<i class="material-icons custom">ring_volume</i>
<i class="material-icons custom">speaker_phone</i>
<i class="material-icons custom">stay_current_landscape</i>
<i class="material-icons custom">stay_current_portrait</i>
<i class="material-icons custom">stay_primary_landscape</i>
<i class="material-icons custom">stay_primary_portrait</i>
<i class="material-icons custom">swap_calls</i>
<i class="material-icons custom">textsms</i>
<i class="material-icons custom">voicemail</i>
<i class="material-icons custom">vpn_key</i>
<i class="material-icons custom">email</i>
<i class="material-icons custom">call_end</i>

Material - Content Icons

This chapter explains the usage of Google's (Material) Content icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Content icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">add</i>
<i class="material-icons custom">add_box</i>
<i class="material-icons custom">add_circle</i>
<i class="material-icons custom">add_circle_outline</i>
<i class="material-icons custom">archive</i>
<i class="material-icons custom">backspace</i>
<i class="material-icons custom">block</i>
<i class="material-icons custom">clear</i>
<i class="material-icons custom">content_copy</i>
<i class="material-icons custom">content_cut</i>
<i class="material-icons custom">content_paste</i>
<i class="material-icons custom">create</i>
<i class="material-icons custom">drafts</i>
<i class="material-icons custom">filter_list</i>
<i class="material-icons custom">flag</i>
<i class="material-icons custom">font_download</i>
<i class="material-icons custom">forward</i>
<i class="material-icons custom">gesture</i>
<i class="material-icons custom">inbox</i>
<i class="material-icons custom">link</i>
<i class="material-icons custom">mail</i>
<i class="material-icons custom">markunread</i>
<i class="material-icons custom">redo</i>
<i class="material-icons custom">remove</i>
<i class="material-icons custom">remove_circle</i>
<i class="material-icons custom">remove_circle_outline</i>
<i class="material-icons custom">reply</i>
<i class="material-icons custom">reply_all</i>
<i class="material-icons custom">report</i>
<i class="material-icons custom">save</i>
<i class="material-icons custom">select_all</i>
<i class="material-icons custom">send</i>
<i class="material-icons custom">sort</i>
<i class="material-icons custom">text_format</i>
<i class="material-icons custom">stay_current_portrait</i>
<i class="material-icons custom">undo</i>

Material - Device Icons

This chapter provides you the usage of Google's (Material) Device Icons. Assume that custom is the CSS class name in which we defined the size and colour as shown below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Device Icons.

Usage	Result
<i class="material-icons custom">access_alarm</i>
<i class="material-icons custom">access_alarms</i>
<i class="material-icons custom">access_time</i>
<i class="material-icons custom">add_alarm</i>
<i class="material-icons custom">airplanemode_active</i>
<i class="material-icons custom">airplanemode_inactive</i>
<i class="material-icons custom">battery_alert</i>
<i class="material-icons custom">battery_charging_full</i>
<i class="material-icons custom">battery_full</i>
<i class="material-icons custom">battery_std</i>
<i class="material-icons custom">battery_unknown</i>
<i class="material-icons custom">bluetooth</i>
<i class="material-icons custom">bluetooth_connected</i>
<i class="material-icons custom">bluetooth_disabled</i>
<i class="material-icons custom">bluetooth_searching</i>
<i class="material-icons custom">brightness_auto</i>
<i class="material-icons custom">brightness_high</i>
<i class="material-icons custom">brightness_low</i>
<i class="material-icons custom">brightness_medium</i>
<i class="material-icons custom">data_usage</i>
<i class="material-icons custom">developer_mode</i>
<i class="material-icons custom">devices</i>
<i class="material-icons custom">dvr</i>
<i class="material-icons custom">gps_fixed</i>
<i class="material-icons custom">gps_not_fixed</i>
<i class="material-icons custom">gps_off</i>
<i class="material-icons custom">graphic_eq</i>
<i class="material-icons custom">location_disabled</i>
<i class="material-icons custom">location_searching</i>
<i class="material-icons custom">network_cell</i>
<i class="material-icons custom">network_wifi</i>
<i class="material-icons custom">screen_lock_landscape</i>
<i class="material-icons custom">screen_lock_portrait</i>
<i class="material-icons custom">screen_lock_rotation</i>
<i class="material-icons custom">screen_rotation</i>
<i class="material-icons custom">sd_storage</i>
<i class="material-icons custom">settings_system_daydream</i>
<i class="material-icons custom">signal_cellular_4_bar</i>
<i class="material-icons custom">wifi_tethering</i>
<i class="material-icons custom">signal_cellular_no_sim</i>
<i class="material-icons custom">signal_cellular_null</i>
<i class="material-icons custom">signal_cellular_off</i>
<i class="material-icons custom">signal_wifi_4_bar</i>
<i class="material-icons custom">signal_wifi_4_bar_lock</i>
<i class="material-icons custom">signal_wifi_off</i>
<i class="material-icons custom">storage</i>
<i class="material-icons custom">usb</i>
<i class="material-icons custom">wallpaper</i>
<i class="material-icons custom">widgets</i>
<i class="material-icons custom">wifi_lock</i>
<i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i>

Material - Editor Icons

This chapter explains the usage of Google's (Material) Editor icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Editor icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">attach_file</i>
<i class="material-icons custom">attach_money</i>
<i class="material-icons custom">border_all</i>
<i class="material-icons custom">border_bottom</i>
<i class="material-icons custom">border_clear</i>
<i class="material-icons custom">border_color</i>
<i class="material-icons custom">border_horizontal</i>
<i class="material-icons custom">border_inner</i>
<i class="material-icons custom">border_left</i>
<i class="material-icons custom">border_outer</i>
<i class="material-icons custom">border_right</i>
<i class="material-icons custom">border_style</i>
<i class="material-icons custom">border_top</i>
<i class="material-icons custom">border_vertical</i>
<i class="material-icons custom">format_align_center</i>
<i class="material-icons custom">format_align_justify</i>
<i class="material-icons custom">format_align_left</i>
<i class="material-icons custom">format_align_right</i>
<i class="material-icons custom">format_bold</i>
<i class="material-icons custom">format_clear</i>
<i class="material-icons custom">format_color_fill</i>
<i class="material-icons custom">format_color_reset</i>
<i class="material-icons custom">format_color_text</i>
<i class="material-icons custom">format_indent_decrease</i>
<i class="material-icons custom">format_indent_increase</i>
<i class="material-icons custom">format_italic</i>
<i class="material-icons custom">format_line_spacing</i>
<i class="material-icons custom">format_list_bulleted</i>
<i class="material-icons custom">format_list_numbered</i>
<i class="material-icons custom">format_paint</i>
<i class="material-icons custom">format_quote</i>
<i class="material-icons custom">format_size</i>
<i class="material-icons custom">format_strikethrough</i>
<i class="material-icons custom">format_textdirection_l_to_r</i>
<i class="material-icons custom">format_textdirection_r_to_l</i>
<i class="material-icons custom">format_underline</i>
<i class="material-icons custom">functions</i>
<i class="material-icons custom">insert_chart</i>
<i class="material-icons custom">insert_comment</i>
<i class="material-icons custom">insert_drive_file</i>
<i class="material-icons custom">insert_emoticon</i>
<i class="material-icons custom">insert_invitation</i>
<i class="material-icons custom">insert_link</i>
<i class="material-icons custom">insert_photo</i>
<i class="material-icons custom">merge_type</i>
<i class="material-icons custom">mode_comment</i>
<i class="material-icons custom">mode_edit</i>
<i class="material-icons custom">money_off</i>
<i class="material-icons custom">publish</i>
<i class="material-icons custom">space_bar</i>
<i class="material-icons custom">strikethrough_s</i>
<i class="material-icons custom">vertical_align_bottom</i>
<i class="material-icons custom">vertical_align_center</i>
<i class="material-icons custom">vertical_align_top</i>
<i class="material-icons custom">wrap_text</i>

Material - File Icons

This chapter explains the usage of Google's (Material) File icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) File icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">attachment</i>
<i class="material-icons custom">cloud</i>
<i class="material-icons custom">cloud_circle</i>
<i class="material-icons custom">cloud_done</i>
<i class="material-icons custom">cloud_download</i>
<i class="material-icons custom">cloud_off</i>
<i class="material-icons custom">cloud_queue</i>
<i class="material-icons custom">cloud_upload</i>
<i class="material-icons custom">file_download</i>
<i class="material-icons custom">file_upload</i>
<i class="material-icons custom">folder</i>
<i class="material-icons custom">folder_open</i>
<i class="material-icons custom">folder_shared</i>

Material - Hardware Icons

This chapter explains the usage of Google's (Material) Hardware icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Hardware icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">cast</i>
<i class="material-icons custom">cast_connected</i>
<i class="material-icons custom">computer</i>
<i class="material-icons custom">desktop_mac</i>
<i class="material-icons custom">desktop_windows</i>
<i class="material-icons custom">developer_board</i>
<i class="material-icons custom">device_hub</i>
<i class="material-icons custom">dock</i>
<i class="material-icons custom">gamepad</i>
<i class="material-icons custom">headset</i>
<i class="material-icons custom">headset_mic</i>
<i class="material-icons custom">keyboard</i>
<i class="material-icons custom">keyboard_arrow_down</i>
<i class="material-icons custom">keyboard_arrow_left</i>
<i class="material-icons custom">keyboard_arrow_right</i>
<i class="material-icons custom">keyboard_arrow_up</i>
<i class="material-icons custom">keyboard_backspace</i>
<i class="material-icons custom">keyboard_capslock</i>
<i class="material-icons custom">keyboard_hide</i>
<i class="material-icons custom">keyboard_return</i>
<i class="material-icons custom">keyboard_tab</i>
<i class="material-icons custom">keyboard_voice</i>
<i class="material-icons custom">laptop</i>
<i class="material-icons custom">laptop_chromebook</i>
<i class="material-icons custom">laptop_mac</i>
<i class="material-icons custom">laptop_windows</i>
<i class="material-icons custom">memory</i>
<i class="material-icons custom">mouse</i>
<i class="material-icons custom">phone_android</i>
<i class="material-icons custom">phone_iphone</i>
<i class="material-icons custom">phonelink</i>
<i class="material-icons custom">phonelink_off</i>
<i class="material-icons custom">power_input</i>
<i class="material-icons custom">router</i>
<i class="material-icons custom">scanner</i>
<i class="material-icons custom">security</i>
<i class="material-icons custom">sim_card</i>
<i class="material-icons custom">smartphone</i>
<i class="material-icons custom">speaker</i>
<i class="material-icons custom">speaker_group</i>
<i class="material-icons custom">tablet</i>
<i class="material-icons custom">tablet_android</i>
<i class="material-icons custom">tablet_mac</i>
<i class="material-icons custom">toys</i>
<i class="material-icons custom">tv</i>
<i class="material-icons custom">watch</i>

Material - Image Icons

This chapter explains the usage of Google's (Material) Image icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Image icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">add_to_photos</i>
<i class="material-icons custom">adjust</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">audiotrack</i>
<i class="material-icons custom">blur_circular</i>
<i class="material-icons custom">blur_linear</i>
<i class="material-icons custom">blur_off</i>
<i class="material-icons custom">blur_on</i>
<i class="material-icons custom">brightness_1</i>
<i class="material-icons custom">brightness_2</i>
<i class="material-icons custom">brightness_3</i>
<i class="material-icons custom">brightness_4</i>
<i class="material-icons custom">brightness_5</i>
<i class="material-icons custom">brightness_6</i>
<i class="material-icons custom">brightness_7</i>
<i class="material-icons custom">broken_image</i>
<i class="material-icons custom">brush</i>
<i class="material-icons custom">camera</i>
<i class="material-icons custom">camera_alt</i>
<i class="material-icons custom">camera_front</i>
<i class="material-icons custom">camera_rear</i>
<i class="material-icons custom">camera_roll</i>
<i class="material-icons custom">center_focus_strong</i>
<i class="material-icons custom">center_focus_weak</i>
<i class="material-icons custom">collections</i>
<i class="material-icons custom">collections_bookmark</i>
<i class="material-icons custom">color_lens</i>
<i class="material-icons custom">colorize</i>
<i class="material-icons custom">compare</i>
<i class="material-icons custom">control_point</i>
<i class="material-icons custom">control_point_duplicate</i>
<i class="material-icons custom">crop</i>
<i class="material-icons custom">crop_16_9</i>
<i class="material-icons custom">crop_3_2</i>
<i class="material-icons custom">crop_5_4</i>
<i class="material-icons custom">crop_7_5</i>
<i class="material-icons custom">crop_din</i>
<i class="material-icons custom">crop_free</i>
<i class="material-icons custom">crop_landscape</i>
<i class="material-icons custom">crop_original</i>
<i class="material-icons custom">crop_portrait</i>
<i class="material-icons custom">crop_square</i>
<i class="material-icons custom">dehaze</i>
<i class="material-icons custom">details</i>
<i class="material-icons custom">edit</i>
<i class="material-icons custom">exposure</i>
<i class="material-icons custom">exposure_neg_1</i>
<i class="material-icons custom">exposure_plus_1</i>
<i class="material-icons custom">exposure_plus_2</i>
<i class="material-icons custom">exposure_zero</i>
<i class="material-icons custom">filter</i>
<i class="material-icons custom">filter_1</i>
<i class="material-icons custom">filter_2</i>
<i class="material-icons custom">filter_3</i>
<i class="material-icons custom">filter_4</i>
<i class="material-icons custom">filter_5</i>
<i class="material-icons custom">filter_6</i>
<i class="material-icons custom">filter_7</i>
<i class="material-icons custom">filter_8</i>
<i class="material-icons custom">filter_9</i>
<i class="material-icons custom">filter_9_plus</i>
<i class="material-icons custom">filter_b_and_w</i>
<i class="material-icons custom">filter_center_focus</i>
<i class="material-icons custom">filter_drama</i>
<i class="material-icons custom">filter_frames</i>
<i class="material-icons custom">filter_hdr</i>
<i class="material-icons custom">filter_none</i>
<i class="material-icons custom">filter_tilt_shift</i>
<i class="material-icons custom">filter_vintage</i>
<i class="material-icons custom">flare</i>
<i class="material-icons custom">flash_auto</i>
<i class="material-icons custom">flash_off</i>
<i class="material-icons custom">flash_on</i>
<i class="material-icons custom">flip</i>
<i class="material-icons custom">gradient</i>
<i class="material-icons custom">grain</i>
<i class="material-icons custom">grid_off</i>
<i class="material-icons custom">grid_on</i>
<i class="material-icons custom">hdr_off</i>
<i class="material-icons custom">hdr_on</i>
<i class="material-icons custom">hdr_strong</i>
<i class="material-icons custom">hdr_weak</i>
<i class="material-icons custom">healing</i>
<i class="material-icons custom">image</i>
<i class="material-icons custom">image_aspect_ratio</i>
<i class="material-icons custom">iso</i>
<i class="material-icons custom">landscape</i>
<i class="material-icons custom">leak_add</i>
<i class="material-icons custom">leak_remove</i>
<i class="material-icons custom">lens</i>
<i class="material-icons custom">looks</i>
<i class="material-icons custom">looks_3</i>
<i class="material-icons custom">looks_4</i>
<i class="material-icons custom">looks_5</i>
<i class="material-icons custom">looks_6</i>
<i class="material-icons custom">looks_one</i>
<i class="material-icons custom">looks_two</i>
<i class="material-icons custom">loupe</i>
<i class="material-icons custom">monochrome_photos</i>
<i class="material-icons custom">movie_creation</i>
<i class="material-icons custom">music_note</i>
<i class="material-icons custom">nature</i>
<i class="material-icons custom">nature_people</i>
<i class="material-icons custom">wb_sunny</i>
<i class="material-icons custom">navigate_next</i>
<i class="material-icons custom">navigate_before</i>
<i class="material-icons custom">palette</i>
<i class="material-icons custom">panorama</i>
<i class="material-icons custom">panorama_fish_eye</i>
<i class="material-icons custom">panorama_horizontal</i>
<i class="material-icons custom">panorama_vertical</i>
<i class="material-icons custom">panorama_wide_angle</i>
<i class="material-icons custom">photo</i>
<i class="material-icons custom">photo_album</i>
<i class="material-icons custom">photo_camera</i>
<i class="material-icons custom">photo_library</i>
<i class="material-icons custom">photo_size_select_actual</i>
<i class="material-icons custom">photo_size_select_large</i>
<i class="material-icons custom">photo_size_select_small</i>
<i class="material-icons custom">picture_as_pdf</i>
<i class="material-icons custom">portrait</i>
<i class="material-icons custom">remove_red_eye</i>
<i class="material-icons custom">rotate_90_degrees_ccw</i>
<i class="material-icons custom">rotate_left</i>
<i class="material-icons custom">rotate_right</i>
<i class="material-icons custom">slideshow</i>
<i class="material-icons custom">straighten</i>
<i class="material-icons custom">style</i>
<i class="material-icons custom">switch_camera</i>
<i class="material-icons custom">switch_video</i>
<i class="material-icons custom">tag_faces</i>
<i class="material-icons custom">texture</i>
<i class="material-icons custom">timelapse</i>
<i class="material-icons custom">timer</i>
<i class="material-icons custom">timer_10</i>
<i class="material-icons custom">timer_3</i>
<i class="material-icons custom">timer_off</i>
<i class="material-icons custom">tonality</i>
<i class="material-icons custom">transform</i>
<i class="material-icons custom">tune</i>
<i class="material-icons custom">view_comfy</i>
<i class="material-icons custom">view_compact</i>
<i class="material-icons custom">vignette</i>
<i class="material-icons custom">wb_auto</i>
<i class="material-icons custom">wb_cloudy</i>
<i class="material-icons custom">wb_incandescent</i>
<i class="material-icons custom">wb_iridescent</i>

Material - Maps Icons

This chapter explains the usage of Google's (Material) Maps icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Maps icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">beenhere</i>
<i class="material-icons custom">directions</i>
<i class="material-icons custom">directions_bike</i>
<i class="material-icons custom">directions_boat</i>
<i class="material-icons custom">directions_bus</i>
<i class="material-icons custom">directions_car</i>
<i class="material-icons custom">directions_railway</i>
<i class="material-icons custom">directions_run</i>
<i class="material-icons custom">directions_subway</i>
<i class="material-icons custom">directions_transit</i>
<i class="material-icons custom">directions_walk</i>
<i class="material-icons custom">flight</i>
<i class="material-icons custom">hotel</i>
<i class="material-icons custom">layers</i>
<i class="material-icons custom">layers_clear</i>
<i class="material-icons custom">local_activity</i>
<i class="material-icons custom">local_airport</i>
<i class="material-icons custom">local_atm</i>
<i class="material-icons custom">local_bar</i>
<i class="material-icons custom">local_cafe</i>
<i class="material-icons custom">local_car_wash</i>
<i class="material-icons custom">local_convenience_store</i>
<i class="material-icons custom">local_dining</i>
<i class="material-icons custom">local_drink</i>
<i class="material-icons custom">local_florist</i>
<i class="material-icons custom">local_gas_station</i>
<i class="material-icons custom">local_grocery_store</i>
<i class="material-icons custom">local_hospital</i>
<i class="material-icons custom">local_hotel</i>
<i class="material-icons custom">local_laundry_service</i>
<i class="material-icons custom">local_library</i>
<i class="material-icons custom">local_mall</i>
<i class="material-icons custom">local_movies</i>
<i class="material-icons custom">local_offer</i>
<i class="material-icons custom">local_parking</i>
<i class="material-icons custom">local_pharmacy</i>
<i class="material-icons custom">local_phone</i>
<i class="material-icons custom">local_pizza</i>
<i class="material-icons custom">local_play</i>
<i class="material-icons custom">local_post_office</i>
<i class="material-icons custom">local_printshop</i>
<i class="material-icons custom">local_see</i>
<i class="material-icons custom">local_shipping</i>
<i class="material-icons custom">local_taxi</i>
<i class="material-icons custom">map</i>
<i class="material-icons custom">my_location</i>
<i class="material-icons custom">navigation</i>
<i class="material-icons custom">person_pin</i>
<i class="material-icons custom">pin_drop</i>
<i class="material-icons custom">place</i>
<i class="material-icons custom">rate_review</i>
<i class="material-icons custom">restaurant_menu</i>
<i class="material-icons custom">satellite</i>
<i class="material-icons custom">store_mall_directory</i>
<i class="material-icons custom">traffic</i>
<i class="material-icons custom">terrain</i>

Material - Navigation Icons

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>
<i class="material-icons custom">arrow_back</i>
<i class="material-icons custom">arrow_drop_down</i>
<i class="material-icons custom">arrow_drop_down_circle</i>
<i class="material-icons custom">arrow_drop_up</i>
<i class="material-icons custom">arrow_forward</i>
<i class="material-icons custom">cancel</i>
<i class="material-icons custom">check</i>
<i class="material-icons custom">chevron_left</i>
<i class="material-icons custom">chevron_right</i>
<i class="material-icons custom">close</i>
<i class="material-icons custom">expand_less</i>
<i class="material-icons custom">expand_more</i>
<i class="material-icons custom">fullscreen</i>
<i class="material-icons custom">fullscreen_exit</i>
<i class="material-icons custom">menu</i>
<i class="material-icons custom">more_horiz</i>
<i class="material-icons custom">more_vert</i>
<i class="material-icons custom">refresh</i>

Material - Notification Icons

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>
<i class="material-icons custom">airline_seat_flat</i>
<i class="material-icons custom">airline_seat_flat_angled</i>
<i class="material-icons custom">airline_seat_individual_suite</i>
<i class="material-icons custom">airline_seat_legroom_reduced</i>
<i class="material-icons custom">airline_seat_recline_extra</i>
<i class="material-icons custom">airline_seat_recline_normal</i>
<i class="material-icons custom">bluetooth_audio</i>
<i class="material-icons custom">confirmation_number</i>
<i class="material-icons custom">disc_full</i>
<i class="material-icons custom">do_not_disturb</i>
<i class="material-icons custom">do_not_disturb_alt</i>
<i class="material-icons custom">drive_eta</i>
<i class="material-icons custom">event_available</i>
<i class="material-icons custom">event_busy</i>
<i class="material-icons custom">event_note</i>
<i class="material-icons custom">folder_special</i>
<i class="material-icons custom">live_tv</i>
<i class="material-icons custom">mms</i>
<i class="material-icons custom">more</i>
<i class="material-icons custom">network_locked</i>
<i class="material-icons custom">ondemand_video</i>
<i class="material-icons custom">personal_video</i>
<i class="material-icons custom">phone_bluetooth_speaker</i>
<i class="material-icons custom">phone_forwarded</i>
<i class="material-icons custom">phone_in_talk</i>
<i class="material-icons custom">phone_locked</i>
<i class="material-icons custom">phone_missed</i>
<i class="material-icons custom">phone_paused</i>
<i class="material-icons custom">power</i>
<i class="material-icons custom">sd_card</i>
<i class="material-icons custom">sim_card_alert</i>
<i class="material-icons custom">sms</i>
<i class="material-icons custom">sms_failed</i>
<i class="material-icons custom">sync</i>
<i class="material-icons custom">sync_disabled</i>
<i class="material-icons custom">sync_problem</i>
<i class="material-icons custom">system_update</i>
<i class="material-icons custom">tap_and_play</i>
<i class="material-icons custom">time_to_leave</i>
<i class="material-icons custom">vibration</i>
<i class="material-icons custom">voice_chat</i>
<i class="material-icons custom">vpn_lock</i>
<i class="material-icons custom">wc</i>
<i class="material-icons custom">wifi</i>

Material - Social Icons

This chapter explains the usage of Google's (Material) Social icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Social icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">cake</i>
<i class="material-icons custom">domain</i>
<i class="material-icons custom">group</i>
<i class="material-icons custom">group_add</i>
<i class="material-icons custom">location_city</i>
<i class="material-icons custom">mood</i>
<i class="material-icons custom">mood_bad</i>
<i class="material-icons custom">notifications</i>
<i class="material-icons custom">notifications_active</i>
<i class="material-icons custom">notifications_none</i>
<i class="material-icons custom">notifications_off</i>
<i class="material-icons custom">notifications_paused</i>
<i class="material-icons custom">pages</i>
<i class="material-icons custom">party_mode</i>
<i class="material-icons custom">people</i>
<i class="material-icons custom">people_outline</i>
<i class="material-icons custom">person</i>
<i class="material-icons custom">person_add</i>
<i class="material-icons custom">person_outline</i>
<i class="material-icons custom">plus_one</i>
<i class="material-icons custom">poll</i>
<i class="material-icons custom">public</i>
<i class="material-icons custom">school</i>
<i class="material-icons custom">share</i>
<i class="material-icons custom">whatshot</i>

Material - Toggle Icons

This chapter explains the usage of Google's (Material) Toggle icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Toggle icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">check_box</i>
<i class="material-icons custom">check_box_outline_blank</i>
<i class="material-icons custom">indeterminate_check_box</i>
<i class="material-icons custom">radio_button_checked</i>
<i class="material-icons custom">radio_button_unchecked</i>
<i class="material-icons custom">star</i>
<i class="material-icons custom">star_border</i>
<i class="material-icons custom">star_half</i>

Bootstrap Glyphicons

This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in your web projects. These glyphs are not free, however if you don't have to spend anything in case you are using them in Bootstrap based projects.

Loading the Font (library)

To load the Bootstrap Glyphicons library, copy and paste the following line in the <head> section of the webpage.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

Using the Icon

Bootstrap Glyphicons provides a number of icons. Choose one of them and add the name of the icon class to any HTML element within the < body > tag. In the following example, we have used the icon of the tree and its class name is tree-deciduous.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous">  </i>
   </body>
</html>

It will produce the following output −

Defining the Size

You can increase or decrease the size of an icon by defining its size in the CSS and using it along with the class name as shown below. In the following example, we have defined the size as 6 em.

Live Demo

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

It will produce the following output:

Defining the Color

You can define the color of an icon using the CSS. The following example example shows how to change the color of the tree icon.

Live Demo

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

It will produce the following output −

Bootstrap Components

This chapter explains the usage of Bootstrap Glyphicons (Components). Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

Live Demo

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

The following table contains the usage and results of Bootstrap Glyphicons (Components). Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="glyphicon glyphicon-asterisk custom"></i>
<i class="glyphicon glyphicon-plus custom"></i>
<i class="glyphicon glyphicon-euro custom"></i>
<i class="glyphicon glyphicon-minus custom"></i>
<i class="glyphicon glyphicon-cloud custom"></i>
<i class="glyphicon glyphicon-envelope custom"></i>
<i class="glyphicon glyphicon-pencil custom"></i>
<i class="glyphicon glyphicon-glass custom"></i>
<i class="glyphicon glyphicon-music custom"></i>
<i class="glyphicon glyphicon-search custom"></i>
<i class="glyphicon glyphicon-heart custom"></i>
<i class="glyphicon glyphicon-star custom"></i>
<i class="glyphicon glyphicon-star-empty custom"></i>
<i class="glyphicon glyphicon-user custom"></i>
<i class="glyphicon glyphicon-film custom"></i>
<i class="glyphicon glyphicon-th-large custom"></i>
<i class="glyphicon glyphicon-th custom"></i>
<i class="glyphicon glyphicon-th-list custom"></i>
<i class="glyphicon glyphicon-ok custom"></i>
<i class="glyphicon glyphicon-remove custom"></i>
<i class="glyphicon glyphicon-zoom-in custom"></i>
<i class="glyphicon glyphicon-zoom-out custom"></i>
<i class="glyphicon glyphicon-off custom"></i>
<i class="glyphicon glyphicon-signal custom"></i>
<i class="glyphicon glyphicon-cog custom"></i>
<i class="glyphicon glyphicon-trash custom"></i>
<i class="glyphicon glyphicon-home custom"></i>
<i class="glyphicon glyphicon-file custom"></i>
<i class="glyphicon glyphicon-time custom"></i>
<i class="glyphicon glyphicon-road custom"></i>
<i class="glyphicon glyphicon-download-alt custom"></i>
<i class="glyphicon glyphicon-download custom"></i>
<i class="glyphicon glyphicon-upload custom"></i>
<i class="glyphicon glyphicon-inbox custom"></i>
<i class="glyphicon glyphicon-play-circle custom"></i>
<i class="glyphicon glyphicon-repeat custom"></i>
<i class="glyphicon glyphicon-refresh custom"></i>
<i class="glyphicon glyphicon-list-alt custom"></i>
<i class="glyphicon glyphicon-lock custom"></i>
<i class="glyphicon glyphicon-flag custom"></i>
<i class="glyphicon glyphicon-headphones custom"></i>
<i class="glyphicon glyphicon-volume-off custom"></i>
<i class="glyphicon glyphicon-volume-down custom"></i>
<i class="glyphicon glyphicon-volume-up custom"></i>
<i class="glyphicon glyphicon-qrcode custom"></i>
<i class="glyphicon glyphicon-barcode custom"></i>
<i class="glyphicon glyphicon-tag custom"></i>
<i class="glyphicon glyphicon-tags custom"></i>
<i class="glyphicon glyphicon-book custom"></i>
<i class="glyphicon glyphicon-bookmark custom"></i>
<i class="glyphicon glyphicon-print custom"></i>
<i class="glyphicon glyphicon-camera custom"></i>
<i class="glyphicon glyphicon-font custom"></i>
<i class="glyphicon glyphicon-bold custom"></i>
<i class="glyphicon glyphicon-italic custom"></i>
<i class="glyphicon glyphicon-text-height custom"></i>
<i class="glyphicon glyphicon-text-width custom"></i>
<i class="glyphicon glyphicon-align-left custom"></i>
<i class="glyphicon glyphicon-align-center custom"></i>
<i class="glyphicon glyphicon-align-right custom"></i>
<i class="glyphicon glyphicon-align-justify custom"></i>
<i class="glyphicon glyphicon-list custom"></i>
<i class="glyphicon glyphicon-indent-left custom"></i>
<i class="glyphicon glyphicon-indent-right custom"></i>
<i class="glyphicon glyphicon-facetime-video custom"></i>
<i class="glyphicon glyphicon-picture custom"></i>
<i class="glyphicon glyphicon-map-marker custom"></i>
<i class="glyphicon glyphicon-adjust custom"></i>
<i class="glyphicon glyphicon-tint custom"></i>
<i class="glyphicon glyphicon-edit custom"></i>
<i class="glyphicon glyphicon-share custom"></i>
<i class="glyphicon glyphicon-check custom"></i>
<i class="glyphicon glyphicon-move custom"></i>
<i class="glyphicon glyphicon-step-backward custom"></i>
<i class="glyphicon glyphicon-fast-backward custom"></i>
<i class="glyphicon glyphicon-backward custom"></i>
<i class="glyphicon glyphicon-play custom"></i>
<i class="glyphicon glyphicon-pause custom"></i>
<i class="glyphicon glyphicon-stop custom"></i>
<i class="glyphicon glyphicon-forward custom"></i>
<i class="glyphicon glyphicon-fast-forward custom"></i>
<i class="glyphicon glyphicon-step-forward custom"></i>
<i class="glyphicon glyphicon-eject custom"></i>
<i class="glyphicon glyphicon-chevron-left custom"></i>
<i class="glyphicon glyphicon-chevron-right custom"></i>
<i class="glyphicon glyphicon-plus-sign custom"></i>
<i class="glyphicon glyphicon-minus-sign custom"></i>
<i class="glyphicon glyphicon-remove-sign custom"></i>
<i class="glyphicon glyphicon-ok-sign custom"></i>
<i class="glyphicon glyphicon-question-sign custom"></i>
<i class="glyphicon glyphicon-info-sign custom"></i>
<i class="glyphicon glyphicon-screenshot custom"></i>
<i class="glyphicon glyphicon-remove-circle custom"></i>
<i class="glyphicon glyphicon-ok-circle custom"></i>
<i class="glyphicon glyphicon-ban-circle custom"></i>
<i class="glyphicon glyphicon-arrow-left custom"></i>
<i class="glyphicon glyphicon-arrow-right custom"></i>
<i class="glyphicon glyphicon-arrow-up custom"></i>
<i class="glyphicon glyphicon-arrow-down custom"></i>
<i class="glyphicon glyphicon-share-alt custom"></i>
<i class="glyphicon glyphicon-resize-full custom"></i>
<i class="glyphicon glyphicon-resize-small custom"></i>
<i class="glyphicon glyphicon-exclamation-sign custom"></i>
<i class="glyphicon glyphicon-gift custom"></i>
<i class="glyphicon glyphicon-leaf custom"></i>
<i class="glyphicon glyphicon-fire custom"></i>
<i class="glyphicon glyphicon-eye-open custom"></i>
<i class="glyphicon glyphicon-eye-close custom"></i>
<i class="glyphicon glyphicon-warning-sign custom"></i>
<i class="glyphicon glyphicon-plane custom"></i>
<i class="glyphicon glyphicon-calendar custom"></i>
<i class="glyphicon glyphicon-random custom"></i>
<i class="glyphicon glyphicon-comment custom"></i>
<i class="glyphicon glyphicon-magnet custom"></i>
<i class="glyphicon glyphicon-chevron-up custom"></i>
<i class="glyphicon glyphicon-chevron-down custom"></i>
<i class="glyphicon glyphicon-retweet custom"></i>
<i class="glyphicon glyphicon-shopping-cart custom"></i>
<i class="glyphicon glyphicon-folder-close custom"></i>
<i class="glyphicon glyphicon-folder-open custom"></i>
<i class="glyphicon glyphicon-resize-vertical custom"></i>
<i class="glyphicon glyphicon-resize-horizontal custom"></i>
<i class="glyphicon glyphicon-hdd custom"></i>
<i class="glyphicon glyphicon-bullhorn custom"></i>
<i class="glyphicon glyphicon-bell custom"></i>
<i class="glyphicon glyphicon-certificate custom"></i>
<i class="glyphicon glyphicon-thumbs-up custom"></i>
<i class="glyphicon glyphicon-thumbs-down custom"></i>
<i class="glyphicon glyphicon-hand-right custom"></i>
<i class="glyphicon glyphicon-hand-left custom"></i>
<i class="glyphicon glyphicon-hand-up custom"></i>
<i class="glyphicon glyphicon-hand-down custom"></i>
<i class="glyphicon glyphicon-circle-arrow-right custom"></i>
<i class="glyphicon glyphicon-circle-arrow-left custom"></i>
<i class="glyphicon glyphicon-circle-arrow-up custom"></i>
<i class="glyphicon glyphicon-circle-arrow-down custom"></i>
<i class="glyphicon glyphicon-globe custom"></i>
<i class="glyphicon glyphicon-wrench custom"></i>
<i class="glyphicon glyphicon-tasks custom"></i>
<i class="glyphicon glyphicon-filter custom"></i>
<i class="glyphicon glyphicon-briefcase custom"></i>
<i class="glyphicon glyphicon-fullscreen custom"></i>
<i class="glyphicon glyphicon-dashboard custom"></i>
<i class="glyphicon glyphicon-paperclip custom"></i>
<i class="glyphicon glyphicon-heart-empty custom"></i>
<i class="glyphicon glyphicon-link custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-pushpin custom"></i>
<i class="glyphicon glyphicon-usd custom"></i>
<i class="glyphicon glyphicon-gbp custom"></i>
<i class="glyphicon glyphicon-sort custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-order custom"></i>
<i class="glyphicon glyphicon-sort-by-order-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i>
<i class="glyphicon glyphicon-unchecked custom"></i>
<i class="glyphicon glyphicon-expand custom"></i>
<i class="glyphicon glyphicon-collapse-down custom"></i>
<i class="glyphicon glyphicon-collapse-up custom"></i>
<i class="glyphicon glyphicon-log-in custom"></i>
<i class="glyphicon glyphicon-flash custom"></i>
<i class="glyphicon glyphicon-log-out custom"></i>
<i class="glyphicon glyphicon-new-window custom"></i>
<i class="glyphicon glyphicon-record custom"></i>
<i class="glyphicon glyphicon-save custom"></i>
<i class="glyphicon glyphicon-open custom"></i>
<i class="glyphicon glyphicon-saved custom"></i>
<i class="glyphicon glyphicon-import custom"></i>
<i class="glyphicon glyphicon-export custom"></i>
<i class="glyphicon glyphicon-send custom"></i>
<i class="glyphicon glyphicon-floppy-disk custom"></i>
<i class="glyphicon glyphicon-floppy-saved custom"></i>
<i class="glyphicon glyphicon-floppy-remove custom"></i>
<i class="glyphicon glyphicon-floppy-save custom"></i>
<i class="glyphicon glyphicon-floppy-open custom"></i>
<i class="glyphicon glyphicon-credit-card custom"></i>
<i class="glyphicon glyphicon-transfer custom"></i>
<i class="glyphicon glyphicon-cutlery custom"></i>
<i class="glyphicon glyphicon-header custom"></i>
<i class="glyphicon glyphicon-compressed custom"></i>
<i class="glyphicon glyphicon-earphone custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-tower custom"></i>
<i class="glyphicon glyphicon-stats custom"></i>
<i class="glyphicon glyphicon-sd-video custom"></i>
<i class="glyphicon glyphicon-hd-video custom"></i>
<i class="glyphicon glyphicon-subtitles custom"></i>
<i class="glyphicon glyphicon-sound-stereo custom"></i>
<i class="glyphicon glyphicon-sound-dolby custom"></i>
<i class="glyphicon glyphicon-sound-5-1 custom"></i>
<i class="glyphicon glyphicon-sound-6-1 custom"></i>
<i class="glyphicon glyphicon-sound-7-1 custom"></i>
<i class="glyphicon glyphicon-copyright-mark custom"></i>
<i class="glyphicon glyphicon-registration-mark custom"></i>
<i class="glyphicon glyphicon-cloud-download custom"></i>
<i class="glyphicon glyphicon-cloud-upload custom"></i>
<i class="glyphicon glyphicon-tree-conifer custom"></i>
<i class="glyphicon glyphicon-tree-deciduous custom"></i>

Previous Page Print Page