UX / UI
Íconos con texto
Si hay que adivinar, no sirve.
Los íconos con texto se entienden a la primera. Un ícono solo obliga a tu usuario a adivinar, y casi ninguno es tan universal como crees.
3 demos interactivas
Guía gratis por DM
UX / UI
Mira el reel · 1 min
01
Tú sabes qué significa. Tu usuario no.
Usar íconos con texto es la forma más simple de que una navegación se entienda sin pensar. Tú diseñaste la app y sabes qué hace cada ícono; tu usuario la abre por primera vez.
¿El corazón es guardar, favoritos o me gusta? ¿La flecha hacia arriba es compartir, subir o exportar? Cada duda es un toque de prueba y error. Y si se equivoca dos veces, deja de explorar.
Muy pocos íconos son universales: la lupa, la X de cerrar, el play. El resto necesita una palabra corta debajo.
La regla de oro
Un ícono sin texto solo funciona si es universal. Casi ninguno lo es.
02
Arregla la barra de navegación
Mira la corrección completa o toca cada paso: nombra, recorta, marca y unifica.
03
Así no / así sí
Hay que adivinar.
Solo íconos: cada uno admite varias lecturas y tu usuario prueba hasta acertar.
Se entiende a la primera.
Ícono + una palabra corta. Nadie duda y la barra sigue viéndose limpia.
04
¿Cuáles pueden ir solos?
La lupa, la X o el play se entienden sin texto. El corazón, la estrella o la nube, no.
05
Cómo arreglar tu barra hoy
1
Nombra
Ponle a cada ícono una etiqueta de una o dos palabras: Inicio, Buscar, Favoritos, Perfil.
2
Recorta
Deja máximo cinco opciones. Lo que es una acción, como compartir, sale de la barra y va junto al contenido que comparte.
3
Marca
La pantalla activa va con color y relleno. Las demás, en gris. Así el usuario siempre sabe dónde está.
4
Unifica
Una sola familia de íconos: mismo estilo (todo línea o todo relleno) y mismo grosor de trazo.
06
Antes de publicar
- ¿Cada ícono de la navegación tiene su etiqueta?
- ¿La barra tiene cinco opciones o menos?
- ¿Las acciones (compartir, descargar) están fuera de la navegación?
- ¿Se nota cuál es la pantalla activa?
- ¿Todos los íconos son de la misma familia y el mismo grosor?
COMENTA
“ICONOS”
y te envío
la guía
por DM
La guía de íconos con texto en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Los íconos deben llevar texto?
En la navegación, sí. Salvo unos pocos universales (buscar, cerrar, reproducir), un ícono solo admite varias lecturas. Una etiqueta corta elimina la duda sin ocupar casi espacio.
¿Cuántas opciones debe tener una barra de navegación inferior?
Entre tres y cinco. Con más, los toques quedan muy juntos y las etiquetas no caben. Lo que sobra va en una pantalla de perfil o en un menú «Más».
¿Puedo mezclar íconos de línea y rellenos?
Usa un solo estilo y un solo grosor para toda la familia. La excepción útil es la pantalla activa: va rellena y en color para marcar dónde estás.
Sigue aprendiendo
Conceptos
relacionados
Menú hamburguesa
Reel · 3 demos
Cuándo usar el menú hamburguesa y cómo armar un menú de escritorio que sí se usa.
Eco de forma
2 demos
Repite una forma o un ángulo en 3 lugares y todo se ve de la misma familia.
Principio KISS
2 demos
Hazlo corto y simple: quita hasta que no sobre nada y el mensaje se lea en 3 segundos.