# Icons with text

**Icons with text** on a website enhance visual communication, readability, engagement, aesthetics, content organization, navigation efficiency, and cross-platform consistency, contributing to an improved user experience.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FSS3frzJl1HyzDREtteED%2Fimage.png?alt=media&#x26;token=b5566303-cd91-43d8-b674-289cd5309fa5" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Icon position</td><td><p>The position of the icon</p><ul><li>Top</li><li>Left</li><li>Bottom</li><li>Right</li></ul></td></tr><tr><td>Icon size</td><td><p>Customize the display size of the icon. </p><p>Minimum is 20, maximum is 100.</p></td></tr></tbody></table>

### Content setting

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text size</td><td><p>Size: Customize the font size of the content with 3 options</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Content alignment</td><td><p>3 options for the content alignment</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Column gap</td><td><p></p><p>4 options for column gap</p><ul><li>Small</li><li>No gap</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

## Block settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload icon image</td></tr><tr><td>Svg icon</td><td>Use SVG icons by copying the SVG code</td></tr><tr><td>Heading</td><td>Heading content</td></tr><tr><td>Description</td><td>Description content</td></tr><tr><td>Uppercase</td><td>When you enable uppercase, heading, description will also be displayed in all uppercase letters.</td></tr></tbody></table>