Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Bulma Icon Ionicons

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 20 Jan, 2022
Like Article
Save Article
Similar Reads
Related Tutorials