VOOZH about

URL: https://www.geeksforgeeks.org/css/bulma-icon-sizes/

⇱ Bulma Icon Sizes - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bulma Icon Sizes

Last Updated : 23 Jul, 2025

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.

Output:

👁 Bulma Icon Sizes

Reference: https://bulma.io/documentation/elements/icon/#sizes

Comment
Article Tags: