How to add Ionicons in HTML and CSS

Expressing your thoughts in words can be a little bit difficult process and lengthy details about anything may lack the user’s attention, therefore, inserting the icons on a website instead of text can be a better approach. Icons have become an essential part of any website because the proper use of icons can express the exact message in visual form.

To embed icons into a website there are multiple icon sets are available, one of the most significant among them is Ionicons. The Inoicons are freely available to everyone and can provide effective results for all the major platforms such as iOS, desktop, etc.

This write-up will present a detailed understanding of how to use Ionicons in HTML and in this regard we have to follow the following concepts:

• What are Ionicons
• How to Use Ionicons
• Ionicons Styles

Let’s start

What are Ionicons

It is a freely accessible icon set that provides more than seven hundred icons for almost every platform such as android, web, desktop, etc.

How to Use Ionicons

To use Ionicons, follow the step-by-step guide provided below:

First Step

To add ionicons on a website, the first thing that you have to do is open a web browser and search for the “ionicons”:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-27.png" data-lazy- height="566" src="data:image/svg xml,” width=”1347″>

Clicking on the Ionicons will lead you to the following page:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-31.png" data-lazy- height="628" src="data:image/svg xml,” width=”1163″>

Or Click here to visit the official website of Ionicons.

Second Step

Afterward, you have to click on the usage option as mentioned in the following figure:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-35.png" data-lazy- height="439" src="data:image/svg xml,” width=”1189″>

Clicking on the “Usage” option will open a new page:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-39.png" data-lazy- height="591" src="data:image/svg xml,” width=”1350″>

Third Step

Scroll down a little bit and you will find an “installation” section. Within the installation option, you will find a couple of scripts:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-41.png" data-lazy- height="472" src="data:image/svg xml,” width=”1248″>

Copy both the scripts and paste them near to the closing body tag of your HTML document or in the head tag of your web page:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-44.png" data-lazy- height="106" src="data:image/svg xml,” width=”922″>

Fourth Step

Now, we can load the Ionicons in our HTML document. To do so, go back to the “Usage” tab and scroll down a little bit to find the “Basic Usage” section to understand how to use Ionicon Component:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-49.png" data-lazy- height="261" src="data:image/svg xml,” width=”1199″>

Fifth Step

Now, head back to the “Icons” tab and search for the icon of your choice:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-52.png" data-lazy- height="410" src="data:image/svg xml,” width=”1165″>

Clicking on the icon will show the component’s code:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-55.png" data-lazy- height="646" src="data:image/svg xml,” width=”1247″>

Sixth Step

Copy the code and paste it into your HTML document:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-57.png" data-lazy- height="397" src="data:image/svg xml,” width=”1017″>

Following will be the output for the above-given snippet:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-59.png" data-lazy- height="218" src="data:image/svg xml,” width=”831″>

The output verifies that the “Ionicons” home icon is successfully added to our HTML page. In this way, you can insert as many Ionicons as you want.

Ionicons Styles

You can select the icons from three different styles as shown in the below-given snippet:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-60.png" data-lazy- height="402" src="data:image/svg xml,” width=”1036″>

Example

This example will utilize a home Ionicons of all three styles:

The above-given snippet produces the following output:

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-61.png" data-lazy- height="415" src="data:image/svg xml,” width=”584″>

The output shows how outline, filled, and sharp styles looks. Among these styles i.e. outline, filled, sharp, you can choose any style that suit your needs.

Conclusion

To embed an Ionicon in HTML all you have to do is copy the scripts from the installation section of the Ionicons and paste them in your HTML document. Afterward, select the Ionicon of your choice, copy the component code and paste it into your HTML document. This write-up provides a detailed understanding of what Ionicons are, and how to implement/use Ionicons in HTML. Screenshots are provided with each step for a thorough understanding of the concepts.