# IconPicker

Source: https://lumeo.nativ.sh/components/icon-picker

# IconPicker

A searchable, virtualized icon grid behind a Popover trigger — pack-agnostic, so it works with any installed Lumeo.Icons.\* pack.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<IconPicker />

## When to Use

-   An admin picking a category, folder, or navigation-item icon
-   Theme/branding settings that let a user choose a glyph
-   Anywhere a value component needs to bind to one icon name out of a large set

### Pack-agnostic by design

The core `Lumeo` package references no individual icon pack — `IconPicker` takes a plain `IReadOnlyList<IconPickerItem>` (`Name` + `IconSource` + optional `Keywords`). Build that list from whichever `Lumeo.Icons.*` pack(s) you installed with a one-time reflection pass over the pack's static class — the same technique the [icon gallery](/icons) on this site uses:

using System.Reflection;
using Lumeo.Icons;

private static IReadOnlyList<IconPickerItem> BuildIcons(Type packClass) =>
    packClass.GetProperties(BindingFlags.Public | BindingFlags.Static)
        .Where(p => p.PropertyType == typeof(IconSource))
        .Select(p => new IconPickerItem(p.Name, (IconSource)p.GetValue(null)!))
        .OrderBy(i => i.Name, StringComparer.Ordinal)
        .ToList();

// e.g. in OnInitialized():
\_lucideIcons = BuildIcons(typeof(Lucide));

Preview Code

Basic

Preview Code

With Label

Folder

Preview Code

Keywords

Pick an icon

Try searching "money" or "home" — neither is an icon name, both are a `Keywords` entry.

Preview Code

Sizes

Pick an icon

Pick an icon

Pick an icon

Pick an icon

Pick an icon

Pick an icon

Pick an icon

The opened popover scales with the trigger's `Size` too — search box, grid cell/glyph size and popover width all grow or shrink alongside it.

Preview Code

Disabled

Pick an icon

Preview Code

In a Form

Category icon\*

Pick an icon

Shown next to the category name in every list.

## API Reference

Nested inside a FormField, the cascaded context wires up Label, Required, Invalid, and HelperText automatically — the same shape as ColorPicker and Combobox.

## Related Components

-   [Popover](/components/popover) — The underlying overlay mechanism used by IconPicker
-   [Combobox](/components/combobox) — Searchable single/multi-select for text options
-   [ColorPicker](/components/color-picker) — The same trigger + popover shape for color values
-   [Icon Packs](/icons) — Browse every installed pack and copy usage snippets