Diseñar interfaces móviles consistentes empieza por elegir bien la iconografía. SF Symbols y Material Symbols son los sistemas oficiales de iconos para iOS y Android, y dominarlos te permite crear experiencias coherentes con cada plataforma sin sacrificar identidad visual.

A continuación verás cómo aplicarlos en componentes reales como la tab bar y la navigation bar, qué reglas seguir y cómo extender ambas librerías dentro de Figma.

Qué es SF Symbols y cómo se integra con iOS

SF Symbols es la biblioteca de iconografía nativa de iOS. Su nombre viene de la tipografía San Francisco, y esa relación no es casual: los iconos heredan las propiedades del texto, así que se ajustan automáticamente al peso y tamaño de la fuente con la que conviven [01:00].

La librería supera los 4.000 iconos categorizados en transporte, mapas, dispositivos, cámara, videojuegos y más. Puedes explorarlos desde la app de SF Symbols en macOS y copiarlos directo en Figma.

¿Qué es SF Symbols? Es el sistema de iconos de iOS basado en la tipografía San Francisco. Tiene más de 4.000 símbolos que se ajustan al peso y tamaño del texto, y soporta Dynamic Type para accesibilidad.

Cómo usar SF Symbols correctamente

Apple define recomendaciones claras para mantener la coherencia visual de la plataforma:

• Usa el icono adecuado para cada función y no cambies su significado.
• Respeta sus variantes y pesos tipográficos sin editar la estructura.
• Garantiza la accesibilidad probando los iconos en distintos tamaños y fondos.
• Alinea los iconos con textos y botones para mantener el ritmo visual.

En macOS, abres la app de SF Symbols, eliges el icono, lo copias con comando C y lo pegas directamente en el campo symbol del componente en Figma [03:30].

Caso práctico: tab bar y navigation bar en iOS

El componente tab bar de iOS permite entre 3 y 5 secciones [02:50]. En el ejemplo de una app de cine, las secciones definidas son cartelera, próximamente, mis boletos, alimentos y mi perfil.

Para cartelera se usa movie clipper en su versión con relleno, porque la sección está activa. Para mis boletos, ticket sin relleno. Para alimentos, popcorn. La regla es simple: solo el icono seleccionado va relleno, el resto en outline [05:40].

La navigation bar funciona distinto. Permite hasta 3 iconos en iPhone y hasta 6 en iPad, o solo opciones de texto. Aquí siempre se usan iconos sin relleno, porque el componente está pensado para elementos más pequeños donde la legibilidad importa más que el énfasis.

Qué es Material Symbols y cómo se aplica en Android

Material Symbols es el sistema de iconografía de Android, basado en los principios de Material Design [07:20]. Permite ajustar grosor, peso y opacidad, igual que SF Symbols, pero su lógica de implementación es distinta: funciona con vectores que debes incorporar manualmente a tu librería.

Google recomienda usarlos en su versión predeterminada para mantener coherencia con el resto del ecosistema Android.

¿En qué se diferencian SF Symbols y Material Symbols? SF Symbols es tipográfico y se copia directo desde la app de macOS. Material Symbols es vectorial y requiere un plugin de Figma para importar cada icono como componente reutilizable.

Cómo extender la librería con el plugin de Material Symbols

El plugin oficial de Material Symbols en Figma deja buscar, personalizar y exportar iconos. El flujo para agregar uno nuevo a tu sistema de diseño es:

1. Abrir el plugin y mantener el peso por defecto en 400.
2. Buscar el icono (por ejemplo movie) y elegir entre versión fill o off según el estado.
3. Insertar el icono y convertirlo en componente.
4. Eliminar el bounding box que genera el plugin y renombrar la capa como icon en minúsculas.
5. Pegar las propiedades del color del sistema, como M3 System Light on Surface, para que herede los tokens.

Siempre que el icono tenga versión con relleno y sin relleno, agrega ambas. Algunos componentes las requieren porque diferencian estados activos de inactivos [11:50].

Bottom bar y navigation bar en Android

La bottom bar en Android también admite entre 3 y 5 tabs, y se ajusta automáticamente al cambiar la cantidad. Puedes mostrar iconos con label, solo iconos o solo texto.

Para editar cada tab, haces doble clic hasta llegar al nav item correspondiente y cambias el label y el icono desde la librería que extendiste con el plugin. La sección activa usa el icono con relleno; las inactivas, sin relleno.

Cómo crear iconos personalizados que respeten Material Design

Cuando no encuentras un icono que represente tu funcionalidad, como un símbolo de palomitas para una app de cine, puedes crear uno propio. La condición es respetar las guías de Material Design.

La documentación oficial cubre:

• Sistema de grid y pixel perfect.
• Ajustes de tamaño óptico para que el icono se vea balanceado.
• Reglas sobre proporciones, terminaciones y trazos.
• Ejemplos de qué hacer y qué evitar al diseñar un icono nuevo.

Seguir esas reglas asegura que tu icono custom conviva con el resto de Material Symbols sin romper la coherencia visual.

Por qué la iconografía nativa mejora la usabilidad

Usar SF Symbols en iOS y Material Symbols en Android no es solo una decisión estética. Los usuarios ya reconocen estos símbolos por su uso constante en el sistema operativo, lo que reduce la curva de aprendizaje y mejora la usabilidad percibida.

Además, ambos sistemas están preparados para accesibilidad: SF Symbols con Dynamic Type y Material Symbols con sus tokens de color y tamaño. Aprovecharlos te ahorra trabajo y te alinea con las expectativas de cada plataforma.

Ahora te toca a ti: analiza la versión web de tu app, identifica qué iconos necesitas y extiende la biblioteca en iOS y Android. Comparte una captura en los comentarios para recibir feedback.