In this article, we will learn how to use icons in Pure CSS & will understand its implementation through examples. Pure CSS does not have any icon component, there are so many icon packages available that can be used in Pure CSS. In all of those icon packages, there are 3 most and easy use icons packages that are described below:

• Font Awesome Icons: Font-awesome is a web icon library that gives you scalable vector icons that can be customized in terms of color, size, and in many more aspects.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

• Google Material Icons: Icons can be added to our HTML page from the icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, color, shadow, etc.

https://fonts.googleapis.com/icon?family=Material+Icons

• Bootstrap Icons: Bootstrap Icons are designed to figure with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, in order that they scale quickly and simply.

https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css

The below examples will illustrate the use of these packages with Pure CSS.

Example 1: In this example, we will use a fire icon for 3 different packages. These icons have different appearances with different classes for these 3 packages.

Example:

Output:

Example 2: This example illustrates the use of button icons in Pure CSS. We will utilize the same example that we have used above & implement the button icon on it. Please refer to the How to use buttons with icons using Pure CSS? article for further details.

Example:

Output: