Comment ajouter des icônes dans React : lucide-react, react-icons, SVG inline ou sprites, tailles de bundle mesurées, dimensionnement avec currentColor, accessibilité et configuration Next.js.
Installez un package d'icônes comme lucide-react ou react-icons et importez chaque icône par son nom, par exemple import { Camera } from "lucide-react". Les imports nommés permettent le tree-shaking, seules les icônes utilisées sont donc incluses dans le bundle. Dimensionnez les icônes avec des props ou 1em, colorez-les via currentColor, et masquez les icônes décoratives avec aria-hidden.
Choix rapides
Ce guide explique comment intégrer des icônes dans du code React. Pour savoir quels jeux d'icônes gratuits choisir et connaître leurs licences, consultez notre liste des meilleures bibliothèques d'icônes gratuites. Les tailles indiquées ici proviennent de nos propres builds, avec l'outil et les réglages précisés.
Dans notre test, les deux étaient légers pour un seul import nommé : 874 octets gzippés pour une icône lucide-react et environ 1.3 KB pour une icône react-icons, car react-icons ajoute un petit wrapper partagé. Les deux ne grossissent que de quelques centaines d'octets par icône supplémentaire.
La plupart des composants d'icônes React dessinent avec currentColor, définissez donc la propriété CSS color sur l'icône ou son parent, par exemple avec une classe de couleur de texte. lucide-react et react-icons acceptent aussi une prop color.
Seulement quand l'icône est la seule à porter le sens. Donnez-lui alors role="img" et un aria-label, ou ajoutez un libellé au bouton qui la contient. Les icônes placées à côté d'un texte visible doivent être masquées avec aria-hidden="true".
Oui. Les composants lucide-react et react-icons sont des SVG sans state et s'affichent sur le serveur. Vous n'avez besoin de "use client" que dans un composant qui utilise du state ou des gestionnaires d'événements.
Quand les mêmes icônes apparaissent de nombreuses fois ou sur des pages qui ne sont pas en React. Chaque <use> est une courte référence vers un seul fichier en cache, au lieu de répéter toutes les données de tracé dans le HTML.
Quatre façons de mettre des icônes dans une application React
Chaque icône est un export nommé. size, color et strokeWidth sont des props, et toute autre prop est transmise au svg.
Importez depuis le chemin propre à la famille (fa, md, lu, fi, etc.). IconContext.Provider définit des valeurs par défaut pour toutes les icônes qu'il contient.
Collez les données de tracé une fois et réutilisez-les comme n'importe quel composant. Une largeur et une hauteur de 1em le font suivre la taille du texte.
Nous avons créé le bundle d'imports d'une seule icône avec esbuild en mode production, puis compressé le résultat avec gzip. Les imports nommés des deux packages restent légers ; un import en namespace embarque tout le jeu. React lui-même n'est pas compté.
Taille mesurée ajoutée par les imports d'icônes (minifié, puis gzip -9 ; React non compté)
Définissez chaque icône une fois en <symbol>, puis dessinez-la n'importe où avec <use>. Modifiez la couleur sur le conteneur et les deux icônes suivent, car les tracés utilisent currentColor.
Servez les symboles dans /icons.svg et faites pointer chaque icône vers un id de ce fichier. Le navigateur télécharge et met le fichier en cache une seule fois. Un sprite externe doit être sur la même origine.
Les icônes qui utilisent currentColor prennent la couleur de texte de leur parent, les styles de survol et de mode sombre n'ont donc besoin d'aucun CSS propre aux icônes. Changez la valeur de color et regardez les deux icônes suivre.
Une icône à côté d'un texte visible est décorative : masquez-la. Une icône qui est le seul contenu d'un bouton nécessite un nom sur le bouton.
Les composants lucide-react et react-icons s'affichent sans problème dans les Server Components, car ce sont de simples SVG sans state. Seul le composant qui gère un clic a besoin de "use client".
Next.js optimise déjà les imports d'une liste de packages d'icônes courants, dont lucide-react et react-icons. Ajoutez ici tout autre package d'icônes que vous utilisez pour garder des builds de développement rapides.
Vous choisissez d'abord un jeu ? Consultez
les meilleures bibliothèques d'icônes gratuites
Commencer gratuitement · Sans carte bancaire