6 enero 2026
¿Iconos desalineados? El bug del «Bounding Box» en Figma y cómo arreglarlo en CSS
¿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:
- Flatten Shapes: Selecciona el icono y pulsa
Cmd + E(Mac) oCtrl + E(Windows) para simplificar los vectores. - Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
- 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.
