> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Selector de Íconos

<Frame>
  <img src="https://mintcdn.com/twenty/JIRRbviz5phT8G2L/images/user-guide/github/github-header.png?fit=max&auto=format&n=JIRRbviz5phT8G2L&q=85&s=7b60b304ddd2fead6c55719cbdd7cd32" alt="Encabezado" width="1440" height="680" data-path="images/user-guide/github/github-header.png" />
</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 theme={null}
    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>