Sizing

Boxicons scale just like text. You can control the size of an icon using the CSS font-size property, and by default, icons inherit the font-size of their parent element.

In addition to using CSS, Boxicons also provides a set of utility classes for common, consistent icon sizes.

Using CSS Font Size

You can resize icons using plain CSS:


i.bx {
  font-size: 32px;
}

Or inline styles:


<i class="bxf bx-thumb-up" style="font-size: 96px;"></i>

Import the transformations CSS

To use the following classes, you first need to include the transformations stylesheet.

transformations.min.css


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

Using Size Utility Classes

Boxicons provides predefined size classes:

bx-xs
bx-sm
bx-md
bx-lg
bx-xl
bx-2xl
bx-3xl
bx-4xl
bx-5xl


<i class="bx bx-thumb-up bx-xs"></i>
<i class="bx bx-thumb-up bx-sm"></i>
<i class="bx bx-thumb-up bx-md"></i>
<i class="bx bx-thumb-up bx-lg"></i>
<i class="bx bx-thumb-up bx-xl"></i>
<i class="bx bx-thumb-up bx-2xl"></i>
<i class="bx bx-thumb-up bx-3xl"></i>
<i class="bx bx-thumb-up bx-4xl"></i>
<i class="bx bx-thumb-up bx-5xl"></i>

These classes apply consistent, predefined sizes that work well across common UI layouts.

Fixed Width Icons

Sometimes you need icons to align neatly in lists or menus. For this, you can use the bx-fw (fixed width) utility class, which gives all icons the same width. This is especially useful when placing icons next to text, such as in navigation lists or menus.


<i class="bx-fw bxl bx-facebook-square"></i> Facebook

Facebook