Adding a hover effect to icons in Bootstrap can be accomplished by targeting the hover pseudo-class on icons. We can also use a little JavaScript to dynamically add a Bootstrap utility class on hover. In this tutorial we will explore three methods of applying hover styling to an icon.
Here’s an example of what we will build:

How to Add Hover Styling to a Bootstrap Icon with Class Selector and :hover Pseudo-Class
In this tutorial I will be using font awesome icons. We can add hover styling to an icon (whether or not we are using font awesome) by adding the :hover
pseudo-selector to a class that is applied to an icon.
Here is example code:
//HTML
<span className="fa fa-question-circle icon-box"/>
//CSS
.icon-box {
margin: 1.5rem;
min-width: 5rem;
min-height: 5rem;
padding: .5rem;
line-height: 5rem;
font-size: 4rem;
text-align: center;
box-sizing: content-box;
}
.icon-box:hover {
transform: scale(1.1);
background-color: $warning;
border-radius: 50%;
color: $primary;
}
In this example I added the icon-box
class to give the icon some size and other styling. I then targeted the icon-box
class with a :hover
selector. The browser auto-applies the hover pseudo-class when the icon is hovered.
I could also have added the hover selector to the fa
class like this:
.fa:hover {
transform: scale(1.1);
background-color: $warning;
border-radius: 50%;
color: $primary;
}
Since all my font awesome icons use this class, it would apply the hover styling more broadly.
Either class is a good option for adding transform, background-color, border-radius, and text color on icon hover. The image in the intro was created with the code above.
How to Add Hover Styling to a Bootstrap Icon with Element Selector and :hover Pseudo-Class
Instead of applying hover styling by targeting a class and :hover
, we can target all icons with an element selector. Here’s an example:
//HTML
<span className="fa fa-plus icon-box" />
//CSS
span:hover {
transform: scale(1.1);
background-color: $warning;
border-radius: 50%;
color: $primary;
}
This will apply hover styling to all <span>
elements. In this tutorial, I am using the fa
class to convert the span into a font awesome icon. Targeting all spans with this hover styling risks adding a hover effect to some elements that are not icons and might be too broad.
Here is the effect of this code:

How to Add Hover Styling to a Bootstrap Icon with Conditional Classes
If you can use some JavaScript and a library like React, then you can conditionally add a class to an icon in a Bootstrap project. We can even conditionally add built-in Bootstrap classes that change font-size, line height, and more.
<span
className={`${hovered ? "display-3 bg-primary rounded-circle border border-success border-3" : ""} fa fa-flag icon-box`}
onMouseOver={() => setHovered(!hovered)}
onMouseOut={() => setHovered(!hovered)}
/>
In the code above, we detect mouse over and mouse out events and use those to set a state value named hovered
. If hovered
is true, we apply several Bootstrap utility classes for border, font size, and color:
- display-3: styles font size and line height
- bg-primary: sets the background color to the value of the Bootstrap
$primary
variable - rounded-circle: sets the border radius to 50%
- border: adds a solid 1px border
- border-success: sets the border color to the value of the Bootstrap
$success
variable (a shade of green by default) - border-3: set the border to 3px
Here is the hover styling produced by the code above:

All of these classes are available in “vanilla” Bootstrap. I simply used React code to conditionally apply them.
Here’s how to customize the Bootstrap accordion icon, and we can also create Bootstrap icon buttons.