---
title: "Features Icon"
description: "Icon list for features."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-features-icon"
---

{# Case 4 elements (one row of 4) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Software as a Service',
            content: 'We are a cloud software, you need Internet access to <a href=\'https://www.example.com/\' target=\'_blank\'>use it.</a>'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: '<a href=\'https://www.example.com/\' target=\'_blank\'>Price</a> per company',
            content: 'The Plus Service price is per company. If you have 3 companies, you will need to pay for 3 Plus Services.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'SII Synchronization',
            content: 'Your tax documents are immediately sent to SII and we monitor their status.'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content of feature 4.'
        }
    ]"
/>

{# Case 5 elements (row of 3 + row of 2) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Feature 1',
            content: 'Content 1'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: 'Feature 2',
            content: 'Content 2'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Feature 3',
            content: 'Content 3'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content 4'
        },
        {
            icon: 'fa-solid fa-star',
            title: 'Feature 5',
            content: 'Content 5'
        }
    ]"
/>

{# Case 8 elements (two rows of 4) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Feature 1',
            content: 'Content 1'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: 'Feature 2',
            content: 'Content 2'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Feature 3',
            content: 'Content 3'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content 4'
        },
        {
            icon: 'fa-solid fa-star',
            title: 'Feature 5',
            content: 'Content 5'
        },
        {
            icon: 'fa-solid fa-heart',
            title: 'Feature 6',
            content: 'Content 6'
        },
        {
            icon: 'fa-solid fa-bell',
            title: 'Feature 7',
            content: 'Content 7'
        },
        {
            icon: 'fa-solid fa-user',
            title: 'Feature 8',
            content: 'Content 8'
        }
    ]"
/>



---
Last updated on 09/09/2026