Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bulma | Icon

  • Last Updated : 04 Oct, 2021

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. 
The icon is a kind of square container that reserves space for the icon font. Bulma is compatible with all icon font libraries: Font Awesome, Material Design Icons, Ionicons, etc.
Example 1: This example creating plain icons using Bulma.
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
 
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
 
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
 
        div {
            text-align: center;
        }
 
        strong {
            margin-right: 5px;
        }
    </style>
</head>
 
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
 
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div>
                    <h1 class='title has-text-centered'>
                        Plain Icons
                    </h1>
                </div>
 
                <div class='box'>
                    <div>
                        <strong>Username:</strong>
                        <span class="icon">
                            <i class="fas fa-user"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Password:</strong>
                        <span class="icon">
                            <i class="fas fa-lock"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Notification:</strong>
                        <span class="icon">
                            <i class="fas fa-bell"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Headphone:</strong>
                        <span class="icon">
                            <i class="fas fa-headphones"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Home:</strong>
                        <span class="icon">
                            <i class="fas fa-home"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Reply:</strong>
                        <span class="icon">
                            <i class="fas fa-reply"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Music:</strong>
                        <span class="icon">
                            <i class="fas fa-music"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output: 
 

Example 2: This example creating some colorful Icons using Bulma.
 



html




<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
 
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 80px;
        }
 
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
 
        div {
            text-align: center;
        }
 
        strong {
            margin-right: 5px;
        }
    </style>
</head>
 
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
 
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div>
                    <h1 class='title
                        has-text-centered'>
                        Colorful Icons
                    </h1>
                </div>
 
                <div class='box'>
                    <div>
                        <strong>Username:</strong>
                        <span class="icon">
                            <i class="fas fa-user
                                has-text-link"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Password:</strong>
                        <span class="icon">
                            <i class="fas fa-lock
                                has-text-black"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Notification:</strong>
                        <span class="icon">
                            <i class="fas fa-bell
                                has-text-success"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Headphone:</strong>
                        <span class="icon">
                            <i class="fas fa-headphones
                                has-text-danger"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Home:</strong>
                        <span class="icon">
                            <i class="fas fa-home
                                has-text-black"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Reply:</strong>
                        <span class="icon">
                            <i class="fas fa-reply
                                has-text-info"></i>
                        </span>
                    </div>
 
                    <div>
                        <strong>Music:</strong>
                        <span class="icon">
                            <i class="fas fa-music
                                has-text-danger"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output: 
 

Example 3: This example creating icons with different sizes. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
 
    <!-- custom css -->
    <style>
        div.columns {
            margin-top: 25px;
        }
 
        h1 {
            margin-top: 10px;
            margin-bottom: 20px;
            color: green !important
        }
 
        strong {
            margin-right: 5px;
        }
    </style>
</head>
 
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
 
    <div class='container has-text-centered'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-7'>
                <div>
                    <h1 class='title
                        has-text-centered'>
                        Different size Icons
                    </h1>
                </div>
 
                <div class='box'>
                    <!-- creating table to show
                        different sizes of a icon -->
                    <table class='table is-fullwidth is-striped'>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Small</th>
                                <th>Medium</th>
                                <th>Large</th>
                            </tr>
                        </thead>
 
                        <tbody>
                            <tr>
                                <td><strong>Username</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-user
                                        fa-lg has-text-link "></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-user
                                        fa-2x has-text-link"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-user
                                        fa-3x has-text-link"></i>
                                    </span>
                                </td>
                            </tr>
 
                            <tr>
                                <td><strong>Password</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-lock
                                        fa-lg has-text-black "></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-lock
                                        fa-2x has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-lock
                                        fa-3x has-text-black"></i>
                                    </span>
                                </td>
                            </tr>
 
                            <tr>
                                <td><strong>Notification</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-bell
                                        fa-lg has-text-success"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-bell fa-2x
                                        has-text-success"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-bell
                                        fa-3x has-text-success"></i>
                                    </span>
                                </td>
                            </tr>
 
                            <tr>
                                <td><strong>Headphone</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-headphones
                                        fa-lg has-text-danger"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-headphones
                                        fa-2x has-text-danger"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-headphones
                                        fa-3x has-text-danger"></i>
                                    </span>
                                </td>
                            </tr>
 
                            <tr>
                                <td><strong>Home</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-home
                                        fa-lg has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-home
                                        fa-2x has-text-black"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-home
                                        fa-3x has-text-black"></i>
                                    </span>
                                </td>
                            </tr>
 
                            <tr>
                                <td><strong>Reply</strong></td>
                                <td>
                                    <span class="icon is-small">
                                        <i class="fas fa-reply
                                        fa-lg has-text-info"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-medium">
                                        <i class="fas fa-reply
                                        fa-2x has-text-info"></i>
                                    </span>
                                </td>
                                <td>
                                    <span class="icon is-large">
                                        <i class="fas fa-reply
                                        fa-3x has-text-info"></i>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Example 4: Rotated Icons
 

