# Jigx icons

Incorporating icons into your mobile app design enhances user navigation and interaction, making the app more user-friendly and visually appealing. At Jigx we provide you with an extensive list of icons.

### Where can you use icons?

While creating your solution, you can configure certain UI components, jigs, and widgets to use icons in the YAML. Additionally, you can determine the icon's position, size, and interaction. Use IntelliSense (ctrl+space) in the YAML in Jigx Builder to determine if you can specify an icon. Choose an icon from the list and configure the provided properties if you can. Examples of properties that use icons are `leftElement`, `rightElement`, and `leftIcon`. Here is an example showing you how to specify an icon in a `leftElement` and how to use an [expression](https://docs.jigx.com/building-apps-with-jigx/logic/expressions) to determine which icon to display depending on the current list item.

{% columns %}
{% column width="41.66666666666667%" %}

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FXh3sZvgri50RgJFHWlEQ%2Ficons.PNG?alt=media&#x26;token=5f199b01-a245-4d89-948e-c9f31f2b3ddc" alt="List icons in a list" width="188"><figcaption><p>List icons in a list</p></figcaption></figure>
{% endcolumn %}

{% column width="58.33333333333333%" %}
{% code title="YAML" %}

```yaml
type: component.list-item
  options:
    title: =@ctx.current.item.service
    subtitle: =@ctx.current.item.time & 'minutes for task completion'
    leftElement:
      element: icon
      icon: =(@ctx.current.item.materials) = true ? 'home' :'car-garage'
```

{% endcode %}

{% endcolumn %}
{% endcolumns %}

### How do you add an icon?

Icons can be used either in the YAML key position to select an icon, for example `icon: house`, or as the YAML value to determine that a property must use an icon, for example, in a `LeftElement: icon` property. IntelliSense propmts you and shows where the icon can be used in the YAML.

**Examples**

{% columns %}
{% column %}
Using the `icon` as a key in YAML to display an alarm bell icon on the Home Hub widget.

{% code title="YAML (icon key)" %}

```yaml
title: Home Security
type: jig.default
icon: alarm-bell
```

{% endcode %}
{% endcolumn %}

{% column %}
Using the icon as a value and then as the key in YAML to display the dollar icon in a `component.summary` .

{% code title="YAML (icon value)" %}

```yaml
summary:
  children:
    type: component.summary
    options:
      layout: default
      title: Add to cart
      leftIcon:
        element: icon
        icon: currency-dollar-circle
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

1. Next to `icon:` start typing the first two letters of an icon name, for example al, this will open the list of icons starting with two letters.
2. A preview of the icon is shown in the right popup with a link to the icon in [streamline](https://www.streamlinehq.com/icons/streamline-bold).
3. Use the up and down arrows on your keyboard to browse through the list with the preview showing.
4. Once you have decided on an icon click Enter.

### Where can you see a preview of the icon?

The list of available icons is extensive and is based off the icons in [https://www.streamlinehq.com/icons/streamline-bold ](https://www.streamlinehq.com/icons/streamline-bold). You welcome to browse this link. In Jigx Builder a preview of each icon is available in the right popup with a link to the icon in [streamline](https://www.streamlinehq.com/icons/streamline-bold). All you need to do is start typing the first two letters of an icon you want.

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FXQFp0d8yuG053RQ2Uu20%2FJB-icons.png?alt=media&#x26;token=6b81ed4c-24e1-4c2a-954b-962fdceb9848" alt="Preview of icons"><figcaption><p>Preview of icons</p></figcaption></figure>

### Icon assets in solutions

All icons used throughout a solution are automatically added to the **icon.jigx** file under the **assets** folder. This improves performance of the app and ensures that all icons are available when the mobile device is offline and the app is in use.

The following applies to the asset list:

* Each icon change detection automatically causes an update in the list in the icon.jigx file.
* All icons from all jig files are added to the list, expect icons referenced or listed within datasources e.g., `=@ctx.datasources.ds.icon`. You can manually add these icons to the asset list in the icon.jigx file.
* Icons are added to the icon asset list automatically or you can manually add icons to the list.
  * Automatically generated icons are indicated by a comment `# auto-generated` after the icon name in the list.
  * Manually added icons do not have the comment added

<figure><img src="https://1245694154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F974dgqxfbgR9q4tCkGgb%2Fuploads%2FuGuN69avDpAtZtAs4BQA%2FJB-assets.png?alt=media&#x26;token=56d006d1-77c4-4c65-a37c-a4761ff3dd5c" alt="Icon asset list"><figcaption><p>Icon asset list</p></figcaption></figure>

### Icons in actions

Adding an `icon` property in an action only applies to `swipeable`, `secondary`, and `header` actions. Primary actions do not support icon setups.

### Can I add custom icons?

The list of icons is not customizable, and you cannot add custom icons. If you are unable to find the icon you need, contact [**support@jigx.com**](mailto:support@jigx.com).