Icon size

Bootstrap 5 Icon size component

Responsive Icon size built with Bootstrap 5. Examples of ways to resize icons.

How it works

To increase icon sizes relative to their container, use fa-xs, fa-sm, fa-lg (33% increase), or use literal sizes (to scale it from 1x to 10x) fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x.

<i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-4x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-6x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-8x"></i>
  <i class="fas fa-camera fa-9x"></i>
  <i class="fas fa-camera fa-10x"></i>

You can make all your icons the same width so they can easily vertically align, like in a list or navigation menu.

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we’ve added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.

<!-- vertically aligning icons -->
<div style="font-size: 2rem;">
  <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

Related resources