# Icon Picker

<figure><img src="/files/LWnvHeTM4C9d08IXiBAI" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Adding a label

The Label field lets you add contextual text for the Icon Picker component. The Label text will be displayed according to the `Variant` attribute. Styling hooks can be applied to the Label text from the [Style panel](/flow/component-builder/style-panel.md).

### Customizing the icon menu

You can customize the appearance of the icon menu by customizing the following attributes: `Menu Label`, `Menu Icon Size`, `Menu Variant`.

<figure><img src="/files/5UtUmxE1oZyrEtbynv0C" alt=""><figcaption></figcaption></figure>

### Hide icons categories

Under the `Advanced Options` section, specific icon categories can hide.&#x20;

<figure><img src="/files/I8QsJbo5tcy1lPjOMyF3" alt=""><figcaption><p>How to hide specific icon categories</p></figcaption></figure>

***

## Adding Interactions

Interactions define what happens when users select an icon. A list of interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Icon Picker component:

* On `Change`: The event fired when the icon changes

***

## Styling the Icon Picker

From the Styles panel, you can customize styling attributes for the Hero Banner:&#x20;

* `Label`: to customize the style of the label if a label text is present.

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

***

## Examples

<figure><img src="/files/Ly4rZleIXgJM1ghwWqlE" alt=""><figcaption></figcaption></figure>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>accessKey</td><td>String</td><td>Specifies a shortcut key to activate or focus an element.</td></tr><tr><td>disabled</td><td>Boolean</td><td>If present, the input field is disabled and users cannot interact with it.</td></tr><tr><td>fieldLevelHelp</td><td>String</td><td>Help text detailing the purpose and function of the input.</td></tr><tr><td>hiddenCategories</td><td>String[]</td><td>The icon categories that will be hidden by default.</td></tr><tr><td>hideFooter</td><td>Boolean</td><td>If present, the dropdown footer is hidden.</td></tr><tr><td>hideInputText</td><td>Boolean</td><td>If present, the input text next to the icon button is hidden.</td></tr><tr><td>label</td><td>String</td><td>Text label for the input.</td></tr><tr><td>menuIconSize</td><td>String</td><td><p>The size of the icon.</p><p>Options include <code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, or <code>large</code>.</p></td></tr><tr><td>menuLabel</td><td>String</td><td>Optional text to be shown on the button.</td></tr><tr><td>menuVariant</td><td>String</td><td><p>The variant changes the look of the button.</p><p>Accepted variants include <code>bare</code>, <code>container</code>, <code>border</code>, <code>border-filled</code>, <code>bare-inverse</code>, and <code>border-inverse</code>.</p><p>This value defaults to border.</p></td></tr><tr><td>placeholder</td><td>String</td><td>Text that is displayed when the field is empty, to prompt the user for a valid entry.</td></tr><tr><td>readOnly</td><td>Boolean</td><td>If present, the input field is read-only and cannot be edited by users.</td></tr><tr><td>required</td><td>Boolean</td><td>If present, the input field must be filled out before the form is submitted.</td></tr><tr><td>value</td><td>String</td><td>The Lightning Design System name of the selected icon. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed.</td></tr><tr><td>variant</td><td>String</td><td><p>The variant changes the appearance of an input field.</p><p>Accepted variants include <code>standard</code>, <code>label-inline</code>, <code>label-hidden</code>, and <code>label-stacked</code>.</p><p>This value defaults to standard, which displays the label above the field.</p><p>Use label-hidden to hide the label but make it available to assistive technology.</p><p>Use label-inline to horizontally align the label and input field. Use <code>label-stacked</code> to place the label above the input field.</p></td></tr></tbody></table>

### Events

| Name   | Description                            |
| ------ | -------------------------------------- |
| change | The event fired when the icon changes. |

### Styling Hooks

| Name        | Description                         |
| ----------- | ----------------------------------- |
| Text Color  | Define a text color for the label.  |
| Font Size   | Define a font size for the label.   |
| Font Style  | Define a font style for the label.  |
| Font Weight | Define a font weight for the label. |


---

# 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.avonnicomponents.com/flow/flow-components/icon-picker.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.