> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/moon-iomad-moodle-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/moon-iomad-moodle-theme/theme-settings/front-page-blocks/categories-and-icons-list/icons-list.md).

# Icons List

{% hint style="info" %}
You can use any HTML block area to use a preset. You can even add an HTML preset anywhere on the page. There are fully customizable and reusable.
{% endhint %}

{% tabs %}
{% tab title="Preview" %}

<figure><img src="/files/82AeuwDHBVc0toK5Mz1q" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="HTML Code" %}

```html
<div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 text-center text-md-left">

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card-body d-inline-flex align-items-center">

            <!-- icon -->
            <div class="rui-rounded-icon mr-3" style="color: #000; background: #feedba;">
                <svg width="32px" height="32px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
                    <path d="M2 5h7m7 0h-2.5M9 5h4.5M9 5V3m4.5 2c-.82 2.735-2.539 5.32-4.5 7.593M4 17.5c1.585-1.359 3.376-3.026 5-4.907m0 0C8 11.5 6.4 9.3 6 8.5m3 4.093l3 2.907M13.5 21l1.143-3m6.857 3l-1.143-3m-5.714 0l2.857-7.5 2.857 7.5m-5.714 0h5.714" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <!-- end icon -->

            <h3 class="rui-card-title--light mb-0">Translation Ready</h3>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card-body d-inline-flex align-items-center">

            <!-- icon -->
            <div class="rui-rounded-icon mr-3" style="color: #000; background: #feedba;">
                <svg width="32px" stroke-width="1.5" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
                    <path d="M9 21H8c-1.105 0-2-.894-2-1.999V14c0-1-1.5-2-1.5-2S6 11 6 10V5a2 2 0 012-2h1M15 21h1c1.105 0 2-.894 2-1.999V14c0-1 1.5-2 1.5-2S18 11 18 10V5a2 2 0 00-2-2h-1" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <!-- end icon -->

            <h3 class="rui-card-title--light mb-0">Fully Customizable Blocks</h3>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card-body d-inline-flex align-items-center">

            <!-- icon -->
            <div class="rui-rounded-icon mr-3" style="color: #000; background: #feedba;">
                <svg width="32px" height="32px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
                    <path d="M13.848 13.317L9.505 18.28a2 2 0 01-3.01 0l-4.343-4.963a2 2 0 010-2.634L6.495 5.72a2 2 0 013.01 0l4.343 4.963a2 2 0 010 2.634z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M13 19l4.884-5.698a2 2 0 000-2.604L13 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M17 19l4.884-5.698a2 2 0 000-2.604L17 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <!-- end icon -->

            <h3 class="rui-card-title--light mb-0">Lifetime updates</h3>
        </div>
    </div>
    <!-- End item -->

    <!-- Start item -->
    <div class="rui-card-item col mb-4">
        <div class="rui-card-body d-inline-flex align-items-center">

            <!-- icon -->
            <div class="rui-rounded-icon mr-3" style="color: #000; background: #feedba;">
                <svg width="32px" height="32px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
                    <path d="M8 12l3 3 5-5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.955 9.955 0 0012 22z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <!-- end icon -->

            <h3 class="rui-card-title--light mb-0">Super friendly support</h3>
        </div>
    </div>
    <!-- End item -->
</div>
```

{% endtab %}
{% endtabs %}