Border

Boxicons provides utility classes that let you quickly add a border around any icon. This is useful when you want to display icons as buttons, badges, or highlighted UI elements without writing custom CSS.

Two border styles are available:

bx-border — adds a square (rounded-rectangle) border around the icon
bx-border-circle — adds a circular border around the icon

Make sure you have included the transformations stylesheet before using these classes.

transformations.min.css


<link href="https://cdn.boxicons.com/transformations.min.css" rel="stylesheet">


<i class="bxf bx-thumb-up bx-border"></i>
<i class="bxf bx-thumb-up bx-border-circle"></i>
<i class="bxf bx-thumb-up bx-border-squircle"></i>

bx-border-squircle only works in select browsers

How it works

The border is drawn using CSS around the icon glyph.
The icon remains fully scalable and inherits color and size normally.
The border automatically scales with the icon size.

This means you can combine borders with sizing, color, and rotation utilities:


<i class="bx bx-heart bx-border bx-lg" style="color: red;"></i>
<i class="bx bx-heart bx-border-circle bx-sm"></i>