# Icon (Alpha)

{% hint style="danger" %}
This feature is currently in its **Alpha** stage of development.

* As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.
* In this phase, the feature may contain bugs or behave unpredictably.
* Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.
* We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.
  {% endhint %}

The icon component can be integrated into custom components to enhance their visual appeal and functionality, such as adding an icon within a [Button (Alpha)](https://docs.jigx.com/examples/readme/custom-components-_alpha_/button-_alpha_) , displaying it in a [Card (Alpha)](https://docs.jigx.com/examples/readme/custom-components-_alpha_/card-_alpha_) , or embedding it in a [View (Alpha)](https://docs.jigx.com/examples/readme/custom-components-_alpha_/view-_alpha_) . By customizing an icon, you can adjust its size, color, and shape, and even apply animations or conditional styling, ensuring seamless alignment with your application's design system and user experience.

For steps on creating a custom component, see [How to create a custom component](https://docs.jigx.com/examples/readme/custom-components-_alpha_).

## Configuration options

You can use `when` and `instanceId` with `component.icon`, add the properties before the `options:` property. The available list of options is shown below. For the full list of properties, see [jc-icon](https://docs.jigx.com/understanding-the-basics/jigx-icons).

<table><thead><tr><th width="129.93359375">Options</th><th>value</th></tr></thead><tbody><tr><td><code>color</code></td><td>Multiple, use IntelliSense to view the available list.</td></tr><tr><td><code>emphasis</code></td><td>Changing the color, for example, brighter, bolder, or a contrasting hue. <code>extra-low</code> <code>high</code> <code>low</code> <code>low-medium</code> <code>medium</code></td></tr><tr><td><code>onPress</code></td><td>Multiple, use IntelliSense to view the list of available to call. The action is called when the icon is pressed.</td></tr><tr><td><code>shape</code></td><td>Determine the shape around the icon. <code>circle</code> <code>rounded</code> (default) <code>square</code></td></tr><tr><td><code>size</code></td><td>Enter a number value or use an expression to determine the size of the icon.</td></tr><tr><td><code>type</code></td><td>Configure the icon's display as a standalone icon, within a shape, or in a duotone style. The following options are available: <code>basic</code> (default) <code>duotone</code> <code>contained</code></td></tr></tbody></table>

## Examples and code snippets

The examples use a set of custom components called *sections*. The sections are for titles, spacing, and context. The *sections* code is available on [GitHub](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples/components/molecules-organisms/sections).

### Icon sizes

{% columns %}
{% column %}
This example shows the `component.icon` with different icon sizes using the `size:` property in a [Card (Alpha)](https://docs.jigx.com/examples/readme/custom-components-_alpha_/card-_alpha_).

**Examples:**

1. See the *section* component example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/components/molecules-organisms/sections/section4.jigx).
2. See the *custom component* example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/components/basic-elements/icons/icon-sizes.jigx).
3. See the *jig* example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx-samples/jigs/custom-components/basic-elements/icons/icons-sizes.jigx).
   {% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FsoULaUCYKRdVAwDew8gx%2FCC-iconSizeL.png?alt=media&#x26;token=d30918ad-8b1d-40c5-8c79-3271fe8ce59b" alt="Icon sizes" width="188"><figcaption><p>Icon sizes</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="icon-sizes.jigx" %}

```yaml
# components/icon-sizes.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        - type: component.text
          options:
            value: Extra large
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: extra-large

        - type: component.text
          options:
            value: Large
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: large

        - type: component.text
          options:
            value: Medium
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon
            size: medium

        - type: component.text
          options:
            value: Regular
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: regular

        - type: component.text
          options:
            value: Small
            emphasis: medium
            align: center
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon by typing the first two letters to invoke the list.
            icon: animation
            # Configure the size of the icon.
            size: small
```

{% endtab %}

{% tab title="icons-sizes.jigx" %}

```yaml
# jigs/icons-sizes.jigx
title: Icons Sizes
type: jig.default
icon: pen-draw-1

children:
  # Reference the custom component to display in the jig.
  # This custom component contains the view configuration to show the title.
  - type: component.custom-component
    componentId: section4
    inputs:
      title: "Icon sizes"
  # Reference the custom component to display the icon sizes in the jig.
  - type: component.custom-component
    componentId: icon-sizes
```

{% endtab %}
{% endtabs %}

### Icon shapes & types

{% columns %}
{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2F60mVJ093Xhyqzz7xoLJJ%2FCC-iconRBasicL.png?alt=media&#x26;token=0beb1112-84d8-4d68-a0c1-7b15c4320583" alt="Icons shapes"><figcaption><p>Icons shapes</p></figcaption></figure>
{% endcolumn %}

{% column %}
These examples demonstrate the various options for using icons with rounded, square and circled shapes in a [Card (Alpha)](https://docs.jigx.com/examples/readme/custom-components-_alpha_/card-_alpha_). By combining the `shape`, `type`, and `size` properties, you can achieve the desired appearance.

**Examples:**

1. See the *custom components* example in [GitHub](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples/components/basic-elements/icons) for icons-1.0.jigx to icons-3.5.jigx.
2. See the *jig* example in [GitHub](https://github.com/jigx-com/jigx-samples/tree/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx-samples/jigs/custom-components/basic-elements/icons).
3. See the *section* component example in [GitHub](https://github.com/jigx-com/jigx-samples/tree/main/quickstart/jigx-samples/components/molecules-organisms/sections).
   {% endcolumn %}
   {% endcolumns %}

{% tabs %}
{% tab title="icon-1.0.jigx" %}

```yaml
# components/icon-1.0.jigx
# See the YAML for icon-1.1.jigx to icon-1.5.jigx in GitHub, link provided
# above.
type: component.default
children:
  - type: component.card
    options:
      direction: row
      children:
        - type: component.icon
          options:
            icon: animation
            size: extra-large
            # Change the shape to circle or square to see the icon appearance 
            # change.
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: large
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: medium
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: regular
            shape: rounded
            type: basic

        - type: component.icon
          options:
            icon: animation
            size: small
            shape: rounded
            type: basic
```

{% endtab %}

{% tab title="icons-rounded.jigx" %}

```yaml
# jigs/icons-rounded.jigx
# See the YAML for sections in GitHub, link provided above.
title: Icons (Rounded)
type: jig.default
icon: pen-draw-1

children:
  - type: component.custom-component
    componentId: section4
    inputs:
      title: "1. Rounded"
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.0 - Basic"
  - type: component.custom-component
    componentId: icons-1.0
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.1 - Contained"
  - type: component.custom-component
    componentId: icons-1.1
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.2 - Duotone"
  - type: component.custom-component
    componentId: icons-1.2
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.3 - Card with color"
  - type: component.custom-component
    componentId: icons-1.3
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.4 - Icons with color"
  - type: component.custom-component
    componentId: icons-1.4
  - type: component.custom-component
    componentId: section2
    inputs:
      title: "1.5 - Card with color + Icons with color"
  - type: component.custom-component
    componentId: icons-1.5
```

{% endtab %}
{% endtabs %}

### Icon bar

{% columns %}
{% column %}
Create an icon bar within in a `component.card` by configuring multiple `component.icon`. Add an `onPress` event to each icon that opens its associated URL. You can configure the `onPress` event to call various available [actions](https://github.com/jigx-com/jigx-docs-examples/blob/main/docs/Custom%20components%20_Alpha_/broken-reference/README.md).

**Example:**

1. See the *custom component* example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/components/basic-elements/icons/icons.jigx).
2. See the *jig* example in [GitHub](https://github.com/jigx-com/jigx-samples/blob/d5eb38a64423482ed10703b0b2889709beee309c/quickstart/jigx-samples/jigs/custom-components/basic-elements/icons/icons-bar.jigx).
   {% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FUGwcU6In4nUPz9arq3Nz%2FCC-iconBar.png?alt=media&#x26;token=64efed6d-04fa-46f3-aac9-173f97272e30" alt="Icon bar" width="188"><figcaption><p>Icon bar</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="icons.jigx" %}

```yaml
# components/icons.jigx
type: component.default
children:
  # Configure a card to contain the icons in a row.
  - type: component.card
    options:
      direction: row
      children:
        # Add the icon component.
        - type: component.icon
          options:
            # Choose an icon.
            icon: shopping-cart-empty-1
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.amazon.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: mindfullness
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.calm.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: weather
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.accuweather.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: single-neutral
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.linkedin.com

        - type: component.icon
          options:
            # Choose an icon.
            icon: location
            size: large
            # Configure the onPress event to call an action,
            # in this example when the icon is pressed a URL will open.
            onPress:
              type: action.open-url
              options:
                url: https://www.google.com/maps/
```

{% endtab %}

{% tab title="icons-bar.jigx" %}

```yaml
# jigs/icons-bar.jigx
title: Icons Bar
type: jig.default
icon: picture-polaroid-human

children:
  - type: component.custom-component
    componentId: icons
```

{% endtab %}
{% endtabs %}