html




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
 
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
  
      strong{
        margin-right: 5px;
      }
  
    </style>
  </head>
 
  <body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
  
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-7'>
          <div>
            <h1 class='title has-text-centered'>
                Rotated Icons
            </h1>
          </div>
  
          <div class='box'>
            <!-- creating table to show
                different sizes of a icon -->
            <table class='table
                is-fullwidth is-striped'>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Normal</th>
                  <th>Left</th>
                  <th>Right</th>
                  <th>Opposite</th>
                </tr>
              </thead>
  
              <tbody>
                <tr>
                  <td><strong>Username</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user
                        fa-lg has-text-link"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user
                        fa-lg has-text-link "
                        data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user
                      fa-lg has-text-link"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-user
                      fa-lg has-text-link"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Password</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock
                      fa-lg has-text-black"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock
                      fa-lg has-text-black"
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock
                      fa-lg has-text-block"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-lock
                      fa-lg has-text-black"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Notification</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell
                      fa-lg has-text-success"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell fa-lg
                        has-text-success"
                        data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell fa-lg
                      has-text-success"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-bell
                      fa-lg has-text-success"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Headphone</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones
                      fa-lg has-text-danger"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones
                      fa-lg has-text-danger"
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones
                      fa-lg has-text-danger"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-headphones
                      fa-lg has-text-danger"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Home</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home
                      fa-lg has-text-black"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home
                      fa-lg has-text-black"
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home
                      fa-lg has-text-black"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-home
                      fa-lg has-text-black"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Reply</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply
                      fa-lg has-text-info"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply
                      fa-lg has-text-info"
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply
                      fa-lg has-text-info"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-reply
                      fa-lg has-text-info"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
  
                <tr>
                  <td><strong>Music</strong></td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music
                      fa-lg has-text-danger"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music
                      fa-lg has-text-danger"
                      data-fa-transform="rotate-270"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music
                      fa-lg has-text-danger"
                      data-fa-transform="rotate-90"></i>
                    </span>
                  </td>
                  <td>
                    <span class="icon">
                      <i class="fas fa-music f
                      a-lg has-text-danger"
                      data-fa-transform="rotate-180"></i>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output: 
 

Example 5: Stacked Icons
 

html




<!DOCTYPE html>
<html>
  <head>
    <title>Bulma Icon</title>
    <link rel='stylesheet' href=
 
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 25px;
      }
      h1{
        margin-top:10px;
        margin-bottom:20px;
        color:green !important
      }
        
      .fa-stack-1x{
        left:6px;
        top:2px;
        bottom:2px;
        right:1px;
      }
    </style>
  </head>
 
  <body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
  
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-5'>
          <div>
            <h1 class='title has-text-centered'>
                Statcked Icons
            </h1>
          </div>
  
          <div class='box'>
            <div>
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-camera
                        fa-stack-1x"></i>
                  <i class="fas fa-ban
                    fa-stack-2x has-text-danger"></i>
                </span>
              </span>
  
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle
                    fa-stack-2x has-text-success"></i>
                  <i class="fas fa-phone-alt
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
  
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle
                    fa-stack-2x has-text-danger"></i>
                  <i class="fas fa-phone-alt
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
  
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle
                    fa-stack-2x has-text-info"></i>
                  <i class="fas fa-play
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
  
              <span class="icon is-large">
                <span class="fa-stack fa-lg">
                  <i class="fas fa-circle
                    fa-stack-2x has-text-danger"></i>
                  <i class="fas fa-music
                    fa-stack-1x has-text-white"></i>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!