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

Sur cette page

Codage et accessibilité des icônes
Exemples
Générateur de code

Codage et accessibilité des icônes

Sélectionner une icône pertinente

Obtenez l’icône de votre choix en remplaçant l’attribut name par le nom de l’icône correspondant.

Remarque : Conformément à la pratique courante, on utilise l’anglais pour tous les éléments de code.

arrow-up

arrow-down

arrow-up-down

info-circle

warning-triangle

exclamation-circle

checkmark-circle

chevron-left

chevron-right

chevron-up

chevron-down

close

download

filter

email

external

phone

search

sort

tune

Choisir l’échelle de l’icône

Modifiez la taille d’une icône en définissant l’attribut size à une taille de police spécifique, comme text-small | text | h1 | h2 | h3 | h4 | h5 | h6.
Faites correspondre la taille de l’icône au texte d’accompagnement en définissant l’attribut size à inherit.
Fixez une hauteur/largeur minimale de 24 x 24 pixels pour une icône interactive sans texte. Si vous pouvez augmenter la taille, 44 x 44 pixels dépasse les normes d’accessibilité, mais est plus accessible.

Ajuster le positionnement

Ajoutez une marge à la gauche ou à la droite d’une icône en définissant l’attribut margin-left ou margin-right à l’aide d’une valeur d’espacement comme 0 | 25 | 50 | 75 | 100 | 125 | 150 | 175| 200 | 225| 250 | 300 | 350| 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900 | 950 | 1000 | 1050 | 1100 | 1150 | 1200 | 1250.

Définir le texte du libellé

Utilisez la propriété “label” pour une icône sans texte d’accompagnement.
Vous n’avez pas besoin d’utiliser la propriété “label” si une icône est décorative.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

Essential attributes

These attributes are needed for the component to function correctly.

`name`

L’attribut name définit le nom de l’icône.

<gcds-icon name="close"></gcds-icon>

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation.

`label`

L’attribut label définit la description de l’icône pour les icônes non décoratives.

<gcds-icon
  label="Le fait de cliquer sur cette icône fermera l'élément."
  name="close"
></gcds-icon>

`margin-left`

L’attribut margin-left définit la marge à gauche de l’icône.

<gcds-icon name="close" margin-left="50"></gcds-icon>

`margin-right`

L’attribut margin-right définit la marge à droite de l’icône.

<gcds-icon name="close" margin-right="50"></gcds-icon>

`size`

L’attribut size définit la taille de l’icône.

<gcds-icon name="close" size="h3"></gcds-icon>

Générateur de code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.

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

Icône<gcds-icon>