How to Use Feather Icons in HTML and CSS

Feather icons are a collection of fonts that can be used in applications and websites. It offers Scalable Vector Graphics icons that are highly customizable in terms of shadow, color, size, and any other property that CSS can handle. Developers and designers working on various platforms can download the increasing Feather font icon collection and utilize it according to their preferences.

This write-up will discuss the method to use Feather icons in HTML and CSS. Moreover, examples related to the specified procedure will be provided. So, let’s start!

Note: Before moving towards, ensure that you have installed Feather icons. If you do not have it already, then follow the below-given section.

How to install Feather icons

There are various methods for installing Feather icons; however, we have compiled the easiest one for you to embed Feather icons in HTML and CSS without any hassle.

Method 1: Installing Feather icons using CDN

Content Delivery Network (CDN) provides access to the JavaScript files that are utilized by people all around the world. You can use any of the following links for adding Feather icons to your HTML file:

Method 2: Installing Feather icons using npm library

“feather-icons” is an npm library used to integrate Feather font to any JavaScript application. If you want to install feather icons using the npm library, you have to execute this command in the terminal:

npm install feather-icons –save

Method 3: Installing Feather icons by downloading its collection

First of all, download the zipped folder of the Feather icons and then copy the “font/” and “css/” directories to your project. Next, move to your HTML file and specify the path of the “feathericon.min.css” file in the “<link>” tag:

How to use Feather icons in HTML and CSS

To demonstrate the procedure of using Feather icons in HTML and CSS, we will create a new HTML file named “myFile.html” in Visual Studio Code:

In “myFile.html” file, firstly, we will add the link of the Feather Icon package as a source, within the “<script>” tag:

<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/feather-icons"></script>
<body>

Then, we will specify the icons using “data-feather” attribute value in the <i> tag. You can see from the given code, we are using “star”, “square”, “bell”, and “award” Feather icons in HTML file:

<h1>We are using Feather Icons in HTML And CSS</h1>

<i data-feather="star"></i>
<i data-feather="square"></i>
<i data-feather="bell"></i>
<i data-feather="award"></i>

Lastly, we will invoke the feather.replace() method for replacing the DOM elements with the added feather icons:

Here is how the complete code looks in our “myFile.html”:

Open the file in the browser and check out the Feather icons which we have used in the “myFile.html” file:

At this point, you have set the basic layout of the Feather icons in the HTML file. So, now, if you want to customize the Feather icons style, you can perform this operation with the help of CSS.

In our “style.css” file, we will define three classes to set the size of the Feather icons:

.feather-10{
width: 10px;
height: 10px;
}

.feather-24{
width: 24px;
height: 24px;
}

.feather-48{
width: 48px;
height: 48px;
}

To apply these settings to a Feather icon, you have to mention the required CSS class in the following way:

Again save your HTML file, open it to your favorite browser, and note the difference in the styling of the Feather icons:

That was all about the basic use of Feather icons in HTML and CSS. To explore further, check out the Feather icons documentation.

Conclusion

To use Feather icons in HTML and CSS, you have to install them first using CDN, npm library, or by downloading its related files from the official website. After installing Feather icons, you can integrate its beautiful collection of icons and style them according to your preferences using CSS. This write-up discussed the method to use Feather icons in HTML and CSS. Moreover, examples related to the specified procedure are also provided.