# Icônes (/fr/components/icons)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 1020 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

Utilisez des icônes de Font Awesome, Lucide, Tabler, des SVG (Scalable Vector Graphics), des URL externes ou des fichiers de votre projet pour enrichir votre documentation.

<Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" size="32" />

```mdx title="Icon example"
<Icon icon="flag" size={32} />
```

## Icônes d’image personnalisées [#icônes-dimage-personnalisées]

Utilisez la prop `src` pour afficher une image personnalisée en guise d’icône. L’image peut être un fichier de votre projet ou une URL hébergée en externe.

```mdx title="Custom image icon examples"
<Icon src="/images/mon-icone.svg" />

<Icon src="https://example.com/icon.png" />
```

<div id="inline-icons">
  ## Icônes en ligne [#icônes-en-ligne]
</div>

Les icônes sont placées en ligne lorsqu’elles sont utilisées dans une phrase, un paragraphe ou un titre. <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" /> Utilisez les icônes pour la décoration ou pour renforcer l’accent visuel.

```markdown title="Inline icon example"
Les icônes sont placées en ligne lorsqu'elles sont utilisées dans une phrase, un paragraphe ou un titre. <Icon icon="flag" iconType="solid" /> Utilisez des icônes pour décorer ou ajouter un accent visuel.
```

<div id="properties">
  ## Propriétés [#propriétés]
</div>

<Info>
  Vous devez fournir `icon` ou `src`.
</Info>

<ResponseField name="icon" type="string">
  Icône à afficher depuis une bibliothèque d’icônes.

  Options :

  * Nom d’icône [Font Awesome](https://fontawesome.com/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `fontawesome` dans votre `docs.json`
  * Nom d’icône [Lucide](https://lucide.dev/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `lucide` dans votre `docs.json`
  * Nom d’icône [Tabler](https://tabler.io/icons) si vous avez la [propriété](/fr/organize/settings#param-icons) `icons.library` définie sur `tabler` dans votre `docs.json`
</ResponseField>

<ResponseField name="src" type="string">
  Chemin ou URL d’une image à utiliser comme icône. Utilisez `src` à la place de `icon` lorsque vous souhaitez utiliser une image personnalisée plutôt qu’une icône d’une bibliothèque.

  Options :

  * Chemin vers un fichier image dans votre projet (par exemple, `/images/mon-icone.svg`)
  * URL vers une image hébergée en externe (par exemple, `https://example.com/icon.png`)
</ResponseField>

<ResponseField name="iconType" type="string">
  Style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.

  Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="color" type="string">
  La couleur de l’icon sous forme de code hexadécimal (par exemple « #FF5733 »).
</ResponseField>

<ResponseField name="size" type="number">
  La taille de l’icon en pixels.
</ResponseField>

<ResponseField name="className" type="string">
  Nom de classe CSS personnalisé à appliquer à l’icon.
</ResponseField>