Bulma | Icon

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Example 3: This example creating icons with different sizes.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 
                        differnt 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>

chevron_right


Example 4: Rotated Icons

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 
                differnt 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>

chevron_right


Output:

Example 5: Stacked Icons

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.