¿Qué hace que un set de iconos parezca un solo set?
Los iconos encajan cuando comparten cuadrícula, grosor de trazo, tratamiento de las esquinas, nivel de detalle y paleta. Mezclar iconos de distintos packs, o generarlos de uno en uno con prompts separados, suele romper al menos una de estas cosas. El generador de sets de iconos dibuja todos los iconos de un set en una misma hoja, a partir de una sola descripción del estilo, así que las decisiones de dibujo se toman una vez para todos. Después cada icono se recorta y se traza en su propio SVG.
Tres de nuestros sets de ejemplo, cada uno a partir de una lista: una app de cafetería en Línea, una app de fitness en Relleno con esquinas anguladas y una app de viajes en Color plano con tres colores.
¿Cómo creo un set?
Abre el generador de logos con IA y elige Iconos. El encabezado del estudio cambia al generador de sets de iconos.
- Escribe los iconos. Escribe las cosas que necesitas, separadas por comas o una por línea:
taza de café, cruasán, pin de mapa, tarjeta de fidelidad. Cada una se convierte en un chip. Un set admite hasta 25 iconos. - Elige cómo se dibujan. Línea son contornos de un solo grosor, Relleno son formas sólidas de un color, Color plano son formas sólidas de hasta tres colores, y Como esta imagen sigue el aspecto de una imagen que subas (con la sesión iniciada) o de un logo o un set de iconos que ya hayas creado.
- Elige las esquinas. Redondeadas o anguladas.
- Describe el estilo con palabras, si quieres. Hasta 300 caracteres, por ejemplo "cercano y minimalista, extremos redondeados, un toque cálido hecho a mano". Esta frase se incluye en el dibujo de cada icono del set.
- Envía. Cada recuadro muestra su icono mientras se traza y luego el SVG terminado.
El precio de un set nuevo aparece en el botón antes de enviarlo; no se cobra nada por un set que falla.
¿Cómo corrijo un icono sin volver a dibujar los demás?
Usa una ronda. En una ronda puedes rehacer iconos con una nota ("una esterilla enrollada lisa, sin textura") y añadir otros nuevos, hasta nueve cambios a la vez. Los iconos rehechos y añadidos se dibujan con el estilo del set, así que siguen encajando. Las primeras rondas de un set están incluidas; cuando una ronda cuesta créditos, su botón lo indica antes de empezar.
Si solo falla un detalle y volver a dibujar sería excesivo, abre el icono en el editor SVG y cambia el trazado o el color directamente.
¿Qué incluye la descarga?
El ZIP tiene tres partes:
| Carpeta | Qué contiene |
|---|---|
svg/ |
un SVG por icono, viewBox="0 0 24 24" con 2 px de margen |
png/ |
cada icono como PNG transparente de 16, 24, 32, 48, 64, 128, 256 y 512 px |
sprite.svg |
todos los iconos como <symbol> con el id icon-NOMBRE |
Los PNG pequeños (hasta 48 px) se dibujan a su propio tamaño, así que las líneas caen en píxeles enteros en lugar de reducirse desde una imagen grande. Los tamaños mayores se escalan desde 512 px.
¿Cómo uso los iconos en una web?
En un set de Línea o Relleno, los SVG se dibujan con currentColor, así que un icono toma el color del texto que lo rodea. Lo recoloreas con CSS en lugar de editar archivos:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-pin-de-mapa"/></svg>
Cómo llegar
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Elige Tal como se diseñó en el diálogo de descarga si prefieres que el color vaya escrito en cada archivo. Un set de Color plano siempre conserva sus propios colores. Marca los iconos decorativos con aria-hidden="true" y dale un nombre accesible a un icono que funcione solo como botón.
¿Qué listas funcionan mejor?
Los sustantivos concretos y dibujables funcionan mejor: "bicicleta", "cronómetro", "cerradura". Las palabras abstractas ("crecimiento", "confianza") no le dan al generador nada concreto que dibujar, así que conviértelas antes en un objeto ("un brote", "un apretón de manos"). Mantén un mismo nivel de detalle en toda la lista. Un set que mezcla "punto" con "skyline de una ciudad" se verá desigual se dibuje como se dibuje.
Antes de publicar, revisa cada icono a 16 y 24 px junto a texto, comprueba el contraste con tus fondos y confirma que los iconos parecidos siguen siendo distintos. Un generador no comprueba si un icono se parece a la marca de otra persona, así que revisa cualquier icono que pienses registrar como marca.