# Icon Component

## Overview

The icon component is used to display an icon and can be made clickable using blocks. 

## Properties

You can customize your icon component using the following properties: 

### Icon

| Property     | Value     | Description                               |
| ------------ | --------- | ----------------------------------------- |
| Icon type    | Icon name | The icon displayed in the icon component. |
| Stroke Color | Color     | Color of outline                          |
| Fill Color   | Color     | Color inside the icon                     |
| Stroke Width | Number    | Width of outline                          |

### Layout

| Property    | Value            | Desciption                                                                                                             |
| ----------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------- |
| X           | coordinate value | Position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.                 |
| Y           | coordinate value | Position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.                       |
| Height      | number in pixels | The icon's height is defined by a custom number of pixels.                                                             |
| Width       | number in pixels | The icon's width is defined by a custom number of pixels.                                                              |
| Resize Mode | Stretch          | Stretches the icon to fit the dimensions of the device's screen.                                                       |
| Resize Mode | Float in Place   | <p>Renders the icon in the same aspect ratio as the design, regardless of the device size.</p><h4 id="style"><br></h4> |

### Style

| Property        | Value                    | Description                                                                                               |
| --------------- | ------------------------ | --------------------------------------------------------------------------------------------------------- |
| Visible         | visible                  | Users can see the icon.                                                                                   |
| Visible         | invisible                | Users cannot see the icon.                                                                                |
| Border: Color   | color                    | The icon's border is the color selected.                                                                  |
| Border: Width   | number in pixels         | The width of the icon's border is defined by a custom number of pixels.                                   |
| Border: Radius  | number in pixels         | The radius of the icon border’s corners is defined by a custom number of pixels.                          |
| Shadow: Color   | color                    | The icon's shadow is the color selected.                                                                  |
| Shadow: Opacity | number between 0 and 100 | The opacity of the icon's shadow.                                                                         |
| Shadow: Radius  | number in pixels         | The radius of the icon shadow’s corners is defined by a custom number of pixels.                          |
| Shadow: Offset  | number in pixels         | How far the icon's shadow should be offset, in height and width, is defined by a custom number of pixels. |

## Icon Blocks

To access the blocks specific to the icon component:

1. On the Design tab, add an Icon component to a screen.
2. Navigate to the **Blocks** tab.
3. In the component tree on the left, click the name of the icon component.
4. A drawer of icon-specific blocks opens.

