Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bulma Icon Ionicons

  • Last Updated : 20 Jan, 2022

Bulma is a free and open-source CSS library used to design fast and responsive websites and web applications. Bulma is compatible with all the icon-font libraries out there like Material Design Icons, Font Awesome 5, Font Awesome 4, Ionicons, etc. In this article, we will be seeing how to use Ionicons icon-font library with Bulma.

To use Ionicons, we use the ion-icon element provided by ionicons and set the name attribute to the name of the icon we want to use.


<span class="icon">
   <ion-icon name="arrow-redo-circle-outline"></ion-icon>

Example: The example below shows how to use ionicons with Bulma.


<!DOCTYPE html>
    <title>Bulma Ionicons</title>
    <link rel='stylesheet' href=
    <script type="module" src=
    <script nomodule src=
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b>Bulma Ionicons</b>
    <div class="container">
        <span class="icon has-text-danger">
            <ion-icon name="arrow-redo-circle-outline"></ion-icon>
        <span class="icon has-text-success">
            <ion-icon name="accessibility-outline"></ion-icon>


Bulma Ionicons


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!