Home

Guides

Editor

Components

Actions

Conditions

Components

Basic

Container

Text

Image

Icon

Button

Forms

Local State

Text Input

Date Picker

Logic

Conditional Logic

Conditional Switch Logic

Modal

Sheet

Pager

Tabbed Pager

Data

Data Loader

Repeating Item

Countdown Timer

Data Transformer

Date Elements

Paging Data Loader

Contentful

Rich Text

Icon Component Documentation

Overview

The Icon Componentallows you to add visual elements that enhance the user interface. Icons help convey meaning or actions quickly and improve the overall design of your app. They can be used standalone or alongside text and buttons to provide context and visual appeal.


Key Features

  • Extensive Icon Library

  • Style Options

Component Fields

1. Code

Click the field and choose an icon from the Library. You can use the search bar to find a specific icon.

2. Size

Set the icon's size in pixels.

3. Color

Click the field to select from the available icon color options. These are pre-set in Colorsand can be edited in this section to match your app's theme.


Best Practices for Using the Icon Component

  • Use Relevant Icons: Select icons that clearly represent the intended function or concept to improve usability.

  • Keep Icons Simple: Avoid using overly complex or detailed icons as they can be hard to understand at smaller sizes.

  • Maintain Consistency: Ensure that the style, size and color of icons are consistent throughout the app to create a cohesive design.