> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/visual-element-properties-mobile.md).

# Mobile visual elements

{% hint style="info" icon="desktop" %}
This article describes visual elements available in **mobile apps** ↓

[Click here for web visual elements.](/core-resources/bubble-elements/element-properties/web-element-properties/visual-element-properties.md)
{% endhint %}

{% tabs %}
{% tab title="Experience level" %}
This core reference entry is suited for <mark style="color:green;">**beginner-level builders**</mark>**.**

[Learn more about experience levels.](#user-content-fn-1)[^1]
{% endtab %}

{% tab title="In-depth articles (11)" %}
To learn about this topic more in-depth, we recommend reading the suggested articles below:

#### Visual elements

* Article: [Visual elements](/help-guides/design/elements/web-app/visual-elements.md)

***

**Other element categories**\
In this article series, we cover how to work with different element types:

* Article series:[ Elements](/help-guides/design/elements.md)
  * Article series: [The element hierarchy](/help-guides/design/elements/the-element-hierarchy.md)
  * Article: [The page](/help-guides/design/elements/web-app/the-page.md)
  * Article series: [Container elements](/help-guides/design/elements/web-app/containers.md) (elements that contain other elements)
  * Article series: [Input forms](/help-guides/design/elements/web-app/input-forms.md) (elements that accept input, such as text and file uploads)
* Article: [Conditional expressions](/help-guides/logic/conditions.md)\
  Making your elements change appearance in response to varying conditions.

***

**The design tab**\
In this article we cover the different tools available in the design tab.

* Article: ´[The design tab](/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab.md)

***

#### Design

Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.

* Article series: [Design](/help-guides/design.md)
  * Article: [Responsive design](/help-guides/design/responsive-design.md)

    Building pages that work on all devices, such as a laptop and a phone.

***

**Previewing your app**

In this section about how to [preview your app](#user-content-fn-2)[^2] in the development environment.

* Article: [Previewing your app](/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)
  {% endtab %}

{% tab title="Videos (3)" %}
Bubble Academy: [How to Use the Text Element](https://www.youtube.com/watch?v=mtS7bLsV-tg)\
Bubble Academy: [Element videos](https://www.youtube.com/@BubbleIO/search?query=element) (list of videos related to elements)

#### Connecting elements to workflows

Bubble Academy: [How to Use *an Element Is Clicked* Event](https://www.youtube.com/watch?v=CObRfZiAitY)
{% endtab %}
{% endtabs %}

Visual elements are elements that display content without accepting user input; things like text, images, icons, and shapes.

<table><thead><tr><th width="123.8359375">Element</th><th>Description</th><th>Link</th></tr></thead><tbody><tr><td>Text</td><td>Displays text.</td><td><a data-mention href="/pages/TygnjEUgwbgASJ4mD35F">/pages/TygnjEUgwbgASJ4mD35F</a></td></tr><tr><td>Button</td><td>Displays a button that can be connected to a <a href="/pages/ChWynuEmjA8m4UhEiK5W">workflow</a> when clicked.</td><td><a data-mention href="/pages/iJgvHoFu1Dg3IvxKO9n6">/pages/iJgvHoFu1Dg3IvxKO9n6</a></td></tr><tr><td>Icon</td><td>Displays a vector-based icon from a predefined icon set.</td><td><a data-mention href="/pages/sxe485tIPRmezA67Cs6E">/pages/sxe485tIPRmezA67Cs6E</a></td></tr><tr><td>Image</td><td>Displays an image.</td><td><a data-mention href="/pages/UsQ4TqOUGrFQowPvPUtT">/pages/UsQ4TqOUGrFQowPvPUtT</a></td></tr><tr><td>Shape</td><td>Renders a basic geometric shape.</td><td><a data-mention href="/pages/tRJbRLOEyQNOzRoQ53tn">/pages/tRJbRLOEyQNOzRoQ53tn</a></td></tr><tr><td>Map</td><td>Displays a Google Map that users can interact with.</td><td><a data-mention href="/pages/xktB1axBf9aH6RoI9AGq">/pages/xktB1axBf9aH6RoI9AGq</a></td></tr><tr><td>Web view</td><td>Displays an inline web page from your app.</td><td><a data-mention href="/pages/Sa1zfuZlznpKjmE8NJfX">/pages/Sa1zfuZlznpKjmE8NJfX</a></td></tr><tr><td>Sign in with Apple button</td><td>Displays a button that allows users to sign in with Apple.</td><td><a data-mention href="/pages/3yhag57PB3WyN7T7bB8s">/pages/3yhag57PB3WyN7T7bB8s</a></td></tr></tbody></table>

[^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced.

    To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial.

[^2]: Every chance that you make in your app can be instantly previewed so that you can see how your app looks to your users.

    User manual article: [Previewing your app](/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app.md)