Système de design GCDémarrerAperçu des modèles de pagePage de baseAperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texteAperçu des raccourcis CSSRéinitialisation des stylesMise en page réactiveÉtatDimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilitéPoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de motMargeMarge intérieureAlignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuelCouleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordureNoms des icônesTaille de l'icôneImageCurseurÉvénements de pointeurTransitionAperçu des stylesUnités de styleCouleurEspacementTypographieNous contacterS'impliquerTrouvez une démo
Icône <gcds-icon>
Autres noms : symbole, glyphe.Une icône est un symbole qui représente visuellement une action ou une idée.
GitHub
Figma
Aperçu du composant icône
Problèmes résolus par les icônes
Utilisez une icône pour :
Clarifier l’information à l’aide d’une référence visuelle.
Surligner les actions ou les états clés, comme une coche pour la validation.
Parcourir le contenu plus rapidement et réduire la charge cognitive.
Composants connexes
Texte pour afficher le contenu écrit dans un paragraphe stylisé et formaté. Avis pour afficher un message court et visible.
Cas d’utilisation des icônes
Mettre en évidence une information
Choisissez une icône correspondant à l’information que vous souhaitez mettre en évidence.
Cercle info gcds-icon-info-circleInformation non critique, mais utile.
Triangle avertissement gcds-icon-warning-triangle Mise en garde sans action nécessaire.
Cercle exclamation gcds-icon-exclamation-circleAvertissement critique avant une action.
Cercle coche gcds-icon-checkmark-circleConfirmation de l’achèvement ou du succès d’une action.
Indiquer l’action à prendre
Choisissez une icône correspondant à l’action que vous souhaitez mettre en évidence.
Flèche haut/bas gcds-arrow-up gcds-arrow-downIndiquer l’ordre de tri actif (ascendant ou descendant).
Flèche-haut-bas gcds-icon-arrow-up-downIndiquer que le contenu peut être trié.
Chevron gauche/droite/haut/bas gcds-icon-chevron-left gcds-icon-chevron-right gcds-icon-chevron-up gcds-icon-chevron-downDévelopper / réduire le contenu ou indiquer une direction.
Fermer gcds-icon-closeAnnuler une action ou fermer un flux.
Téléchargement gcds-icon-downloadTélécharger un fichier.
Filtrer gcds-icon-filter-iconFiltrer du contenu.
Courriel gcds-icon-emailEnvoyer un courriel.
Lien externe gcds-icon-external-linkOuvrir un lien dans un nouvel onglet ou une nouvelle fenêtre.
Téléphone gcds-icon-phoneComposer un numéro de téléphone.
Recherche gcds-icon-searchRechercher des renseignements précis.
TrierTrier du contenu.
RéglagesAjuster des paramètres.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub 2026-06-01