# Text, Icons & Images

You can use text, icons, and images to add visual design, branding, and instructional information to your interface. These are static elements, meaning they are typically non-interactive, though you can turn icons into navigation links.

## Text box

Use text boxes for titles, labels, and detailed instructions.

* **Add**: Click the text box icon in the UI Builder toolbar and click on the canvas to place it.&#x20;
* **Edit**: Double-click the box to open the text editor. You can type, format your text, and insert static tables.

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FAWaUs3qIk4kSE0Ri6u7u%2Fimage.png?alt=media&#x26;token=0670b2cc-f114-4db1-bec8-a5f4abcee836" alt=""><figcaption></figcaption></figure>

## Icon

Use icons as visual cues or navigation shortcuts.

* **Add**: Click the icons icon in the UI Builder toolbar, pick an icon from the library, and click the canvas to place it.
* **Style**: Double-click the icon to open its settings. You can switch styles (solid, regular, light, thin, duotone), change the color, and apply a background.
* **Navigation**: You can turn an icon into a button. Just drag a page from the Pages panel and drop it directly onto the icon.

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FYoOyHQ02Cln2VmPQPg95%2Fimage.png?alt=media&#x26;token=f9e7c36f-dcc4-4fff-9a71-0a0a43b1bdd0" alt=""><figcaption></figcaption></figure>

## Images

Use images for machine photos, company logos, or other visual elements.

* **Upload**: First, upload your image file to the [internal file server](https://docs.heisenware.com/app-builder/build-backend/internal-file-server) (the resources panel on the left).
* **Place**: Drag the file from the resources panel and drop it onto the UI canvas.

{% hint style="success" %}
**Dynamic use**: Beyond the UI, uploaded images can also be used as inputs for your backend logic.
{% endhint %}
