Bulma Icon Sizes

Last Updated : 20 Jan, 2022

Bulma Icon Size classes are used to define the size of the icon container. The icon container in Bulma comes in 4 different sizes: small, default, medium, and large. The icon container size can be set by using the CSS classes provided by Bulma. The default dimensions of the icon container are 1.5rem × 1.5rem.

Icon Size Classes:

is-small: This class sets the size of the icon container to 1rem × 1rem.
is-medium: This class sets the size of the icon container to 2rem × 2rem.
is-large: This class sets the size of the icon container to 3rem × 3rem.

Note: These classes above only change the size of the icon container, not the actual icon.

Syntax:

<span class="icon is-small">
    <i class="fas fa-exclamation-triangle"></i>
</span>

Example: The below example illustrates the use of Bulma icon size classes to set the size of the icon container.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Icon Sizes</title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
  
    <style> 
        .container>div { 
            margin-top: 25px; 
        } 
  
        .icon { 
            background-color: rgba(0, 220, 0, 0.5); 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b>Bulma Icon Sizes</b> 
    <div class="container"> 
        <div> 
            <span class="icon is-large"> 
                <i class="fas fa-home"></i> 
            </span> 
        </div> 
        <div> 
            <span class="icon is-medium"> 
                <i class="fas fa-list"></i> 
            </span> 
        </div> 
        <div> 
            <span class="icon"> 
                <i class="fas fa-camera"></i> 
            </span> 
        </div> 
        <div> 
            <span class="icon is-small"> 
                <i class="fas fa-spinner"></i> 
            </span> 
        </div> 
    </div> 
</body> 
  
</html>