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.
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.
Access Key
A keyboard shortcut key that moves focus to the icon picker. Available under advanced options.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
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.
Add the Icon Picker component and set its Value binding to a variable (e.g.,
{!selectedIcon}).Add the Header component and map its Icon Name property to the same variable.
Interactions
Interactions 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.
Styling
Configure the Icon Picker's appearance from the Style tab of the Edit Icon Picker panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Styles the field label.
Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Last updated
Was this helpful?