Por qué desaparecen los iconos al importar una web a Figma

Llega todo menos los iconos. Cuadrados vacíos, cuadrados negros o rectangulitos donde estaban los chevrones. Hay cuatro causas, y cuál te ha tocado decide si tiene arreglo.

Pasas una página a Figma y llega todo menos los iconos. Donde estaban los chevrones, la lupa y las flechitas de enlace externo hay cuadrados vacíos, manchas negras o nada.

No es un solo fallo. En la web los iconos se dibujan de cuatro maneras completamente distintas, y cada una se rompe de forma diferente. Saber cuál tienes delante te dice si tiene arreglo y cuál.

Los cuatro tipos y cómo falla cada uno

1. SVG en línea

El caso fácil. El icono está escrito directamente en el HTML como un elemento <svg> con sus paths dentro. Cualquier conversor que lea el DOM ve la geometría y puede entregarle un vector a Figma.

Cuando falla suele ser porque el conversor ha aplastado algo: una referencia <use> a un símbolo definido en otro sitio, un filter de CSS, o un relleno currentColor que se queda sin color al salir de su cascada.

2. Sprites SVG

Un archivo guarda todos los iconos como <symbol>, y cada sitio donde aparece un icono contiene solo una referencia.

<svg class="icon"><use href="/icons.svg#chevron-down" /></svg>

Eficiente en la web, invisible para un conversor ingenuo. El elemento del DOM no contiene paths. Si lo lees literalmente obtienes un <svg> vacío, y por eso los sprites llegan tan a menudo como cajas en blanco del tamaño correcto.

Resolverlos significa seguir la referencia, descargar el archivo de sprites, buscar el símbolo por su id e incrustar la geometría. Y si el sprite está en otro origen, esa descarga tiene que estar permitida siquiera.

3. Fuentes de iconos

El icono es un carácter de una fuente. Font Awesome, Material Icons y cualquier fuente de iconos interna funcionan así: un elemento con una clase, un pseudoelemento ::before y una propiedad content con un codepoint del área de uso privado de Unicode.

.fa-search::before { content: "\f002"; }

Fallan dos cosas. Primero, el icono vive en un pseudoelemento, que no está en el DOM: por mucho que recorras el árbol de elementos, no aparece. Segundo, si un conversor sí lo captura como texto, llega a Figma como el carácter literal, y sin la fuente de iconos instalada Figma dibuja lo que tenga de reserva: una caja vacía o un glifo cualquiera.

De ahí viene el síntoma clásico de una página importada llena de rectangulitos donde deberían estar los iconos.

4. Iconos con máscara CSS

Merece apartado propio porque es cada vez más común y falla de una forma que parece un acierto. El elemento no tiene contenido: tiene un color de fondo y una máscara.

.icon {
  background-color: currentColor;
  -webkit-mask-image: url(/icons/search.svg);
  mask-size: contain;
}

La forma vive en la imagen de máscara y el color vive en el elemento. Un conversor que lea el fondo obtiene un rectángulo sólido del color del icono. Por eso estos llegan como cuadrados negros o de color en lugar de como nada: el color está bien y la forma ha desaparecido.

Los sitios de documentación hechos con VitePress usan mucho este patrón. Así dimos con ello: alguien nos avisó de que en un sitio de documentación todos los iconos se habían importado como cuadrados negros.

Por qué los conversores los pierden

Porque cubrir los cuatro significa hacer cuatro cosas distintas, y tres de ellas exigen más que leer el DOM.

• Los sprites necesitan que se descargue el archivo referenciado y se extraiga el símbolo.
• Las fuentes de iconos necesitan leer los estilos del pseudoelemento, resolver el codepoint y dibujar el glifo como vector en vez de pasarlo como texto.
• Los iconos con máscara necesitan descargar la imagen de máscara y aplicar el color del elemento a la forma resultante, no a un rectángulo.

Un conversor que solo recorre el DOM y copia lo que encuentra resuelve el primer caso y falla en silencio en el resto. Es el comportamiento habitual, no la excepción.

Cómo saber cuál tienes

Abre la página, botón derecho sobre el icono, inspeccionar. En treinta segundos lo sabes.

Qué hace Snapture con cada uno

Los cuatro están cubiertos, y conviene ser concreto, porque «soportamos iconos» lo dice cualquier herramienta.

• El SVG en línea pasa como geometría vectorial. Cuando un SVG es tan complejo que el importador de Figma se atragantaría —máscaras anidadas, filtros, foreignObject— se rasteriza. Es una degradación deliberada, no un fallo silencioso.
• Los sprites se resuelven siguiendo la referencia <use>, descargando el sprite e incrustando la geometría del símbolo referenciado con su viewBox correcta.
• Las fuentes de iconos se detectan leyendo el content calculado del pseudoelemento, y el glifo se dibuja como forma en lugar de pasarse a Figma como carácter. El resultado no depende de que tengas instalada la fuente.
• Los iconos con máscara CSS se resuelven descargando la imagen de máscara y aplicando el color propio del elemento a la forma resultante, así que llegan como el icono en su color real y no como un rectángulo relleno.

En la medición publicada en la página de mediciones, la portada de Linear produjo 215 nodos vectoriales y la de Stripe 153. Casi todo eso es trabajo de iconos, y ahí está la diferencia entre un archivo editable y uno con agujeros.

Si ya tienes un archivo con los iconos rotos

Un cuadrado negro rasterizado no tiene arreglo; la información de la forma nunca llegó al archivo. Vuelve a importar con una herramienta que resuelva tu caso.

La única excepción son las fuentes de iconos. Si entraron como caracteres de texto y tienes la fuente instalada, Figma los dibujará bien en tu equipo, pero se romperán para cualquiera que abra el archivo sin esa fuente. Merece la pena reimportar igualmente antes que entregar un archivo que solo funciona contigo.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia