Icon Picker

A component to show a picker element to select icons.

Overview

The Icon Picker component allows users to select a specific icon from the Lightning Design System Library. It typically consists of a list of icons the user can browse through and select by clicking on the icon or using search or filter functionality to narrow the list of options. The selected icon is displayed within the interface or can represent specific data or functionality.

---

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.

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.

Hide icons categories

Under the Advanced Options section, specific icon categories can hide.

How to hide specific icon categories

---

Adding Interactions

Interactions define what happens when users select an icon. A list of interactions is available here.

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:

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

You can find the instructions for styling here.

---

Examples

---

Specifications

Attributes

Name	Type	Description
accessKey	String	Specifies a shortcut key to activate or focus an element.
disabled	Boolean	If present, the input field is disabled and users cannot interact with it.
fieldLevelHelp	String	Help text detailing the purpose and function of the input.
hiddenCategories	String[]	The icon categories that will be hidden by default.
hideFooter	Boolean	If present, the dropdown footer is hidden.
hideInputText	Boolean	If present, the input text next to the icon button is hidden.
label	String	Text label for the input.
menuIconSize	String	The size of the icon. Options include xx-small, x-small, small, medium, or large.
menuLabel	String	Optional text to be shown on the button.
menuVariant	String	The variant changes the look of the button. Accepted variants include bare, container, border, border-filled, bare-inverse, and border-inverse. This value defaults to border.
placeholder	String	Text that is displayed when the field is empty, to prompt the user for a valid entry.
readOnly	Boolean	If present, the input field is read-only and cannot be edited by users.
required	Boolean	If present, the input field must be filled out before the form is submitted.
value	String	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.
variant	String	The variant changes the appearance of an input field. Accepted variants include standard, label-inline, label-hidden, and label-stacked. This value defaults to standard, which displays the label above the field. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and input field. Use label-stacked to place the label above the input field.

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.