> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/app-design/ui-components/basic-components/icon.md).

# 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.         |