# 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="/files/XHZ5HLuz2ZYzinlbv63v" alt="" data-size="original">                                 | This event will fire when the user clicks on the icon.                                                           |
| <div><figure><img src="/files/GlbQhacriJDQTpqhHKwV" alt=""><figcaption></figcaption></figure></div> | Set the icon component's icon type.                                                                              |
| <div><figure><img src="/files/doMNa67OtTCj1lkSK7GM" alt=""><figcaption></figcaption></figure></div> | Get the icon component's icon type.                                                                              |
| <div><figure><img src="/files/WFNg381w5sziFQnU3nEM" alt=""><figcaption></figcaption></figure></div> | Set the icon component's stroke color.                                                                           |
| <div><figure><img src="/files/gaHLPT0QBp7qcsVByiMd" alt=""><figcaption></figcaption></figure></div> | Get the icon component's stroke color.                                                                           |
| <div><figure><img src="/files/r69ZOBDQOXEXijKwuwEH" alt=""><figcaption></figcaption></figure></div> | Set the icon component's stroke width.                                                                           |
| <div><figure><img src="/files/kygPvo6uHWEPySbBCdXw" alt=""><figcaption></figcaption></figure></div> | Get the icon component's stroke width.                                                                           |
| <div><figure><img src="/files/Ef0EsV4cc1s9xSnaNlRK" alt=""><figcaption></figcaption></figure></div> | Set the icon component's fill color.                                                                             |
| <div><figure><img src="/files/1px9i7b10ccGQquG2GhA" alt=""><figcaption></figcaption></figure></div> | Get the icon component's fill color.                                                                             |
| <div><figure><img src="/files/50nKBrtlPELMk8cPvOCr" alt=""><figcaption></figcaption></figure></div> | Set the icon component's height.                                                                                 |
| <div><figure><img src="/files/zV5CMEVyTLCyKVjjUrjM" alt=""><figcaption></figcaption></figure></div> | Get the icon component's height.                                                                                 |
| <div><figure><img src="/files/Vekhsl1fz52euf45qU2D" 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="/files/kINo49tFai9zjNWsJ3mi" alt=""><figcaption></figcaption></figure></div> | Set the icon component's width.                                                                                  |
| <div><figure><img src="/files/RXkVdF313yIH1nC0boeh" alt=""><figcaption></figcaption></figure></div> | Get the icon component's width.                                                                                  |
| <div><figure><img src="/files/kPm78joS81sgczJ4jGhF" 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="/files/Bfkq698WGETdMfkIaagL" alt=""><figcaption></figcaption></figure></div> | Set whether the icon component is visible on the screen.                                                         |
| <div><figure><img src="/files/siRlecxWW8paBkTkANfN" alt=""><figcaption></figcaption></figure></div> | Get whether the icon component is visible on the screen.                                                         |
| <div><figure><img src="/files/eN0Sk4Ti6Y0cMJsgYfxP" 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="/files/tDCziI6dx4WquyOHXJZy" 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="/files/nXZbdWIhCWH8ECO4x8dc" 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="/files/JaxHBP2nzELFKs9TtghH" 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.         |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/app-design/ui-components/basic-components/icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.