--- meta: title: Icon Picker description: Icon pickers allow users to select an icon, library, and colour via a modal dialog. layout: component --- ## Examples ### Basic Icon Picker A basic icon picker with a label. Click the trigger to open the selection dialog. ```html:preview ``` ### With a Pre-selected Icon Set the `icon` and `library` attributes to pre-populate the picker. ```html:preview ``` ### With Colour Set the `color` attribute to apply a colour to the icon. ```html:preview ``` ### Without Colour Option Use the `no-color` attribute to hide the colour picker from the selection dialog. ```html:preview ``` ### Without Library Option Use the `no-library` attribute to hide the library selector, locking it to the default library. ```html:preview ``` ### Without Colour or Library Both options can be removed together for a minimal icon-only picker. ```html:preview ``` ### Brand Icons Pre-select the `brands` library to show Kubex brand icons. ```html:preview ``` ### Line Icons Use the `line` library for Lineicons. ```html:preview ``` ### Lucide Icons Use the `lucide` library for [Lucide](https://lucide.dev/icons) icons, rendered as inline SVGs. Icon names use kebab-case. ```html:preview ``` ### Gravatar Use the `gravatar` library to display a Gravatar from an email address. ```html:preview ``` ### Avatar Use the `avatar` library to generate initials from a name. ```html:preview ``` ### Upload Image By default the picker only offers library icons. Add the `allow-upload` attribute to enable a secondary "Upload Image" mode in the dialog, letting users upload an image file instead of picking an icon. Use the `accept` attribute to restrict the accepted file types (defaults to `image/*`). An uploaded file replaces the icon value: on submit, the file is sent under `name` in place of the icon string — the two are mutually exclusive. The chosen file is also available via the element's `file` property. ```html:preview ``` ```html:preview ``` ### Help Text Add descriptive text below the picker with the `help-text` attribute. ```html:preview ``` ### Disabled Use the `disabled` attribute to prevent interaction. ```html:preview ``` ### In a Form The icon picker integrates with forms using hidden inputs. The field names follow the pattern `{name}[icon]`, `{name}[library]`, and `{name}[color]`. ```html:preview

Show Form Data
```