Icon Sizes

We sometimes get into a situation where we need different sizes of icons on our application.

We can achieve different sizes of Font Awesome Icons in two ways as stated below.

  • Change icon size by modifying the font size as needed
  • Use predefined classes for different sizes from the Font Awesome library

Icons Sizes by modifying the font size

The Font Awesome Icons size can be increased or decreased either by modifying the font size of its parent element or container as shown below.

<i class="fa fa-users" style="font-size: 40px;"></i>
<i class="fa fa-users" style="font-size: 10px;"></i>

Icon Sizes using Predefined Classes from Font Awesome

There are some predefined classes to change the icon size, which can be used to increase the icon size as mentioned below.

  • Class fa-lg to 
  • Class fa-2x to make an icon 2 times bigger
  • Class fa-3x to make an icon 3 times bigger
  • Class fa-4x to make an icon 4 times bigger
  • Class fa-5x to make an icon 5 times bigger
<i class="fa fa-cubes fa-lg"></i>
<i class="fa fa-cubes fa-2x"></i>
<i class="fa fa-cubes fa-3x"></i>
<i class="fa fa-cubes fa-4x"></i>
<i class="fa fa-cubes fa-5x"></i>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1>Icon Sizes</h1>
    <p><i class="fa fa-cubes"></i> default</p>
    <p><i class="fa fa-cubes" style="font-size: 50px;"></i> 40px</p>
    <p><i class="fa fa-cubes" style="font-size: 10px;"></i> 10px</p>
    <h1>Predefined Sizes</h1>
    <div>
        <p><i class="fa fa-cubes"></i> default</p>
        <p><i class="fa fa-cubes fa-lg"></i> fa-lg</p>
        <p><i class="fa fa-cubes fa-2x"></i> fa-2x</p>
        <p><i class="fa fa-cubes fa-3x"></i> fa-3x</p>
        <p><i class="fa fa-cubes fa-4x"></i> fa-4x</p>
        <p><i class="fa fa-cubes fa-5x"></i> fa-5x</p>
    </div>
</body>
</html>

Overall

Generating different sizes of icons is so simple.

Related Links