Icon

Basics
Colors
Sizes
Container class Container size Font Awesome 5 class Icon size Result
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
fas fa-3x 3em
Font Awesome variations
Type Font Awesome class Result
Fixed width fas fa-fw
Bordered fas fa-border
Animated fas fa-spinner fa-pulse
Rotated & flipped fas fa-shield-alt
fas fa-shield-alt data-fa-transform="rotate-90"
fas fa-shield-alt data-fa-transform="rotate-180"
fas fa-shield-alt data-fa-transform="rotate-270"
fas fa-shield-alt data-fa-transform="flip-h"
fas fa-shield-alt data-fa-transform="flip-v"




Stacked 
<span class="icon is-medium">
              <span class="fa-stack">
                <i class="fas fa-circle fa-stack-2x"></i>
                <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
              </span>
            </span>
 
<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>
Material Design Icons
Container class Container size MDI class Icon size Result
icon is-small 1rem x 1rem mdi 1em
icon 1.5rem x 1.5rem mdi mdi-18px 18px
mdi mdi-24px 24px
icon is-medium 2rem x 2rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
icon is-large 3rem x 3rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px
Ionicons
Container class Container size Ionicon class Icon size Result
icon is-small 1rem x 1rem ion-ionic 1em
icon 1.5rem x 1.5rem ion-ionic 1em
icon is-medium 2rem x 2rem ion-ionic 1em
icon is-large 3rem x 3rem ion-ionic 1em