Iconos de apps móviles: mejores prácticas SVG para iOS y Android

Todo desarrollador móvil ha vivido este momento: integras un icono bellamente diseñado en tu app, compilas, lanzas el simulador — y ves una forma borrosa, desalineada o completamente invisible. El icono se veía perfecto en Figma, impecable en el navegador. Pero en un dispositivo real, algo salió mal.

La brecha entre diseñar un icono SVG y entregarlo dentro de una app móvil nativa es más amplia de lo que la mayoría de equipos imaginan. iOS y Android manejan assets vectoriales a través de pipelines completamente diferentes.

Por qué los iconos SVG importan para el móvil

Las pantallas móviles vienen en una variedad mareante de tamaños y densidades de píxeles. Un dispositivo Android moderno puede funcionar a 1x, 1.5x, 2x, 3x o incluso 4x. Los iPhones vienen en 2x y 3x.

Los iconos SVG resuelven esto definiendo formas matemáticamente. Un archivo, resolución infinita. Pero "solo usa SVGs" subestima la complejidad involucrada.

Beneficios de hacerlo bien:

• Bundles de app más pequeños — un asset vectorial reemplaza 4-5 exportaciones raster
• Renderizado pixel-perfect en cada densidad de pantalla
• Mantenimiento más fácil — actualiza un archivo fuente, regenera todos los targets
• Mejor accesibilidad — las formas vectoriales pueden llevar metadatos semánticos
• A prueba de futuro — sin re-exportación cuando surgen nuevas densidades

"

Redujimos nuestra carpeta de assets de iconos de 2.400 archivos a 380 al cambiar a un pipeline vector-first. Los tiempos de build bajaron y los handoffs de diseño se simplificaron.

Preparar SVGs para exportación móvil

Antes de pensar en formatos específicos, tus SVGs fuente necesitan estar limpios. Los motores de renderizado móvil son mucho menos tolerantes que los navegadores web.

La checklist SVG limpio

1. Aplana todas las transformaciones. Las transforms CSS y SVG en elementos grupo a veces serán ignoradas por los conversores móviles.

2. Vectoriza todos los trazos. El formato VectorDrawable de Android tiene soporte limitado de strokes. Convierte los trazos a paths rellenos.

3. Elimina capas ocultas y metadatos. Las herramientas de diseño integran metadatos, capas ocultas y definiciones sin usar.

4. Usa un viewBox consistente. Estandariza en 0 0 24 24 para iconos UI.

5. Simplifica los paths. Menos puntos = archivos más pequeños, renderizado más rápido.

Ejemplo de icono SVG correctamente limpiado:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
        fill="currentColor"/>
</svg>

iOS: Asset Catalogs y vectores PDF

El enfoque recomendado por Apple para iconos vectoriales es usar assets PDF dentro de Xcode Asset Catalogs. Desde Xcode 12, Apple también soporta assets SVG directamente, pero PDF sigue siendo el camino más probado.

Configuración de assets vectoriales en Xcode

1. Abre tu Asset Catalog (.xcassets)
2. Crea un nuevo Image Set
3. En el inspector de atributos, establece Scales a "Single Scale"
4. Establece Resizing a "Preserve Vector Data"
5. Arrastra tu archivo PDF o SVG

<!-- Contents.json para un asset vectorial -->
{
  "images" : [
    {
      "filename" : "icon-settings.svg",
      "idiom" : "universal"
    }
  ],
  "properties" : {
    "preserves-vector-representation" : true
  }
}

Tamaños de iconos iOS

Al diseñar iconos SVG para estos tamaños, prueba primero al tamaño más pequeño.

Android: Vector Drawables

Android maneja iconos vectoriales a través de su propio formato XML llamado VectorDrawable. Es esencialmente un subconjunto de SVG.

Conversión SVG a VectorDrawable

Android Studio incluye un conversor integrado: Vector Asset Studio (File → New → Vector Asset).

<!-- res/drawable/ic_check_circle.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tintMode="src_in"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zm-2,15l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

Uso de Vector Drawables en layouts

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    app:srcCompat="@drawable/ic_check_circle"
    android:contentDescription="@string/check_icon_desc" />

Referencia de tamaños de iconos Android

Con VectorDrawable, defines los iconos una vez en dp y el sistema maneja el escalado automáticamente.

Pipeline automatizado de iconos

Las exportaciones manuales son fuente de inconsistencias. Mantén un SVG fuente único para cada icono y automatiza las conversiones.

Paso 1: Optimizar el SVG fuente

/* Ejemplo config SVGO (svgo.config.js) */
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',
    'removeXMLNS',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-*', 'class']
      }
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          { xmlns: 'http://www.w3.org/2000/svg' }
        ]
      }
    }
  ]
};

Paso 2: Generar assets por plataforma

Convierte los SVGs optimizados a:

• PDF para iOS (usando svgexport o cairosvg)
• VectorDrawable XML para Android (usando svg2vectordrawable)
• SVG optimizado para web/PWA

Paso 3: Validar la salida

• Verificar tamaños de archivo (alertar por encima de 5KB)
• Verificar consistencia del viewBox
• Escanear elementos no soportados
• Renderizar a tamaños objetivo y comparar con capturas de referencia

Errores comunes y cómo corregirlos

1. Usar trazos en lugar de rellenos

Problema: Un icono usa paths con trazo que se ven bien en el navegador pero renderizan con grosor inconsistente en móvil.

Corrección: Convierte todos los trazos a rellenos antes de exportar. En Figma: "Outline Stroke". En Illustrator: Objeto → Trazado → Contornear trazo.

2. ViewBox no estándar

Problema: Los iconos tienen viewBox inconsistentes.

Corrección: Estandariza en un viewBox único. 0 0 24 24 es la convención más común.

3. Fuentes y texto incrustados

Corrección: Convierte todo el texto a paths antes de exportar. Siempre. Sin excepciones.

4. Olvidar el modo oscuro

Corrección: Usa currentColor como valor de relleno. En iOS, usa el modo de renderizado template. En Android, aplica tintes vía android:tint.

5. Ignorar la accesibilidad

Corrección: Siempre establece contentDescription en Android y accessibilityLabel en iOS.

Consideraciones de rendimiento

Uniendo todo

1. Diseña iconos en una grilla estandarizada (24x24 recomendado) con paths rellenos, sin trazos, sin texto, sin efectos incrustados
2. Limpia el SVG — aplana transforms, vectoriza trazos, elimina metadatos, optimiza con SVGO
3. Convierte a formatos de plataforma — PDF/SVG para iOS Asset Catalogs, VectorDrawable XML para Android
4. Valida — verifica tamaños, renderiza a tamaños objetivo, verifica labels de accesibilidad
5. Automatiza — intégralo en tu CI/CD

Si trabajas con iconos raster existentes o logos complejos que necesitan convertirse a vectores limpios, VectoSolve puede encargarse del trabajo pesado. Nuestro motor de vectorización con IA produce SVGs limpios y optimizados, listos para pipelines de exportación móvil.