HomeCasa Guía de estilo de iconos para un sistema de diseño
Crea la guía de estilo de tu set de iconos: retícula y keylines, grosor de trazo, esquinas, tamaños, metáforas para cada icono, nomenclatura, exportación SVG, accesibilidad y checklist de revisión. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.
Intermedio · Texto · Pendiente de revisión editorial
Prompt
Actúa como diseñador de iconos y responsable de un sistema de diseño.
Contexto:
- Producto: {{producto}}
- Personalidad de marca: {{personalidad}}
- Estilo de icono: {{estilo}}
- Tamaño de retícula base: {{reticula}}
- Iconos que necesitamos: {{iconos}}
Entregables:
1. Principios de estilo (3-5) derivados de la personalidad de marca, con ejemplos de cómo se aplican.
2. Retícula y keylines: tamaño del lienzo, zona activa, margen de seguridad y formas guía (círculo, cuadrado, rectángulos vertical y horizontal) con sus medidas.
3. Reglas de construcción: grosor de trazo, radio de esquinas, terminaciones, ángulos permitidos, tratamiento de huecos y detalles mínimos.
4. Tamaños de uso (por ejemplo 16, 20, 24, 32) y cuándo hace falta una versión ajustada ópticamente.
5. Tabla de metáforas para cada icono solicitado: metáfora propuesta, alternativa, riesgo de ambigüedad o diferencias culturales y si debe ir siempre acompañado de texto.
6. Nomenclatura de archivos y componentes, y reglas de exportación SVG: viewBox, sin rellenos fijos (currentColor), trazos convertidos o no según el caso y optimización.
7. Accesibilidad: iconos decorativos frente a informativos, aria-hidden, nombre accesible en botones de solo icono, contraste mínimo 3:1 y área táctil de 44-48 px independiente del tamaño del icono.
8. Checklist de revisión antes de añadir un icono nuevo al set.
Restricciones:
- No copies ni imites sets de iconos de terceros; si recomiendas partir de una librería abierta, recuérdame revisar su licencia.
- Usa [COMPLETAR] para decisiones de marca que no estén en el contexto.
- Si el listado de iconos es ambiguo, pregúntame qué acción representa cada uno antes de proponer metáforas.
Formato: guía con encabezados, tablas de medidas y metáforas, y checklist final.Cómo usarlo
- Lista los iconos que necesitas con la acción o el concepto que representan. 2. Revisa la tabla de metáforas con usuarios o con el equipo de producto. 3. Prepara una plantilla de retícula en tu herramienta de diseño con las medidas propuestas.
Ejemplo de uso
Producto: app de banca · Personalidad: fiable y cercana · Estilo: contorno con relleno en estado activo · Retícula: 24 px · Iconos: transferir, tarjeta, bizum, alertas.
Resultado de ejemplo
Principios de estilo
- Fiable: formas geométricas estables, sin trazos inclinados innecesarios.
- Cercana: esquinas redondeadas de 2 px y terminaciones redondas.
- Sencilla: máximo tres elementos por icono; si necesita más, la metáfora no funciona.
Retícula y construcción (24 px)
| Elemento | Medida |
|---|---|
| Lienzo | 24 × 24 px |
| Área activa | 20 × 20 px (2 px de margen) |
| Círculo guía | Ø 20 px |
| Cuadrado guía | 18 × 18 px |
| Trazo | 1,5 px, terminaciones redondas |
| Radio de esquina | 2 px |
| Estado activo | Mismo dibujo con relleno sólido |
Tabla de metáforas
| Icono | Metáfora | Alternativa | Riesgo | ¿Etiqueta siempre? |
|---|---|---|---|---|
| Inicio | Casa | Cuadrícula | Bajo | Sí, en barra inferior |
| Transferir | Dos flechas opuestas | Flecha a persona | Puede confundirse con «cambiar» | Sí |
| Pagos con el móvil | Móvil con ondas | Mano con móvil | Ondas = wifi | Sí |
| Ahorro | Hucha | Moneda con flecha arriba | La hucha es poco universal | Sí |
| Alertas | Campana | — | Bajo | En botón solo icono: nombre accesible |
Exportación SVG
viewBox="0 0 24 24", sin rellenos fijos:stroke="currentColor".- Nombre de archivo:
icon-transfer-outline.svg/icon-transfer-filled.svg…
Datos clave
- Categoría
- Diseño UI/UX · Design systems
- Tipo de resultado
- Texto
- Nivel
- Intermedio
- Pensado para
- ChatGPT, Claude, Gemini y Microsoft Copilot
- Verificado en
- Pendiente de verificación editorial
- Variables
- Producto, Personalidad de marca, Estilo de icono, Retícula base y Iconos necesarios
- Idioma
- Español
- Precio
- Gratis, sin registro
- Actualizado
- 07/11/2026
Preguntas frecuentes
¿Qué tamaño de retícula conviene para iconos de interfaz?
La retícula de 24 px es la más habitual en interfaces, con versiones a 16 o 20 px para espacios densos. Lo importante es mantener el mismo grosor de trazo aparente en todos los tamaños.
¿Los iconos necesitan siempre texto?
No siempre, pero los iconos poco universales deberían ir acompañados de una etiqueta. Los botones de solo icono necesitan, como mínimo, un nombre accesible para lectores de pantalla.
¿Para qué sirve este prompt?
Crea la guía de estilo de tu set de iconos: retícula y keylines, grosor de trazo, esquinas, tamaños, metáforas para cada icono, nomenclatura, exportación SVG, accesibilidad y checklist de revisión.
¿Con qué herramientas de IA funciona?
Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.
¿Cómo personalizo el prompt?
Pulsa «Personalizar» y rellena las variables (Producto, Personalidad de marca, Estilo de icono, Retícula base y Iconos necesarios). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.
¿Necesito experiencia para usarlo?
Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.
¿Este prompt es gratis?
Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.
¿Puedo fiarme del resultado de la IA?
Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.