Aligner les icônes avec le texte

Comment créer une harmonie visuelle entre les icônes et le texte adjacent. Gérez le poids visuel, l’espacement et l’alignement vertical pour des mises en page équilibrées et professionnelles.

8 min de lecture Débutant Mars 2026

Mathieu Beaumont

Directeur de la conception graphique et des systèmes de design

Pourquoi l’alignement compte vraiment

L’alignement entre les icônes et le texte n’est pas juste une question d’esthétique. C’est un élément fondamental qui affecte la lisibilité, la cohérence visuelle et l’expérience utilisateur globale. Quand une icône et son texte ne s’alignent pas correctement, l’ensemble paraît bancal — même si tout le reste du design est impeccable.

On voit ce problème partout. Une icône flottant légèrement au-dessus du texte. Un symbole qui semble maladroitement espacé. Ces petites imperfections s’accumulent et créent une impression d’amateurisme. Les meilleurs designs, c’est comme les meilleures typographies — tout est aligné avec précision.

Le secret : Les icônes doivent partager la même ligne de base que le texte, ou être parfaitement centrées verticalement si elles sont plus grandes. C’est la règle d’or.

Les trois approches principales

Il existe trois façons d’aligner correctement une icône avec le texte. Chacune a ses avantages selon le contexte.

Alignement sur la ligne de base

L’icône partage exactement la même ligne de base que le texte. C’est idéal pour les petites icônes intégrées au sein d’une phrase. Elles restent discrètes tout en restant cohérentes.

Centrage vertical

L’icône est centrée verticalement par rapport à la hauteur x du texte (la hauteur des minuscules). C’est plus stable visuellement et fonctionne bien pour les tailles moyennes d’icônes.

Centrage sur la ligne capitale

L’icône s’aligne sur la ligne de la lettre majuscule. On utilise cette approche pour les icônes plus grandes ou quand elles sont présentées comme des éléments distincts plutôt qu’intégrés.

Information importante

Ces conseils sont basés sur les bonnes pratiques actuelles en matière de conception. Les normes d’alignement peuvent varier selon votre système de design spécifique, votre police de caractères et votre contexte d’utilisation. Testez toujours votre implémentation sur différentes tailles d’écran et appareils pour vous assurer que l’alignement fonctionne correctement dans tous les cas.

L’importance du poids visuel

Parlons d’un aspect souvent négligé : le poids visuel relatif de l’icône par rapport au texte. Une icône peut être techniquement bien alignée, mais paraître décalée si son poids visuel ne correspond pas au texte.

Vous avez probablement remarqué que certains designs font paraître l’icône trop légère ou trop lourde. C’est parce que le créateur n’a pas accordé attention à cet équilibre. Une icône fine avec un texte gras va créer une tension visuelle désagréable. À l’inverse, une icône épaisse à côté d’une typographie légère dominera l’espace.

Utilisez une épaisseur de trait d’icône qui correspond à la hauteur x du texte (environ 0.12-0.15em)
Testez l’icône à différentes tailles pour vous assurer que le contraste reste lisible
Considérez l’espace blanc interne de l’icône — c’est aussi important que le trait
L’espacement entre l’icône et le texte doit être au moins la moitié de la taille de l’icône

Mettre cela en pratique

Maintenant que vous comprenez les principes, voici comment les appliquer concrètement. La plupart des outils de design modernes facilitent ce travail.

Dans Figma, vous pouvez utiliser les guides intelligents pour aligner l’icône à la ligne de base du texte. Sélectionnez simplement l’icône et le texte, puis appliquez l’alignement vertical. Ou, si vous préférez une approche manuelle, vous pouvez créer une grille de hauteur x (la hauteur des minuscules de votre police) et l’utiliser comme référence.

Pour le code, c’est un peu plus nuancé. Les icônes web (font icons ou SVG inline) se comportent différemment selon votre implémentation. L’utilisation de flexbox avec align-items: center fonctionne bien pour centrer verticalement une icône à côté du texte. Mais si vous voulez un alignement plus fin sur la ligne de base, vous devrez ajuster les propriétés line-height et vertical-align.

CSS pour icônes alignées :

.icon-text { display: flex; align-items: center; gap: 0.5em; } .icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

Les détails font toute la différence

L’alignement des icônes avec le texte semble simple, mais c’est un de ces détails qui sépare les designs amateurs des designs professionnels. Vous ne remarquez jamais l’alignement parfait — c’est exactement le point. Mais vous remarquez immédiatement quand c’est faux.

En maîtrisant ces techniques — en pensant au poids visuel, en testant sur différentes tailles, en utilisant les bons outils — vous créerez des interfaces qui semblent simplement… justes. Équilibrées. Professionnelles. C’est ça, le vrai design.