# Icon - Textbox

The Icon Textbox element allows you to visually combine text content with icons. This element is excellent for clearly and memorably presenting important information, services, benefits, or features.

By using icons, the text is made more engaging, and the message is conveyed more effectively.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FoF9eorN6NCospAwHz7wn%2FBildschirmfoto%202024-10-07%20um%2020.19.23.png?alt=media&#x26;token=93aa976f-5920-4bfc-a670-9e92564c88cc" alt=""><figcaption></figcaption></figure>

### Icon Box Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FfqzE7sc6bD3qmRwGn3ni%2FBildschirmfoto%202024-10-07%20um%2020.20.40.png?alt=media&#x26;token=327de393-6fa6-4fe9-999d-88025f22c814" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="245">Function</th><th>Description</th></tr></thead><tbody><tr><td>Select Icon (1)</td><td><a data-mention href="../konfigurationsbausteine/icon">icon</a></td></tr><tr><td>Title (2)</td><td>Here you set the title of the box</td></tr><tr><td>Subtitle (3)</td><td>Here you set the subtitle</td></tr><tr><td>Box Navigator (4)</td><td>Here you can <strong>duplicate</strong> the box, <strong>change the order</strong>, and <strong>delete</strong>.</td></tr><tr><td>Add Icon Box (5)</td><td>Here you can add more boxes</td></tr></tbody></table>

### Layout Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fg7BXzxyBRrov92TuLn8M%2FBildschirmfoto%202024-10-07%20um%2020.21.45.png?alt=media&#x26;token=d0155d3a-f009-46d3-a02d-a451bc8a257a" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="249">Function</th><th>Description</th></tr></thead><tbody><tr><td>Display (1)</td><td>Boxes as <strong>tiles</strong>, <strong>slider</strong>, or <strong>list</strong></td></tr><tr><td>Alignment (2)</td><td>Depending on the alignment, the position of the icon changes</td></tr><tr><td>Color Settings (3)</td><td>Here you can set the respective colors</td></tr></tbody></table>

### Responsive Settings

{% content-ref url="../konfigurationsbausteine/elemente-pro-reihe" %}
[elemente-pro-reihe](https://docs.rh-webdesign.com/cms-bundle/en/elemente/konfigurationsbausteine/elemente-pro-reihe)
{% endcontent-ref %}