Guía

Todo lo que hace Icon Library, paso a paso. Usa el índice para ir directo a un tema.

Cómo se usa

1. Elige un conjunto en el botón Elegir. No se descarga nada hasta entonces, y cada conjunto queda en caché mientras la página esté abierta.
2. Acota con Todas las categorías (puedes marcar varias) y con el campo de búsqueda, que busca por el nombre de los iconos.
3. Define el estilo en los controles Tamaño, Trazo y Color. Se aplican a todo lo que copias, descargas o envías al scratchpad, y la vista previa sigue el trazo y el color. Solo Lucide y Feather tienen trazo; los emojis conservan sus propios colores.
4. Haz clic en un icono para copiar su SVG (o el carácter del emoji). El clic derecho copia la alternativa: el nombre del icono en los conjuntos vectoriales, o el emoji dentro de un SVG.
5. Usa los botones de cada tarjeta:
   • + añade el icono al scratchpad;
   • ⋯ abre las descargas (SVG, PNG al tamaño elegido) y Copiar como componente React;
   • el lápiz (todos los conjuntos vectoriales) abre el editor de iconos.

El editor de iconos

El lápiz de una tarjeta abre el icono sobre una cuadrícula, listo para cambiarlo. El icono llega con el tamaño, el trazo y el color que elegiste.

• Cambiar la forma: selecciona una forma en la lista o en la cuadrícula y arrastra sus puntos. Las curvas muestran sus puntos de control, unidos por líneas discontinuas; al mover un punto de la curva, sus controles lo acompañan.
• Mover: arrastra una forma, o usa las flechas del teclado o los botones. Los puntos se ajustan a la cuadrícula (1, ½ o ¼ de unidad, o libre).
• Transformar: girar 90°, voltear y ampliar o reducir — la forma seleccionada, o todo el icono si no hay nada seleccionado.
• Añadir y quitar: nuevas líneas, círculos, rectángulos y curvas; oculta una forma para ver el icono sin ella, o elimínala.
• Combinar iconos: + Icono encima busca en Lucide, Feather y Bootstrap y coloca otro icono sobre el actual, ajustado a la misma cuadrícula y con su propio estilo: una estrella rellena de Bootstrap puede ir dentro de un corazón de contorno de Lucide. Cada icono tiene un título en la lista que lo selecciona entero, para moverlo, girarlo o redimensionarlo.
• Colores: da a cada forma, o a cada icono, su propio color y grosor de trazo en el panel Selección. Color del texto vuelve a heredar el color del texto que lo rodea; las formas con color propio lo conservan dondequiera que se pegue el icono.
• Guardar y seguir después: Guardar .ile descarga el proyecto como archivo .ile, un pequeño archivo de texto que conserva lo que el SVG solo pierde: de qué icono viene cada forma, las formas ocultas y el nombre. Ábrelo de nuevo con Abrir .ile, en el editor o junto a la búsqueda de la página principal, o suelta el archivo sobre el editor. Abrir un archivo mientras editas se puede deshacer.
• Código: el código SVG junto a la cuadrícula sigue cada cambio, y también puedes escribir en él. Las vistas previas muestran el resultado a 16, 24, 32 y 48 píxeles.
• Deshacer y Rehacer (Ctrl+Z, Ctrl+Y); después copia, descarga o envía el icono editado al scratchpad. Los iconos de Lucide y Feather también se pueden abrir en Lucide Studio, un editor en línea independiente con herramientas más avanzadas.

El scratchpad

La pestaña Scratchpad del borde derecho abre un panel donde reúnes iconos mientras navegas. Cada icono se añade como un comentario HTML con su nombre seguido de su SVG, así que el resultado está listo para pegar en un proyecto. También puedes escribir libremente. Copiar todo copia el contenido y Borrar lo vacía. El texto se guarda en tu navegador, así que sigue ahí la próxima vez.

Para asistentes de IA

Los asistentes de IA pueden crear un icono y dártelo como un enlace que lo abre aquí, en el editor, listo para ajustar. El icono viaja dentro del propio enlace, después del #, así que nunca se envía a nuestro servidor. En el editor, Compartir enlace crea el mismo tipo de enlace para tu propio proyecto. Instrucciones para IA: llms.txt.

Compartir una búsqueda

La barra de direcciones sigue lo que estás viendo, por ejemplo ?set=lucide&q=arrow. Copia la dirección para compartir una búsqueda o guardarla en marcadores.

Atajos de teclado

Tema, idioma y preferencias

La página sigue el tema claro u oscuro de tu sistema; el botón de la cabecera lo cambia. El idioma se detecta según tu navegador y se puede cambiar en el selector de al lado. Ambas elecciones, el tamaño, el trazo y el color elegidos y el texto del scratchpad se guardan en tu navegador, así que siguen ahí la próxima vez.

Invítame a un café

Icon Library es gratis. Si te resulta útil, el botón Invítame a un café (unos 3 US$, pagados de forma segura con Stripe) ayuda a pagar el servidor, el dominio y las herramientas que lo mantienen en marcha. Como agradecimiento, el sitio no te muestra anuncios durante 30 días desde el pago.

Después de pagar recibes un código de colaborador. Para quitar los anuncios también en otro dispositivo —hasta 3—, abre allí el mismo botón e introduce el código. El botón solo aparece cuando los pagos están disponibles.

Publicar en Iconlibrary

Iconlibrary es el conjunto de iconos de la comunidad: iconos dibujados en el editor por colaboradores, revisados y compartidos con todos. Aparece en la lista de conjuntos como los demás.

1. Abre un icono en el editor y dibújalo o ajústalo.
2. Pulsa Publicar en Iconlibrary, ponle un nombre, elige hasta 3 categorías y, si quieres, un crédito (tu nombre o sitio).
3. Tu código de colaborador se rellena solo en el dispositivo donde invitaste el café; en otro dispositivo, escríbelo.
4. Confirma que creaste el icono (o tienes derecho a compartirlo) y que lo publicas bajo la licencia MIT, y envíalo. Aparece en Iconlibrary tras la revisión.

Solo se pueden publicar formas básicas: líneas, círculos, elipses, rectángulos, polilíneas, polígonos y paths. No se aceptan logotipos de marcas ni copias de otros iconos.