---
title: Icônes
description: Jamdesk intègre Font Awesome Pro. Utilisez des icônes dans les cartes, encadrés, la barre latérale et le texte, avec plusieurs variantes de style.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Jamdesk intègre **Font Awesome Pro** : des milliers d'icônes, gratuites et pro, prêtes à l'emploi.

## Utiliser les icônes dans les composants

La plupart des composants acceptent une prop `icon` avec un nom d'icône Font Awesome :

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="Quickstart" icon="rocket" href="/fr/quickstart">
  Découvrez comment configurer votre site de documentation.
</Card>

Les icônes fonctionnent dans les Cards, Accordions, Tabs et les éléments de navigation.

## Le composant Icon

Utilisez le composant `<Icon>` pour afficher des icônes en ligne avec du texte :

```mdx
<Icon icon="check" color="green" /> Task completed
```

<Icon icon="check" color="green" /> Tâche terminée

### Props de Icon

| Prop | Type | Par défaut | Description |
|------|------|---------|-------------|
| `icon` | string | requis | Nom de l'icône Font Awesome |
| `color` | string | - | Couleur nommée (red, blue, green) ou hexadécimale (#FF5733) |
| `size` | number | 16 | Taille en pixels |

### Exemples

```mdx
<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />
```

<Icon icon="star" color="yellow" size={24} /> <Icon icon="circle-check" color="green" /> <Icon icon="triangle-exclamation" color="orange" /> <Icon icon="heart" color="#E91E63" size={20} />

## Trouver des icônes

Parcourez l'intégralité de la bibliothèque d'icônes sur [fontawesome.com/icons](https://fontawesome.com/icons). Recherchez ce dont vous avez besoin, puis utilisez le nom de l'icône dans votre documentation.

<Tip>
Lorsque vous effectuez une recherche sur le site de Font Awesome, repérez le nom de l'icône affiché sous celle-ci (par exemple, « circle-check », « arrow-right »). Utilisez ce nom exact dans votre documentation.
</Tip>

## Icônes de marques

Les logos de technologies et d'entreprises sont automatiquement détectés et affichés correctement :

```mdx
<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />
```

<Icon icon="github" size={24} /> <Icon icon="discord" size={24} /> <Icon icon="react" size={24} /> <Icon icon="python" size={24} />

Icônes de marques courantes :

| Catégorie | Icônes |
|----------|-------|
| Réseaux sociaux | github, discord, twitter, linkedin, youtube, slack |
| Langages | python, react, vuejs, angular, node-js, php, java |
| Services | aws, docker, google, microsoft, stripe, shopify |

## Variantes d'icônes

Les icônes Font Awesome existent en plusieurs variantes de style qui contrôlent le poids visuel. Spécifiez la variante en préfixant le nom de l'icône.

### Variantes disponibles

| Variante | Préfixe | Exemple | Description |
|---------|--------|---------|-------------|
| Solid | `solid/` | `solid/star` | Icônes pleines, poids le plus lourd |
| Regular | `regular/` | `regular/star` | Icônes contourées, poids moyen |
| Light | `light/` | `light/star` | Icônes contourées plus fines |
| Thin | `thin/` | `thin/star` | Icônes contourées les plus fines |
| Duotone | `duotone/` | `duotone/star` | Icônes bicolores avec couleurs superposées |

La famille **Sharp** de Font Awesome, aux angles carrés, est également disponible : `sharp-solid/`, `sharp-regular/`, `sharp-light/`, `sharp-thin/`, et `sharp-duotone-solid/` (par exemple `sharp-duotone-solid/star`).

### Exemples

```mdx
<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />
```

<Icon icon="solid/bell" size={24} /> <Icon icon="regular/bell" size={24} /> <Icon icon="light/bell" size={24} /> <Icon icon="thin/bell" size={24} /> <Icon icon="duotone/bell" size={24} />

### Utiliser les variantes dans les composants

Les variantes fonctionnent partout où les icônes sont utilisées : composants, navigation et frontmatter.

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

```json docs.json
{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}
```

### Forme objet de l'icône

Dans `docs.json`, partout où une icône est acceptée (groupes de navigation, tabs, anchors, icônes de page et `popularPages` de recherche), vous pouvez écrire l'icône sous forme d'objet plutôt que de chaîne. C'est la forme que génère le sélecteur d'icônes du dashboard :

```json docs.json
{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}
```

| Champ | Type | Description |
|-------|------|-------------|
| `name` | string | Nom de l'icône Font Awesome (requis) |
| `style` | string | L'une des variantes ci-dessus : `solid`, `regular`, `light`, `thin`, `duotone`, ou une variante `sharp-*` |
| `library` | string | `fontawesome` ou `lucide`, accepté pour compatibilité ; les icônes s'affichent via Font Awesome |

`{ "name": "shield", "style": "duotone" }` équivaut à la chaîne `"duotone/shield"`. Utilisez la forme que vous préférez. Le frontmatter `icon` (icônes de page) n'accepte que la forme chaîne.

### Variante par défaut

Lorsqu'aucune variante n'est spécifiée, les icônes s'affichent dans la variante **Solid**. Remplacez-la icône par icône avec un préfixe de style (`light/gear`) ou, dans `docs.json`, le champ `style` de la forme objet.

### Comparaison des variantes

Voici la même icône dans toutes les variantes pour vous aider à choisir :

| Variante | Icône | Idéal pour |
|---------|------|----------|
| Solid | <Icon icon="solid/folder" size={20} /> | Actions principales, mise en valeur |
| Regular | <Icon icon="regular/folder" size={20} /> | Éléments d'interface secondaires |
| Light | <Icon icon="light/folder" size={20} /> | Designs minimalistes, navigation |
| Thin | <Icon icon="thin/folder" size={20} /> | Esthétiques ultra-minimalistes |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Intérêt visuel, image de marque |

<Note>
Les icônes Duotone utilisent deux couleurs : une teinte principale et une teinte secondaire. La couche secondaire est automatiquement réglée sur une opacité plus claire de la couleur principale.
</Note>

## Icônes de navigation

Les icônes peuvent apparaître dans la barre latérale à trois niveaux : anchors, groupes et pages individuelles.

### Icônes de page

Ajoutez une icône à n'importe quelle page via le frontmatter :

```yaml authentication.mdx
---
title: Authentication
icon: lock
---
```

L'icône apparaît dans la barre latérale à côté du titre de la page.

### Icônes de groupe

Ajoutez des icônes aux groupes de navigation dans `docs.json` :

```json docs.json
{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}
```

### Icônes d'anchor

Ajoutez des icônes aux anchors de premier niveau dans `docs.json` :

```json docs.json
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}
```

## Icônes gratuites vs Pro

Jamdesk inclut Font Awesome Pro, ce qui signifie :

- **Plus de 7 000 icônes** disponibles (contre environ 2 000 dans la version gratuite)
- Toutes les icônes gratuites fonctionnent sans aucune modification
- Les icônes exclusives Pro comme les variantes duotone sont incluses
- Les icônes de poids Light et Thin sont disponibles

Si vous migrez depuis une autre plateforme de documentation qui utilisait Font Awesome Free, toutes vos icônes existantes continueront de fonctionner.

## Et ensuite ?

<Columns cols={2}>
  <Card title="Optimisation SEO" icon="magnifying-glass-chart" href="/fr/content/seo">
    Améliorer la découvrabilité et les métadonnées
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/fr/content/frontmatter">
    Définir les titres, descriptions et champs SEO
  </Card>
</Columns>