---
title: Selector de Íconos
image: /images/user-guide/github/github-header.png
---

<Frame>
  <img src="/images/user-guide/github/github-header.png" alt="Encabezado" />
</Frame>

Un selector de íconos basado en un menú desplegable que permite a los usuarios seleccionar un ícono de una lista.

<Tabs>
  <Tab title="Uso">
    ```jsx
    import React, { useState } from "react";
    import { IconPicker } from "@/ui/input/components/IconPicker";

    export const MyComponent = () => {

       const [selectedIcon, setSelectedIcon] = useState("");
       const handleIconChange = ({ iconKey, Icon }) => {
         console.log("Selected Icon:", iconKey);
         setSelectedIcon(iconKey);
       };

      return (
          <IconPicker
            disabled={false}
            onChange={handleIconChange}
            selectedIconKey={selectedIcon}
            variant="primary"
          />
      );
    };
    ```
  </Tab>

  <Tab title="Props">
    | Props           | Tipo     | Descripción                                                                                                                                      |
    | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
    | deshabilitado   | booleano | Desactiva el selector de íconos si está configurado en `true`                                                                                    |
    | "onChange"      | función  | La función de devolución de llamada que se activa cuando el usuario selecciona un icono. Recibe un objeto con las propiedades `iconKey` y `Icon` |
    | selectedIconKey | cadena   | La clave del ícono seleccionado inicialmente                                                                                                     |
    | onClickOutside  | función  | Función de devolución de llamada que se activa cuando el usuario hace clic fuera del menú desplegable                                            |
    | onClose         | función  | Función de devolución de llamada que se activa cuando se cierra el menú desplegable                                                              |
    | onOpen          | función  | Función de devolución de llamada que se activa cuando se abre el menú desplegable                                                                |
    | variante        | cadena   | La variante de estilo visual del ícono clicable. Las opciones incluyen: `primario`, `secundario` y `terciario`                                   |
  </Tab>
</Tabs>