VOOZH about

URL: https://www.geeksforgeeks.org/css/css-icons/

⇱ CSS Icons - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS Icons

Last Updated : 11 Jul, 2025

CSS Icons are an essential part of modern web design, offering a visual representation of actions, ideas, and objects. CSS icons offer a compelling way to achieve this by seamlessly integrating scalable and customizable icons into your web design. CSS Icons from various libraries can be effortlessly styled and customized with CSS, allowing for alterations in size, color, shadow, and more. These icons serve as intuitive graphical elements, enhancing navigation and conveying specific meanings.

Choosing and Implementing CSS Icons from Libraries

Implementing CSS icons from various libraries is straightforward and enhances the aesthetic appeal and functionality of your web pages. Here’s how you can effectively integrate and customize icons using popular libraries:

  1. Font Awesome Icons
  2. Google Icons
  3. Bootstrap Icons

How To Add Icons

Here's a general workflow for using a CSS icon library:

  1. Choose your preferred library and locate the CDN link for the icons you wish to use.
  2. Add the CDN link to the <head> section of your HTML document.
  3. Include the desired icon class names within your HTML elements, typically <span> or <i> tags.

Note: All the above-mentioned libraries do not require any downloading or installation.

1. Font Awesome Icons

Font Awesome is a widely-used icon library that provides a comprehensive set of icons. To integrate Font Awesome icons into your project:

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

Syntax:

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

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property.

Example 1: In this example, we have used the font-size property with each icon class & whose value is set to 32px.

Output:

👁 Font Awesome Icons Example

Example 2: In this example, we have used the "fa fa-heart" class having the font-size property & color property whose values is set to 28px & red, blue respectively.

Output:

👁 Font Awesome Icons Example

2. Google Icons

Google Icons, available through Google's Material Icons library, offer a sleek and modern icon set that integrates seamlessly with Google's design language:

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

Syntax:

<i class="material-icons">cloud</i>

Please refer to the How to use Google material icon as list-style in a webpage using HTML and CSS? article to know how to use CSS properties with the pre-defined class.

Example 1: In this example, we have used the "material-icons" class with the required icon.

Output:

👁 Google Icons Example

Example 2: In this example, we have used the "material-icons" class with the cloud shape.

Output:

👁 Google Icons Example

3. Bootstrap Icons

Bootstrap Icons provide a collection of icons designed specifically for Bootstrap users, enhancing compatibility and integration within Bootstrap-based projects:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Syntax:

<i class="glyphicon glyphicon-cloud"></i>

We can use the font-size property to make it large-size icons for display. The below example illustrates the use of the font-size property with the pre-defined class.

Example 1: In this example, we have used the font-size property with each glyphicon class & all the value is set to different numbers.

Output:

👁 Bootstrap Icons Example

Example 2: In this example, we have used the "glyphicon glyphicon-thumbs-up" class with the thumbs-up shape & all the value is set to different numbers.

Output:

👁 Bootstrap Icons Example

Comment
Article Tags: