---
url: https://gudhub.com/docs/gh-elements/icon-element/
title: "Icon Element\n                #"
description: "Icon is a gh element that allows user to add icon to any application. It is one of the most simple element. !Using icon element To select an icon, the user just"
lang: uk
updated: 2026-09-11T16:04:06.184Z
---

# Icon Element [#](https://gudhub.com/docs/gh-elements/icon-element/#icon-element)

**Icon** is a gh-element that allows user to add icon to any application. It is one of the most simple element.

![Using icon element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/icon-work.gif "Icon operation")

To select an icon, the user just needs to click on it. After that, a list of available icons will open. Then all user need to do is click on the desired icon. It will be immediately saved in the field, and the list of icons will be closed.

## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/icon-element/#functional-characteristics)

This element is mostly found in the settings of other gh-elements. Some of them are: [Add Items](https://gudhub.com/docs/gh-elements/add-items/), [Filter Tabs](https://gudhub.com/docs/gh-elements/filter-tabs/), and [Radio Icon](https://gudhub.com/docs/gh-elements/radio-icon/).

In casual use, you can use it to label some notes with different categories with icons. It also can be used in [automation](https://gudhub.com/docs/understanding-gudhub/automation/automation-overview/).

## Element Options [#](https://gudhub.com/docs/gh-elements/icon-element/#element-options)

All icon options are limited to field settings. In turn, icon field settings has only standard options like Field Name and Name Space:

![Settings of icon field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/icon-field-settings.jpg "Icon field settings")

## Element Style [#](https://gudhub.com/docs/gh-elements/icon-element/#element-style)

The icon element has one of the simplest list of [interpretation types](#interpretation) and a standard set of [style settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/) with a single difference.

![Style of icon element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/icon-element-style.jpg "Icon element style")

### General Settings [#](https://gudhub.com/docs/gh-elements/icon-element/#general-settings)

Unlike previous group of settings, element style has one additional option.

![General settings of icon style](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/icon-general-settings.jpg "Icon general settings")

| Name | Description |
| :-- | :-- |
| Image Type | allow to change the icon format |

#### Image Type [#](https://gudhub.com/docs/gh-elements/icon-element/#image-type)

This option is a special option that is used mostly in development. It allows to change the format of icon. There are two types of format:

-   **SVG**
-   **Canvas**

Image type is useful when the icon element is used in other platforms. Then you can select the needed format. Also, canvas is useful for documents which will be converts in PDF format.

## Filtration [#](https://gudhub.com/docs/gh-elements/icon-element/#filtration)

This element cannot be filtered out.

## Interpretation [#](https://gudhub.com/docs/gh-elements/icon-element/#interpretation)

The icon element has the two interpretation types.

![Types of icon interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/icon-interpretation-types.jpg "Icon interpretation types")

### Default [#](https://gudhub.com/docs/gh-elements/icon-element/#default)

The first type is default. It is the selected blue icon in 40x40 px size.

### Value [#](https://gudhub.com/docs/gh-elements/icon-element/#value)

The second interpretation type displays the value of the current field.

## Value Format [#](https://gudhub.com/docs/gh-elements/icon-element/#value-format)

This element takes the name of the icon as the value.

Copy

```json
{
    "field_value": "box"
}
```

There are lots of different icons available for using in this element.

## Data Model [#](https://gudhub.com/docs/gh-elements/icon-element/#data-model)

The icon have no extra properties in data model besides interpretation array.

Copy

```json
{
    "data_model": {
        "interpretation": []
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| interpretation | `array` | _contains all icon interpretations_ |