IconPickerModal

A searchable, filterable icon picker rendered in a full-screen modal. It loads the application's icon registry and lets users search by name, label, or tag. Results can be narrowed by icon type (onlyTypes) or by feature flags (onlyWith). Selecting an icon calls onClose with the chosen icon object.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (icon?: any) => void | Yes | — | Called when the modal closes. Receives the selected icon object when an icon is chosen, or nothing when cancelled. | | title | string | No | "Seleccionar ícono" | Title displayed in the modal header. | | subtitle | string | No | — | Subtitle displayed in the header. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 999999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | — | When true, the modal occupies the full viewport. | | searchBarWidth | number \| string | No | — | Width of the search input bar. | | onlyTypes | string[] | No | [] | Filter icons to only those matching these type values (e.g. ['singleColor', 'multiColor']). | | onlyWith | string[] | No | [] | Filter icons to only those having these feature flags (e.g. ['wrapper', 'inverted']). |

Usage

Basic

import React from 'react';
import IconPickerModal from '@/components/modals/IconPickerModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const [selectedIcon, setSelectedIcon] = React.useState(null);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pick Icon</button>
      <IconPickerModal
        isOpen={open}
        onClose={(icon) => {
          if (icon) setSelectedIcon(icon);
          setOpen(false);
        }}
        title="Select an Icon"
      />
    </>
  );
}

Filtered by type

<IconPickerModal
  isOpen={open}
  onClose={(icon) => {
    if (icon) setSelectedIcon(icon);
    setOpen(false);
  }}
  onlyTypes={['singleColor']}
  onlyWith={['wrapper']}
/>