How to add Icons to Buttons in Bootstrap 5 ?

Last Updated : 08 Feb, 2024

Adding Icons to the buttons enhances the overall look of the web page. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its purpose. We can add icons to the buttons in several ways including Font Awesome Icons and Icons as a background Image.

Table of Content

Icons on Group buttons
Icons with Text

Icons on Group buttons

We can add icons to buttons in Bootstrap 5 by including the Font Awesome library and using the appropriate classes. For a group of buttons, apply the Font Awesome icon classes alongside your button classes individually for each button in the group.

Example 1: Illustration of adding icons to buttons in Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>GFG</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
        </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body style="text-align:center;">
    <div class="container mt-3">
        <h2 class="text-success">
            GeeksforGeeks
        </h2>

        <h2>How to add icons to buttons in Bootstrap 5?</h2>

        <div class="btn-group" role="group" 
             aria-label="Basic outlined example">
            <button type="button" 
                    class="btn btn-lg btn-outline-primary">
                <i class="fa fa-home"></i>
            </button>
            <button type="button" 
                    class="btn btn-lg btn-outline-success">
                <i class="fa fa-code"></i>
            </button>
            <button type="button" 
                    class="btn btn-lg btn-outline-danger">
                <i class="fa fa-folder"></i>
            </button>
            <button type="button" 
                    class="btn btn-lg btn-outline-warning">
                <i class="fa fa-file"></i>
            </button>

        </div>
    </div>
</body>

</html>

Output:

Recording-2024-01-30-at-001309

Icons with Text

Example 2: Implementation to add icons to button and add some text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>GFG</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
             integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
        </script>

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

<body style="text-align:center;">
    <div class="container mt-3">
        <h2 class="text-success">
            GeeksforGeeks
        </h2>
        <h2>How to add icons to buttons in Bootstrap 5?</h2>
        <div class="btn-group" role="group" 
             aria-label="Basic outlined example">
            <button type="button" class="btn btn-lg btn-outline-danger">
                <i class="fa fa-bug"></i> Report Bug
            </button>
        </div>
    </div>
</body>

</html>

Output:

Recording-2024-02-02-at-231716

How to Style Icons Bold in Bootstrap ?

nikitamehrotra99

Improve

Article Tags :

How to add Icons to Buttons in Bootstrap 5 ?

Icons on Group buttons

Icons with Text

Similar Reads

Thank You!

What kind of Experience do you want to share?