| Block Image                                                                                                                                                                                                                                                                                         | Description                                                                                                      |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| <img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F2CiYYq6DC2rfXIg6CyA4%2Fimage.png?alt=media&#x26;token=56365253-5e28-4f5c-8d6c-f632ddbb3775" alt="" data-size="original">                                 | This event will fire when the user clicks on the icon.                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FiWbQ1f1It772DG7oJowv%2Fimage.png?alt=media&#x26;token=95a1c6bf-cfa0-408b-a15c-a59bf9abcdfd" alt=""><figcaption></figcaption></figure></div> | Set the icon component's icon type.                                                                              |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9Xr2oRRhiWQ3556O8vZB%2Fimage.png?alt=media&#x26;token=19a7f2ad-abf4-4f9d-9206-deefd0fd0a9a" alt=""><figcaption></figcaption></figure></div> | Get the icon component's icon type.                                                                              |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F6WOR7qXebsCfTB1Oj2HK%2Fimage.png?alt=media&#x26;token=9225da96-ca63-4859-bfb0-0d4ffa0ae583" alt=""><figcaption></figcaption></figure></div> | Set the icon component's stroke color.                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FvWV1lJDaB8175jJGqXId%2Fimage.png?alt=media&#x26;token=f9fca2d2-0d90-4258-ab69-e084b781df7b" alt=""><figcaption></figcaption></figure></div> | Get the icon component's stroke color.                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FIZn2OuLHBMJkttjyUPTz%2Fimage.png?alt=media&#x26;token=7b276eee-0c6e-42c3-8856-e492d89d08a0" alt=""><figcaption></figcaption></figure></div> | Set the icon component's stroke width.                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FUw6YwG5Kxi4R8aCfdorf%2Fimage.png?alt=media&#x26;token=e7bb59a5-7a74-4d9e-90c9-9ebf0b789c2c" alt=""><figcaption></figcaption></figure></div> | Get the icon component's stroke width.                                                                           |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FPrEJpN2V2iIlM1ckQH9Z%2Fimage.png?alt=media&#x26;token=00aa6342-d176-4ff1-90dc-80fbec474030" alt=""><figcaption></figcaption></figure></div> | Set the icon component's fill color.                                                                             |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fb50acGFdKR6r0qaJYFNZ%2Fimage.png?alt=media&#x26;token=7396e63b-1142-4efc-a618-3456cda54dab" alt=""><figcaption></figcaption></figure></div> | Get the icon component's fill color.                                                                             |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FUwiplmXUFCQRugQJKf9V%2Fimage.png?alt=media&#x26;token=bb3955df-0b04-4c33-836e-ddb35d609ccd" alt=""><figcaption></figcaption></figure></div> | Set the icon component's height.                                                                                 |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Ftdu8MEhVQsZk9XCZoR66%2Fimage.png?alt=media&#x26;token=840fe9d8-7ff3-497c-a136-b1450b1c5e5a" alt=""><figcaption></figcaption></figure></div> | Get the icon component's height.                                                                                 |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fl5tvP1Izgkqc9xk7XrNg%2Fimage.png?alt=media&#x26;token=4265e476-7511-4d9d-a08e-5e653bb53d60" alt=""><figcaption></figcaption></figure></div> | Returns the height of the icon component in pixels after it has been rendered on-screen.                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjMfrtodvSMH5xex575Ll%2Fimage.png?alt=media&#x26;token=6830510c-cc64-4e56-a0c5-a0f5eb9c986e" alt=""><figcaption></figcaption></figure></div> | Set the icon component's width.                                                                                  |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGl1QfspVtq5D6CgQjJ2Q%2Fimage.png?alt=media&#x26;token=e0ec00dc-4a38-4068-bf10-bdfd270915ed" alt=""><figcaption></figcaption></figure></div> | Get the icon component's width.                                                                                  |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgyyMoGm2boUCoQ5vm9Yx%2Fimage.png?alt=media&#x26;token=ea82b253-d81d-49d4-a070-678452d2a257" alt=""><figcaption></figcaption></figure></div> | Returns the width of the icon component in pixels after it has been rendered on-screen.                          |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FZCDPwsH078ShirlDM2aU%2Fimage.png?alt=media&#x26;token=59bf5443-a259-45d1-8ab7-2831cc0362eb" alt=""><figcaption></figcaption></figure></div> | Set whether the icon component is visible on the screen.                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FlyBNZuV6HWfGnbzM8pFj%2Fimage.png?alt=media&#x26;token=66b3078c-316b-4b8e-825c-46026122aa6f" alt=""><figcaption></figcaption></figure></div> | Get whether the icon component is visible on the screen.                                                         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FcYxhXT12ifXblZU1ui19%2Fimage.png?alt=media&#x26;token=b46694b7-4ff1-4b6f-b669-b6ed823908ed" alt=""><figcaption></figcaption></figure></div> | Set the position icon the upper left corner of the icon on the X-axis, where the left side of the screen is X=0. |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FuRwf8tQGT22u4fC2d4fm%2Fimage.png?alt=media&#x26;token=8fca194d-b9fd-4409-a077-3d1284e4594b" alt=""><figcaption></figcaption></figure></div> | Get the position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.   |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDqW8NPx7YlMgEniuOhkp%2Fimage.png?alt=media&#x26;token=64689dec-15ad-414e-86ff-b17c088c771a" alt=""><figcaption></figcaption></figure></div> | Set the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.         |
| <div><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FLPBlmU3ecEBqjId0PWXp%2Fimage.png?alt=media&#x26;token=2d2399b6-e4b5-4c9e-9fed-4d11d2b20051" alt=""><figcaption></figcaption></figure></div> | Get the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.         |