Buttons with icons

Bootstrap 5 Buttons with icons component

Responsive buttons with icons built with Bootstrap 5. Enhance your web design with stylish, intuitive buttons that include icons for improved user experience.

Floating

Use .btn-floating class to make a circle button.

To make it works properly you have to put an icon inside. The text will not fit in. You can find hundreds of available icons in our icons docs.

Edit in sandbox 
<button type="button" class="btn btn-primary btn-floating" data-mdb-ripple-init>
  <i class="fas fa-download"></i>
</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

You can apply almost all the same classes and attributes to the floating buttons as to the regular buttons - colors, ripples, sizes, outline, etc.

Edit in sandbox 
<button type="button" class="btn btn-primary btn-floating" data-mdb-ripple-init>
  <i class="fas fa-gem"></i>
</button>
<button type="button" class="btn btn-outline-success btn-floating" data-mdb-ripple-init data-mdb-ripple-color="dark">
  <i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-danger btn-floating" data-mdb-ripple-init>
  <i class="fas fa-magic"></i>
</button>
<button type="button" class="btn btn-dark btn-floating" data-mdb-ripple-init>
  <i class="fab fa-apple"></i>
</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Fixed buttons

Use .fixed-action-btn class to create a fixed button with a list of available options that shows on hover or click.

See the live example of a fixed button in the bottom right corner of this page.

Note: There are available show/hide methods to manually open and close the list. Read the API tab to find more info.

Edit in sandbox 
<div class="fixed-action-btn" data-mdb-button-init data-mdb-ripple-init>
  <a class="btn btn-floating text-white btn-lg" data-mdb-ripple-init style="background-color: #f44336;">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #f44336;">
        <i class="fas fa-star"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #fdd835;">
        <i class="fas fa-user"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #4caf50;">
        <i class="fas fa-envelope"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #2196f3;">
        <i class="fas fa-shopping-cart"></i>
      </a>
    </li>
  </ul>
</div>
// Initialization for ES Users
import { Button, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Button, Ripple });
<div class="fixed-action-btn" data-mdb-ripple-init data-mdb-button-init>
  <a class="btn btn-floating text-white btn-lg" data-mdb-ripple-init style="background-color: #f44336">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #f44336">
        <i class="fas fa-star"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #fdd835">
        <i class="fas fa-user"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #4caf50">
        <i class="fas fa-envelope"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #2196f3">
        <i class="fas fa-shopping-cart"></i>
      </a>
    </li>
  </ul>
</div>
// Initialization for ES Users
import { Button, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Button, Ripple });

Social

Combining our icons and custom colors you can create social buttons. See all available icons in our icons search (check "brands" to filter brand icons).

Note: If you use custom colors you need to remove our predefined color classes like .btn-primary or .btn-danger. Instead of this, you need to add class .text-white>.

In the example below, we place a Facebook icon <i class="fab fa-facebook-f"></i> inside the button and set a background-color to #3B5998 (facebook brand color).

Edit in sandbox 
<a class="btn text-white" data-mdb-ripple-init style="background-color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f"></i>
</a>
// Initialization for ES Users
import { Button, initMDB } from "mdb-ui-kit";

initMDB({ Button });

Sample brands

A few the most popular brands in form of social buttons.

Edit in sandbox 
<!-- Facebook -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #55acee;" href="#!" role="button">
  <i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #dd4b39;" href="#!" role="button">
  <i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram"></i>
</a>

<!-- Linkedin -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #0082ca;" href="#!" role="button">
  <i class="fab fa-linkedin-in"></i>
</a>

<!-- Pinterest -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #c61118;" href="#!" role="button">
  <i class="fab fa-pinterest"></i>
</a>

<!-- Vkontakte -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #4c75a3;" href="#!" role="button">
  <i class="fab fa-vk"></i>
</a>

<!-- Stack overflow -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ffac44;" href="#!" role="button">
  <i class="fab fa-stack-overflow"></i>
</a>

<!-- Youtube -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ed302f;" href="#!" role="button">
  <i class="fab fa-youtube"></i>
</a>

<!-- Slack -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #481449;" href="#!" role="button">
  <i class="fab fa-slack-hash"></i>
</a>

<!-- Github -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #333333;" href="#!" role="button">
  <i class="fab fa-github"></i>
</a>

<!-- Dribbble -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ec4a89;" href="#!" role="button">
  <i class="fab fa-dribbble"></i>
</a>

<!-- Reddit -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ff4500;" href="#!" role="button">
  <i class="fab fa-reddit-alien"></i>
</a>

<!-- Whatsapp -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #25d366;" href="#!" role="button">
  <i class="fab fa-whatsapp"></i>
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Floating social

By adding .btn-floating class you can create a nice, floating social button.

Edit in sandbox 
<a class="btn text-white btn-lg btn-floating" data-mdb-ripple-init style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram"></i>
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Text

You don't need to use only an icon. You can add text to the button. Remember to add some spacing classes (for example .me-2) to provide a proper space between icon and text.

Twitter
Edit in sandbox 
<a class="btn text-white" data-mdb-ripple-init style="background-color: #55acee;" href="#!" role="button">
  <i class="fab fa-twitter me-2"></i>
  Twitter
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Only icon

By removing button classes and replacing background-color with color you can create minimalistic, clickable icons.

Edit in sandbox 
<!-- Facebook -->
<a style="color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f fa-lg"></i>
</a>

<!-- Twitter -->
<a style="color: #55acee;" href="#!" role="button">
  <i class="fab fa-twitter fa-lg"></i>
</a>

<!-- Google -->
<a style="color: #dd4b39;" href="#!" role="button">
  <i class="fab fa-google fa-lg"></i>
</a>

<!-- Instagram -->
<a style="color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram fa-lg"></i>
</a>

Notifications

By using a badge you can create a button with a notification to provide a counter.

8
Edit in sandbox 
<a class="btn text-white" data-mdb-ripple-init style="background-color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f"></i>
  <span class="badge bg-danger ms-2">8</span>
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });