How to create icon buttons with CSS?

In this tutorial, we will learn how to create icon buttons with CSS? By Apurva Mathur Last updated : July 28, 2023

We cannot imagine life without icons. They are everywhere and play a significant role in our lives, even though we don't notice or register them. These small images are an essential part of our interaction with screens: computers, smartphones, tablets, and other gadgets. Icons visually explain the concepts, we may have seen in many web pages that only icons are used and without any placeholder, you understand the field it belongs. Using icons make your webpage look creative. Icons are also used as distinctive elements in navigating a website, such as making it easier to locate and follow certain information throughout the site.

Creating Icon Buttons using CSS (Font Awesome)

There are many websites that provide us with free icons, and one of them is font awesome. The website provides us with many icons from which some of which are free and some of them are paid icons. You can easily find any icon, you just need to write the keyword related to the icon you want and you'll get the icon.

1. Import the CDN of Font Awesome

For this, the first step is to import the CDN of font awesome which is,

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

Copy this style sheet link, under head tag.

2. Choose the icon from the available icons

After copying the CDN, in your code go to https://fontawesome.com/icons/location-pin?s=solid, this link and type the icon name you want to use on your web page.

Click on the icon and copy the code shown in the picture,

3. Copy the CSS code and use in your code

Copy this code, wherever you want to use your icon.

As we know how we can import the icon on our webpage, now we'll use these icons in the button.

We have to follow all the above steps and the class of icons which we want to import will be written inside the button tag.

Example to create icon buttons with CSS

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  </head>
  
  <style type="text/css">
    button{
    padding: 20px;
    font-family: 'Righteous', cursive;
    font-weight: bolder;
    background-color: lightcoral;
    border: 1px solid lightcoral;
    border-radius: 15px;
    margin-right: 10px;
    margin-top: 15%;
    }
    i{
    font-size: 30px;
    margin-right: 10px;
    color: white;
    }
  </style>
  
  <body>
    <button> <i class="fa-solid fa-user-plus"></i> Add user</button>
    <button> <i class="fa-solid fa-cart-arrow-down"></i>Add to cart</button>
    <button> <i class="fa-solid fa-upload"></i>Upload photo</button>
    <button> <i class="fa-solid fa-heart"></i> Wishlist</button>
    <button> <i class="fa-solid fa-house-user"></i> Home</button>
    <button> <i class="fa-solid fa-phone"></i> Contact us</button>
    <button> <i class="fa-solid fa-location-pin"></i> Address</button>
  </body>
</html>

The output of the above example is:

Here I've used different types of icons in a button, also I have changed the size and the color of the icon. You can use any number of icons on your page.

CSS Examples »

How to right-align the flex item?

How to create Previous and Next buttons with CSS?