The Complete Guide to Bootstrap Icon Button Size and Style

Bootstrap does not have IconButton components (unlike Material UI), but we can create and style custom icon buttons. In this tutorial I will create several examples that style Bootstrap icon button width, height, border, color, and alignment.

Here are the Icon Buttons we will make:

Full code for this tutorial is in the Resources section. Here are the Bootstrap button docs.

Bootstrap Icon Button Width and Height

There are two primary ways to control the width and height of Bootstrap Buttons (and Icon Buttons):

• Use the built-in btn-lg or btn-sm Bootstrap classes
• Use the width and height CSS properties

The btn-lg class adds the following styling:

The btn-sm class adds the following styling:

Here’s an example of using one of these classes with an icon button:

<Button className="m-1 btn-sm">
  <FontAwesomeIcon icon={faChessPawn} size="lg" className="pe-2 icon" />
  Btn 1
</Button>

A great thing about these classes is that they use rems so that the button has dynamic size.

If you want more customized styling, consider adding a custom class to your icon button. Then you can set exact height, width, padding, and more. Here’s the example from my tutorial:

.custom-btn-size {
  max-width: 10rem;
  min-height: 4rem;
  font-size: 1.5rem;
}

<Button className="m-1 custom-btn-size">
  <FontAwesomeIcon icon={faChessPawn} size="lg" className="pe-2 icon" />
  Btn 1
</Button>

The font size of the custom-btn-size class affects the icon size. The size="lg" prop on the icon adds font-size to the icon, and it may grow when the button font size is increased.

Here’s how to customize width on bootstrap table columns, and here’s how to add hover effects to Bootstrap icons.

Bootstrap Icon Button Text Color and Background Color

Bootstrap comes with some default button classes that can be used to style icon buttons. If you wanted to create an icon button with a border and a certain color scheme, you can overwrite the btn-outline-primary. Alternatively, you can simply create a custom class. Here’s an example:

.custom-btn-style {
  background-color: green;

  color: yellow;
}

<Button className="m-1 custom-btn-style">
  Btn 2 <FontAwesomeIcon className="ps-2" icon={faPlug} size="lg" />
</Button>

Just an interesting note, the React-Bootstrap modal close button it is an icon button but it is generated by an image.

Bootstrap Icon Button With No Border

If you want to remove the border from a Bootstrap button, add a class with border: 0;. Here’s an example from my code for my custom button:

.custom-btn-style {
  background-color: green;
  border: 0;
  color: yellow;
}

If you add border: 0; in this way, then button hover will also not have a border.

If your icon button does not have any custom color, you may not realize that it even has a border because it is the same color as the background by default. However, if you remove the border you will notice a slight decrease in button size, and you can see the effects in dev tools:

Bootstrap Icon Button With Custom Alignment

The icon will be to the left or right of the button text simply depending on which code comes first inside the button.

Here’s an example of the icon first, text second:

<Button className="m-1">
  <FontAwesomeIcon className="ps-2" icon={faArrowUp} size="lg" />
  Text Second
</Button>

After deciding which side of the text the icon should be on, you may want to align the icon inside the button. Here’s an example where I aligned the text to the left and the icon to the right using justify-content:

.btn.custom-btn-align {
  display: flex;
  justify-content: space-between;
}

<Button className="m-1 custom-btn-align" onClick={() => setOpen(!open)}>
  Btn 3
  {open ? (
    <FontAwesomeIcon icon={faArrowUp} size="lg" />
  ) : (
    <FontAwesomeIcon icon={faArrowDown} size="lg" />
  )}
</Button>

Notice that I switch the icon on button click based on a state value called open.

Resources

Consider styling your icon buttons with Bootstrap’s border radius classes.

Here’s how to set size for the React-Bootstrap form control component, and here’s how to set size for the modal.

Bootstrap Button Docs

Full code:

//styles.css
.custom-btn-size {
  max-width: 10rem;
  min-height: 4rem;
  font-size: 1.5rem;
}

.btn.custom-btn-align {
  display: flex;
  justify-content: space-between;
}

.custom-btn-style {
  background-color: green;
  border: 0;
  color: yellow;
}

.container {
  display: flex;
  flex-direction: column;
}

.icon {
  color: red;
}

//IconBtn.tsx
import React from "react";
import Button from "react-bootstrap/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faChessPawn,
  faPlug,
  faArrowDown,
  faArrowUp
} from "@fortawesome/free-solid-svg-icons";

export default function InputClear() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="container mt-2">
      <Button className="m-1 custom-btn-size">
        <FontAwesomeIcon icon={faChessPawn} size="lg" className="pe-2 icon" />
        Btn 1
      </Button>
      <Button className="m-1 custom-btn-style">
        Btn 2 <FontAwesomeIcon className="ps-2" icon={faPlug} size="lg" />
      </Button>
      <Button className="m-1 custom-btn-align" onClick={() => setOpen(!open)}>
        Btn 3
        {open ? (
          <FontAwesomeIcon icon={faArrowUp} size="lg" />
        ) : (
          <FontAwesomeIcon icon={faArrowDown} size="lg" />
        )}
      </Button>

      <div style={{ marginTop: 24, marginLeft: 12 }}>
        <a
          target="_blank"
          href="https://smartdevpreneur.com/how-to-add-a-clear-button-to-a-bootstrap-input-component/"
        >
          Click here for more Bootstrap info
        </a>
      </div>
    </div>
  );
}