En esta página
El problema de los iconos con IA
Pedir un icono suelto es fácil. Lo difícil es que los 12 iconos de tu web parezcan de la misma familia: mismo grosor de línea, mismas esquinas, mismos colores.
El truco es pedirlos todos a la vez, en una cuadrícula, con unas reglas de estilo fijas. Así la IA los dibuja con el mismo criterio. Después los recortas, les quitas el fondo y, si los vas a usar en una web, los pasas a vector.
Vector (SVG) quiere decir que el icono está hecho de formas y no de píxeles: se ve nítido a cualquier tamaño y pesa muy poco.
Cómo hacerlo en 6 pasos
- 1. Haz la lista de iconosEscribe qué necesitas: inicio, buscar, carrito, perfil, ajustes, contacto… Entre 6 y 12 por cuadrícula funciona bien.
- 2. Elige un estilo y no lo cambiesLínea fina, relleno plano, duotono, 3D suave… Mira la tabla de estilos y copia la frase.
- 3. Genera la cuadrículaUsa el prompt estrella con tu lista y tus colores. Si un icono sale mal, pide que cambie solo ese.
- 4. Recorta cada iconoCon cualquier editor de fotos o en una app de diseño. Deja el mismo margen alrededor de todos.
- 5. Quita el fondoPide «transparent background» o usa una herramienta para quitar el fondo y descarga en PNG.
- 6. Pásalos a vector si son para una webCon un vectorizador conviertes el PNG en SVG. O créalos directamente en vector con Recraft.
El prompt estrella
A consistent icon set for a type of website or app: a bakery online shop, arranged in a clean 3x3 grid with equal spacing. Icons: home, search, shopping bag, user profile, heart, map pin, phone, clock, settings. Style rules, identical for every icon: simple line icons, 2px rounded stroke, rounded corners, drawn on the same 24x24 grid, same visual weight and size, centred in its cell. Colours: one colour, #2F4BFF, no gradients, no shadows. Transparent background, no labels, no text, no letters. Flat vector look, crisp edges.
Personaliza el prompt5 huecos en amarillo para rellenar con lo tuyo
Probado en ChatGPT Images 2.5
Cambia la lista de iconos, el estilo y los colores. Pon los colores en código (por ejemplo #2F4BFF) si ya tienes los de tu marca.
6 estilos de icono
Copia la frase en inglés en el prompt
| Estilo | Frase para el prompt | Queda bien en |
|---|---|---|
| Línea fina | simple line icons, 2px rounded stroke, rounded corners | Webs y apps limpias |
| Relleno plano | solid filled flat icons, simple geometric shapes, no outlines | Botones y menús pequeños |
| Duotono | duotone icons, main shape in #2F4BFF and accent details in #FFE45C | Webs de marca con dos colores |
| 3D suave | soft 3D clay icons, rounded shapes, gentle shadow, pastel colours | Apps modernas y secciones destacadas |
| Dibujado a mano | hand-drawn doodle icons, slightly uneven ink line, playful | Negocios artesanos y cercanos |
| Pegatina | sticker-style icons, thick white outline, bold flat colours | Webs para niños o de ocio |
Fondo transparente y vector, sin complicarte
- Fondo transparente: ChatGPT suele darlo si se lo pides en el prompt. Si no, sube la imagen a remove.bg o a otra herramienta para quitar el fondo y descarga en PNG.
- Vector desde el principio: Recraft genera imágenes en vector y deja descargar en SVG. Tiene plan gratuito con límites; comprueba qué formatos de descarga incluye el tuyo.
- Vectorizar un PNG: Recraft y otras apps de diseño tienen la opción de vectorizar. Revisa después que las líneas no hayan quedado temblorosas.
- Ajustar a mano: abre el SVG en Figma para igualar tamaños o cambiar el color de todos a la vez.
Si te falta el logo, empieza por crear un logo con IA; y para los colores, la paleta de colores de tu marca.
Antes de subirlos a tu web
¿Se entienden a tamaño pequeño?
Míralos a 24 píxeles, el tamaño de un menú en el móvil. Si hay que adivinar qué es, simplifica el dibujo.
¿Tienen todos el mismo grosor y tamaño?
Ponlos en fila. Si uno parece más grande o más oscuro, ajústalo o vuelve a generarlo.
¿Se ven en modo oscuro?
Un icono negro desaparece sobre fondo oscuro. Haz una versión clara o usa un color que contraste con los dos.
¿El icono principal de tu app es cuadrado y grande?
Las tiendas de apps piden un icono cuadrado de buen tamaño (por ejemplo, 1024 × 1024) y te indican el tamaño exacto. Sin texto pequeño: no se leería.
Herramientas que usa
ChatGPTEl asistente de OpenAI para escribir, analizar textos y crear imágenes a partir de una descripción.
GeminiEl asistente de Google. Incluye Nano Banana, su modelo para crear y editar imágenes.
RecraftGenerador de imágenes con IA para diseño: logos, iconos e ilustraciones en vector (SVG) con estilos de marca coherentes.
Preguntas frecuentes
¿Puedo usar iconos hechos con IA en mi web comercial?
En general sí, pero revisa las condiciones de la herramienta que uses y no pidas iconos que imiten los de otras marcas o apps conocidas.
¿Qué es mejor, PNG o SVG?
Para una web, SVG: se ve nítido a cualquier tamaño y pesa poco. Para redes sociales o una presentación, un PNG con fondo transparente es suficiente.
¿Por qué cada icono me sale con un estilo distinto?
Porque los pides por separado. Pídelos todos en la misma cuadrícula y con las mismas reglas de estilo, y si añades uno nuevo, adjunta la cuadrícula y pide «same style as the attached icons».
¿Te ha funcionado?
Creador de la red Hub Media. Prueba cada prompt en varios modelos antes de publicarlo.
Un recurso nuevo cada semana
Te llega al correo antes que a Instagram. Sin spam.
