Iconos SVG para diseño UI: la guía completa 2026

Por qué los iconos SVG son la única opción seria para UI en producción

Las icon fonts tuvieron su momento. Los sprites PNG también. Ambos son problemas en cualquier design system que necesite escalar entre breakpoints, temas de color y requisitos de accesibilidad. Los iconos SVG son la única opción arquitectónicamente sólida para equipos que lanzan interfaces en producción.

Un icono SVG es un nodo DOM de primera clase. Responde a propiedades CSS custom, participa en el árbol de accesibilidad, escala sin pérdida de calidad y se anima con transiciones CSS estándar. Las icon fonts secuestran el Área de Uso Privado de Unicode, fallan bajo políticas de bloqueo de fuentes y ofrecen exactamente un color por glifo.

"

Los iconos son el vocabulario de una interfaz de usuario. Si el vocabulario está mal, cada frase que el producto pronuncia se vuelve confusa.

Principios de diseño de iconos: cuadrícula, trazo y consistencia óptica

El estándar de cuadrícula 24×24

Cada icono en un sistema coherente comienza en el mismo lienzo. La cuadrícula de 24×24 píxeles se divide uniformemente en tamaños comunes (12, 16, 20, 48) y se alinea a una sub-cuadrícula de 1 px, eliminando la desalineación óptica cuando los iconos están junto a texto o dentro de botones.

Consistencia de trazo y peso visual

Un trazo de 2 px a 24×24 escala de forma predecible: a 16 px se convierte en ~1,33 px (nítido en pantallas 2x), a 48 px se convierte en 4 px. El error que cometen los equipos es mezclar trazos de 1,5, 2 y 3 px en un mismo set.

• Un solo ancho de trazo por set. Elige 1,5 px o 2 px y aplícalo globalmente.
• Estilos de extremo y unión consistentes. Los extremos redondeados van con uniones redondeadas. Nunca mezclar.
• Corrección óptica para curvas. Un círculo de 20 px parece más pequeño que un cuadrado de 20 px — ajusta a 20,5 px.

Arquitectura de un sistema de iconos SVG

Existen cuatro patrones dominantes para entregar iconos SVG al navegador. Cada uno tiene compromisos según tu framework, presupuesto de peso y estrategia de caché.

Patrón SVG Sprite

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20,6 9,17 4,12" fill="none"
      stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<!-- Referencia en cualquier parte -->
<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-check"/>
</svg>

Patrón Componente React

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  label?: string;
}

export function CheckIcon({ size = 24, label, ...props }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={2}
      role={label ? 'img' : undefined}
      aria-label={label} aria-hidden={label ? undefined : true}
      {...props}>
      <polyline points="20,6 9,17 4,12" />
    </svg>
  );
}

Requisitos de accesibilidad

Cada icono SVG es decorativo o significativo. Cada uno tiene una implementación no negociable.

Decorativo (junto a texto visible — ocultar de lectores de pantalla):

<button>
  <svg aria-hidden="true" focusable="false"><!-- icono --></svg>
  Guardar documento
</button>

Significativo (único elemento interactivo — debe anunciarse):

<button aria-label="Cerrar diálogo">
  <svg role="img" aria-labelledby="close-title" focusable="false">
    <title id="close-title">Cerrar</title>
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Modo oscuro y tematización con propiedades CSS custom

Un sistema de iconos bien arquitectado se tematiza automáticamente. El mecanismo es currentColor combinado con propiedades CSS custom:

:root {
  --icon-color-primary: #1a1a2e;
  --icon-color-success: #059669;
  --icon-size-md: 24px;
  --icon-stroke: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --icon-color-primary: #e5e7eb;
    --icon-color-success: #34d399;
  }
}

.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: var(--icon-color-primary);
  stroke-width: var(--icon-stroke);
  transition: stroke 0.2s ease;
}

Cambiar a modo oscuro es un cambio cero código de iconos. Los tokens se actualizan y cada icono sigue. Para multi-branding, añade una clase .theme-brand-b que sobreescriba las mismas propiedades.

Optimización de rendimiento

Pasa cada icono por el optimizador SVG de VectoSolve o SVGO antes de hacer commit. Un icono 24×24 típico debería pesar entre 200 y 500 bytes después de la optimización.

• SVG inline para iconos críticos above-the-fold (navegación, CTAs hero). Cero overhead de red.
• Sprite sheet externo para iconos below-the-fold. Una petición, caché largo.
• import() dinámico para iconos raramente vistos (paneles admin, estados de error).

Establece siempre width y height explícitos en elementos SVG para evitar el Cumulative Layout Shift (CLS) — una penalización de Core Web Vitals.

Flujo de trabajo de exportación Figma-a-SVG

1. Organizar en Figma. Página dedicada a iconos. Cada icono en un frame 24×24 nombrado icon/check, icon/alert-triangle, etc.
2. Aplanar y vectorizar. Aplana grupos booleanos y vectoriza trazos antes de exportar para evitar diferencias de renderizado.
3. Exportar como SVG. Usa la exportación nativa de Figma con "Outline text" activado e "Include id" desactivado.
4. Optimizar. Pasa por el optimizador de VectoSolve para eliminar metadatos y reducir la precisión.
5. Validar. Confirma que los trazados se renderizan correctamente a 16, 24 y 48 px.
6. Generar componentes. Usa SVGR o un script custom para convertir SVGs en componentes de framework. Commitea tanto archivos .svg como componentes generados.

Animación de iconos y micro-interacciones

La animación sutil convierte iconos estáticos en feedback reactivo. Las mejores animaciones de iconos duran menos de 300 ms y comunican un cambio de estado claro.

Animación de trazo

.icon-check polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.checkbox:checked + .icon-check polyline {
  stroke-dashoffset: 0;
}

Rotación y morphing

.icon-loading { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Construye tu sistema de iconos hoy

Un sistema de iconos SVG de calidad producción es una inversión en cada interfaz que tu equipo entrega. Empieza con la cuadrícula. Impón el trazo. Automatiza el pipeline.

VectoSolve proporciona herramientas para convertir, optimizar y editar iconos SVG en cada etapa — desde la conversión raster a vector hasta la optimización SVG y la edición SVG en vivo. Tu sistema de iconos es el vocabulario que tu producto usa para comunicar. Haz que cada glifo cuente.

Fuentes y lecturas adicionales

• MDN Web Docs: SVG Icons — Referencia técnica para elementos SVG, roles ARIA y marcado de iconos accesibles
• CSS-Tricks: SVG Icon Systems — Guía completa para construir sprite sheets SVG y bibliotecas de componentes de iconos
• web.dev: Web Performance — Mejores prácticas de Google para cargar y renderizar assets de iconos eficientemente
• Smashing Magazine: Icon Design — Principios de diseño UI para sistemas de iconos consistentes y pixel-perfect