30 août 2026

Pourquoi les icônes disparaissent quand vous importez une page web dans Figma

Tout arrive sauf les icônes. Boîtes vides, carrés noirs, ou petits rectangles là où étaient les chevrons. Il y a quatre causes, et celle qui vous concerne décide si c'est réparable.

Vous faites passer une page dans Figma et tout arrive sauf les icônes. Là où il y avait les chevrons, la loupe et les petites flèches de lien externe, il y a des carrés vides, des taches noires, ou rien du tout.

Ce n'est pas un seul bug. Sur le web, les icônes sont dessinées de quatre manières complètement différentes, et chacune casse à sa façon. Savoir laquelle vous avez sous les yeux vous dit si c'est réparable et comment.

La même page, quatre techniques d'icônes. À gauche de chaque paire, ce que montre le navigateur ; à droite, ce que produit un convertisseur qui rate la technique.

Les quatre types et leur manière d'échouer

1. SVG en ligne

Le cas facile. L'icône est écrite directement dans le HTML sous forme d'élément <svg> avec ses paths à l'intérieur. Tout convertisseur qui lit le DOM voit la géométrie et peut remettre un vecteur à Figma.

Quand ça échoue, c'est en général que le convertisseur a écrasé quelque chose : une référence <use> vers un symbole défini ailleurs, un filter CSS, ou un remplissage currentColor qui n'a plus de couleur une fois sorti de sa cascade.

2. Sprites SVG

Un fichier contient toutes les icônes sous forme de <symbol>, et chaque endroit où une icône apparaît ne contient qu'une référence.

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

Efficace sur le web, invisible pour un convertisseur naïf. L'élément dans le DOM ne contient aucun path. Lu littéralement, on obtient un <svg> vide : voilà pourquoi les sprites arrivent si souvent en boîtes blanches à la bonne taille.

Les résoudre suppose de suivre la référence, de récupérer le fichier de sprites, de trouver le symbole par son id et d'incorporer la géométrie. Et si le fichier est sur une autre origine, il faut déjà que cette récupération soit autorisée.

3. Polices d'icônes

L'icône est un caractère dans une police. Font Awesome, Material Icons et toute police d'icônes maison fonctionnent ainsi : un élément avec une classe, un pseudo-élément ::before, et une propriété content contenant un point de code de la zone privée d'Unicode.

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

Deux choses tournent mal. D'abord l'icône vit dans un pseudo-élément, qui n'est pas dans le DOM : on a beau parcourir l'arbre, elle n'y est pas. Ensuite, si un convertisseur la capture quand même en tant que texte, elle arrive dans Figma en tant que caractère littéral, et sans la police d'icônes installée, Figma affiche ce qu'il a en repli : une boîte vide, ou un glyphe quelconque.

C'est de là que vient le symptôme classique d'une page importée remplie de petits rectangles à la place des icônes.

4. Icônes en masque CSS

Elles méritent leur propre section : le procédé se répand et échoue d'une manière qui ressemble à une réussite. L'élément n'a aucun contenu ; il a une couleur de fond et un masque.

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

La forme est dans l'image de masque, la couleur est sur l'élément. Un convertisseur qui lit le fond obtient un rectangle plein de la couleur de l'icône. C'est pourquoi celles-ci arrivent souvent en carrés noirs ou colorés plutôt qu'en rien : la couleur est bonne, la forme a disparu.

Les sites de documentation sous VitePress utilisent beaucoup ce motif. C'est comme ça que nous sommes tombés dessus : quelqu'un nous a signalé que sur un site de doc, chaque icône avait été importée en carré noir.

Pourquoi les convertisseurs les manquent

Parce que couvrir les quatre suppose quatre traitements différents, et que trois d'entre eux demandent plus que lire le DOM.

Les sprites exigent de récupérer le fichier référencé et d'en extraire le symbole.
Les polices d'icônes exigent de lire les styles du pseudo-élément, de résoudre le point de code et de dessiner le glyphe en vecteur plutôt que de le transmettre comme texte.
Les icônes en masque exigent de récupérer l'image de masque et d'appliquer la couleur de l'élément à la forme obtenue, pas à un rectangle.

Un convertisseur qui se contente de parcourir le DOM et de copier ce qu'il trouve réussit le premier cas et échoue silencieusement sur les autres. C'est le comportement courant, pas l'exception.

Comment savoir dans quel cas vous êtes

Ouvrez la page, clic droit sur l'icône, inspecter. Trente secondes suffisent.

Ce que montre l'inspecteur	Type	Échec habituel
`<svg>` avec un `<path>` dedans	SVG en ligne	En général correct
`<svg>` avec `<use href="…#id">`	Sprite	Boîte vide
`<i>` ou `<span>` avec une classe d'icône et sans enfant	Police d'icônes	Rectangle de glyphe manquant
Élément avec `mask-image` dans les styles calculés	Masque CSS	Carré de couleur pleine

Ce que Snapture fait de chacun

Les quatre sont pris en charge, et autant être précis, parce que « nous gérons les icônes », tous les outils le disent.

Le SVG en ligne passe en géométrie vectorielle. Quand un SVG est trop complexe pour l'importeur de Figma — masques imbriqués, filtres, foreignObject — il est rastérisé à la place. Une dégradation assumée, pas un échec silencieux.
Les sprites sont résolus en suivant la référence <use>, en récupérant le sprite et en incorporant la géométrie du symbole référencé avec la bonne viewBox.
Les polices d'icônes sont détectées en lisant le content calculé du pseudo-élément, et le glyphe est dessiné en forme au lieu d'être transmis à Figma en tant que caractère. Le résultat ne dépend pas de la présence de la police chez vous.
Les icônes en masque CSS sont résolues en récupérant l'image de masque et en appliquant la couleur propre de l'élément à la forme obtenue : l'icône arrive dans sa vraie couleur, pas en rectangle rempli.

Dans la série de mesures publiée sur la page de mesures, la page d'accueil de Linear a produit 215 nœuds vectoriels et celle de Stripe 153. L'essentiel, c'est du travail d'icônes, et c'est là que se joue la différence entre un fichier modifiable et un fichier troué.

Le test rapide, pour n'importe quel convertisseur. Trouvez une page qui utilise une police d'icônes ou des masques CSS — la plupart des sites de doc sous VitePress ou Docusaurus font l'affaire — et importez-la. Si les icônes reviennent en rectangles ou en carrés colorés, l'outil lit le DOM et s'arrête là.

Si vos icônes sont déjà cassées dans un fichier

Un carré noir rastérisé ne se répare pas ; l'information de forme n'est jamais entrée dans le fichier. Réimportez avec un outil qui résout votre cas.

La seule exception, ce sont les polices d'icônes. Si les icônes sont arrivées en caractères et que vous avez la police localement, Figma les affichera correctement chez vous — mais le fichier cassera pour quiconque l'ouvrira sans cette police. Autant réimporter plutôt que de livrer un fichier qui ne fonctionne que pour vous.

Essayez sur vos propres pages Cinq captures gratuites, tout inclus. Sans carte ni compte.

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