ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.