# Iconos para tu web o tu app con IA: un set completo con el mismo estilo > Crea un set de iconos coherente para tu web o tu app con IA: el prompt para la cuadrícula, 6 estilos, fondo transparente y cómo pasarlos a vector (SVG). - Tipo: Prompt - Categoría: Diseño y presentaciones - Autor: Álvaro Checa - Publicado: 28 de octubre de 2026 - Actualizado: 28 de octubre de 2026 - Página original: https://recursos.hubmedia.io/prompts/iconos-para-tu-web-o-app-con-ia - Publicado por: Recursos Hub Media (https://recursos.hubmedia.io/) ## 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. **1. Haz la lista de iconos**: Escribe qué necesitas: inicio, buscar, carrito, perfil, ajustes, contacto… Entre 6 y 12 por cuadrícula funciona bien. 2. **2. Elige un estilo y no lo cambies**: Línea fina, relleno plano, duotono, 3D suave… Mira la tabla de estilos y copia la frase. 3. **3. Genera la cuadrícula**: Usa el prompt estrella con tu lista y tus colores. Si un icono sale mal, pide que cambie solo ese. 4. **4. Recorta cada icono**: Con cualquier editor de fotos o en una app de diseño. Deja el mismo margen alrededor de todos. 5. **5. Quita el fondo**: Pide «transparent background» o usa una herramienta para quitar el fondo y descarga en PNG. 6. **6. Pásalos a vector si son para una web**: Con un vectorizador conviertes el PNG en SVG. O créalos directamente en vector con Recraft. ## El prompt estrella ### Prompt: Set de iconos coherente en cuadrícula (Cuadrado 1:1) Versión para ChatGPT Images 2.5 (Probado en ChatGPT Images 2.5): ```text 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. ``` Versión para Nano Banana 2.1 (Probado en Nano Banana 2.1): ```text Icon set in a [3x3] grid for [a bakery online shop]: [home, search, shopping bag, user profile, heart, map pin, phone, clock, settings]. All icons follow the same rules: [simple line icons, 2px rounded stroke, rounded corners], same size and visual weight, centred in each cell, colour [#2F4BFF] only. Plain white background, no text, no labels, flat vector look, crisp edges. ``` Versión para Recraft (Probado en Recraft): ```text Icon of a [shopping bag] for [a bakery online shop], [simple line icon, 2px rounded stroke, rounded corners], single colour [#2F4BFF], centred, no text, transparent background ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. 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](https://recursos.hubmedia.io/herramientas/chatgpt) suele darlo si se lo pides en el prompt. Si no, sube la imagen a [remove.bg](https://recursos.hubmedia.io/herramientas/remove-bg) o a otra herramienta para quitar el fondo y descarga en PNG. - **Vector desde el principio:** [Recraft](https://recursos.hubmedia.io/herramientas/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](https://recursos.hubmedia.io/herramientas/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](https://recursos.hubmedia.io/prompts/crear-logo-con-ia); y para los colores, la [paleta de colores de tu marca](https://recursos.hubmedia.io/prompts/paleta-de-colores-y-tipografias-de-marca-con-ia). ## 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. ## 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».