Bulma Icons

Bulma Icons

Bulma CSS is compatible with all the font icon libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionic Icons, etc.

The icon color can be changed by color modifier class and icon size can be changed by following modifier class: .is-small, .is-medium, .is-large.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bulma CSS Icon With Text

To combine icon with text, just wrap the icon inside the container having modifier class .icon-text

Example

User

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

User

Bulma CSS Icon Color

To change the color of the icon, use the color helpers modifier class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bulma CSS Icon: Sizes

The Bulma icon container is available in 4 sizes. I t size can be controlled by following modifier classes: .icon .is-small, .icon, .icon .is-medium, .icon .is-large

General Syntax

Try it now

Source Code

Try it now

Source Code : Output