Bulma Icon

The Icon component in Bulma provides a reliable square container for icon fonts. It prevents layout jumps by reserving space before icons load and works with all major icon libraries including Font Awesome, Material Design Icons, and Ionicons[citation:2][citation:7].

Basic Icon Container

The .icon class creates a fixed container for your icons:

<!-- Basic icon container -->
<span class="icon">
  <i class="fas fa-home"></i>
</span>

<!-- The yellow background shows the container area -->
<span class="icon" style="background-color: yellow;">
  <i class="fas fa-home"></i>
</span>

Icon with Text

Combine icons with text using the .icon-text wrapper:

<!-- Icon and text combination -->
<a class="icon-text" href="#">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</a>

<!-- Multiple icons and text -->
<a class="icon-text" href="#">
  <span class="icon">
    <i class="fas fa-train"></i>
  </span>
  <span>Paris</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Budapest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Bucharest</span>
</a>

Flex Layout with Icon Text

<!-- Use div instead of span for flex behavior -->
<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information message here</span>
</div>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-circle"></i>
  </span>
  <span>Success message here</span>
</div>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning message here</span>
</div>

Icon Sizes

Bulma provides four size modifiers for icons:

Icon Colors

Since icon fonts are text, you can use Bulma's color helpers:

<!-- Standard colors -->
<span class="icon has-text-primary">
  <i class="fas fa-home"></i>
</span>

<span class="icon has-text-success">
  <i class="fas fa-check"></i>
</span>

<span class="icon has-text-danger">
  <i class="fas fa-times"></i>
</span>

<!-- Icon text with colors -->
<div class="icon-text has-text-info">
  <span class="icon">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Info text</span>
</div>

Font Awesome Special Features

Bulma works seamlessly with Font Awesome's advanced features:

Animated Icon Example

<!-- Loading spinner -->
<span class="icon">
  <i class="fas fa-spinner fa-pulse"></i>
</span>

<!-- Bordered icon -->
<span class="icon">
  <i class="fas fa-envelope fa-border"></i>
</span>

<!-- Stacked icons -->
<span class="icon fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

Material Design Icons

Bulma also supports Material Design Icons:

<!-- Material Design Icon -->
<span class="icon">
  <i class="mdi mdi-home"></i>
</span>

<!-- With size modifiers -->
<span class="icon is-medium">
  <i class="mdi mdi-24px mdi-home"></i>
</span>

<!-- Light and dark variants -->
<span class="icon">
  <i class="mdi mdi-light mdi-home"></i>
</span>

<span class="icon">
  <i class="mdi mdi-dark mdi-home"></i>
</span>

Ionicons Support

For Ionicons users, Bulma provides seamless integration:

<!-- Ionicons example -->
<span class="icon">
  <i class="ion-ionic"></i>
</span>

<span class="icon">
  <i class="ion-social-github"></i>
</span>

<span class="icon is-large">
  <i class="ion-ios-settings"></i>
</span>

Practical Icon Examples

Social Media Icons

<div class="social-icons">
  <a class="icon is-medium" href="#">
    <i class="fab fa-twitter"></i>
  </a>
  <a class="icon is-medium" href="#">
    <i class="fab fa-facebook"></i>
  </a>
  <a class="icon is-medium" href="#">
    <i class="fab fa-linkedin"></i>
  </a>
  <a class="icon is-medium" href="#">
    <i class="fab fa-github"></i>
  </a>
  <a class="icon is-medium" href="#">
    <i class="fab fa-instagram"></i>
  </a>
</div>

Feature List with Icons

<div class="content">
  <div class="icon-text mb-3">
    <span class="icon has-text-success">
      <i class="fas fa-check-circle"></i>
    </span>
    <span>Fast and responsive design</span>
  </div>
  
  <div class="icon-text mb-3">
    <span class="icon has-text-success">
      <i class="fas fa-check-circle"></i>
    </span>
    <span>Mobile-first approach</span>
  </div>
  
  <div class="icon-text mb-3">
    <span class="icon has-text-success">
      <i class="fas fa-check-circle"></i>
    </span>
    <span>Easy customization</span>
  </div>
  
  <div class="icon-text">
    <span class="icon has-text-success">
      <i class="fas fa-check-circle"></i>
    </span>
    <span>Free and open source</span>
  </div>
</div>

Button with Icon

<button class="button is-primary">
  <span class="icon">
    <i class="fas fa-download"></i>
  </span>
  <span>Download Now</span>
</button>

<button class="button is-danger is-outlined">
  <span class="icon">
    <i class="fas fa-trash"></i>
  </span>
  <span>Delete</span>
</button>

Icon Variables (Sass/Customization)

Best Practices

• Always wrap icons in .icon containers to prevent layout shifts
• Use appropriate size modifiers for different contexts
• Combine with text using .icon-text for better alignment
• Choose icon libraries based on your project needs
• Consider accessibility by adding aria-labels when icons are standalone links
• Use color helpers to match your design system

Up next: Bulma Image Component