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

# Icon Picker

The Avonni Icon Picker component lets users visually browse and select a Lightning Design System icon from a categorized list. Instead of typing an icon name manually, users can search and pick the icon they want — the component then stores the selected icon name as its value, ready to drive other components or formulas.

## Overview

To start with the Icon Picker, add it to your canvas and configure how it is displayed and behaves. The sections below follow the configuration panel from top to bottom.

## Configuration

To configure the Icon Picker, select it on the canvas. The **Edit Icon Picker** panel opens on the right. The sections below mirror the Properties tab.

### Properties

#### Label

Text label displayed above or beside the Icon Picker input field. Example: "Select an Icon" or "Choose Status Icon".

#### Value

Holds the name of the currently selected icon (for example, `utility:add` or `standard:account`). Bind this to a Text variable to store the chosen icon name and pass it to other components.

#### Field Level Help

Help text displayed next to the label to guide users on the purpose of the field.

#### Placeholder

Text shown in the input field before the user makes a selection. Example: "Search for an icon…".

#### Variant

Controls how the label is positioned relative to the input field. Default is **Standard**.

| Option            | Description                                               |
| ----------------- | --------------------------------------------------------- |
| **Standard**      | Label appears above the input field.                      |
| **Label Hidden**  | Label is hidden.                                          |
| **Label Inline**  | Label appears to the left of the input field.             |
| **Label Stacked** | Label appears above the input field with a stacked style. |

#### Menu Label

Optional text shown on the icon picker button itself, alongside the selected icon.

#### Menu Icon Size

Controls the size of icons displayed inside the dropdown menu. Default is **Medium**.

Options: **Xx-Small**, **X-Small**, **Small**, **Medium**, **Large**.

#### Menu Variant

Changes the visual style of the picker button. Default is **Border**.

Options: **Bare**, **Container**, **Border**, **Border Filled**, **Bare Inverse**, **Border Inverse**.

#### Hide Footer

If enabled, the Cancel and Done buttons at the bottom of the dropdown are hidden. Selection takes effect immediately when the user clicks an icon.

#### Hide Input Text

If enabled, the text input field next to the icon button is hidden. The Icon Picker appears as a button only, useful when you want users to browse rather than search by name.

#### Disabled

If enabled, the input field is disabled and cannot be edited by users.

#### Read Only

If enabled, the input field is read-only — users can see the selected icon but cannot change it.

#### Required

If enabled, the user must select an icon before the form can be submitted.

#### Hidden Categories

Select one or more icon categories to hide from the picker menu. Options: **Standard**, **Custom**, **Utility**, **Doctype**, **Action**.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

**Dynamically setting a component's icon**

This example shows how to use an Icon Picker to let the user change the icon displayed on an Avonni Header component.

1. Add the Icon Picker component and set its **Value** binding to a variable (e.g., `{!selectedIcon}`).
2. Add the Header component and map its Icon Name property to the same variable.

<figure><img src="/files/LAh8BkeCSQQMpkMTZKm3" alt=""><figcaption><p>Final Result</p></figcaption></figure>

<figure><img src="/files/jfnIf0nbS9CssveTE0mm" alt=""><figcaption><p>Data Binding process</p></figcaption></figure>

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Icon Picker. Configure them from the **Interactions** tab of the Edit Icon Picker panel.

### Change

Fires when the user selects a different icon. Use this to trigger downstream updates — for example, updating the icon displayed on a Header or Button component in real time.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/icon-picker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.