> 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/flow/flow-components/icon-picker.md).

# Icon Picker

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

***

## Overview

The Icon Picker lets flow users browse and select a Lightning Design System icon from a searchable dropdown. The selected icon name is stored as an output variable you can use to configure other components or save to a record field. Use it whenever an admin or end-user needs to pick an icon as part of a configuration or customization flow.

## Configuration

To configure it, click the component on the Flow screen. The Edit Icon Picker Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

**Label** — text displayed above the Icon Picker input. The label position is controlled by the **Variant** setting.

**Field Help Text** — help text displayed in a tooltip to clarify the input's purpose.

**Variant** — controls how the label is positioned: Standard, Label Hidden, Label Inline, or Label Stacked.

**Value** — pre-populate the picker with a default icon selection (e.g., `standard:account`).

**Placeholder** — hint text shown inside the input when no icon is selected.

**Required** — the flow won't advance until the user picks an icon.

**Read Only** — displays the current icon without allowing changes.

**Disabled** — grays out the component so it is visible but cannot be interacted with.

### Menu

Customize the appearance of the icon dropdown button.

| Setting               | What It Controls                                                                                                       |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Menu Label**        | Optional text displayed on the dropdown button                                                                         |
| **Menu Icon Size**    | Size of the icon on the button — Xx-Small, X-Small, Small, Medium, or Large                                            |
| **Menu Variant**      | Visual style of the button — Bare, Container, Border, Border Filled, Bare Inverse, or Border Inverse (default: Border) |
| **Hide Footer**       | Hides the footer bar at the bottom of the dropdown                                                                     |
| **Hide Input Text**   | Hides the text input shown next to the icon button                                                                     |
| **Hidden Categories** | Comma-separated list of icon categories to exclude — choose from Standard, Custom, Utility, Doctype, and Action        |

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

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

### Advanced Options

**Access Key** — specifies a keyboard shortcut key to activate or focus the input. See the MDN Web Docs HTML "accesskey" global attribute for details.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.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 store the selection in a flow variable or trigger downstream logic such as navigating to the next screen.

## Styling

The **Style** tab lets you fine-tune the Icon Picker's spacing and label appearance. Configure it from the **Style** tab of the Edit panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Label" %}
Styles the field label above the icon picker.

* **Color:** Set the label text color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
  {% endtab %}
  {% endtabs %}

## Examples

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

## Output Variables

### Flow Interaction Output Variables

Like all interactive Flow components, the Icon Picker exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

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