> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-d7deecde.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Icônes

> Ajoutez des icônes Font Awesome, Lucide, Tabler ou de sources personnalisées à vos pages avec le composant icône et ses options de taille et de couleur.

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="flag" size={32} />

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

## Icônes d’image 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 Custom image icon examples theme={null}
<Icon src="/images/mon-icone.svg" />

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

<div id="inline-icons">
  ## 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="flag" iconType="solid" /> Utilisez les icônes pour la décoration ou pour renforcer l’accent visuel.

```markdown Inline icon example theme={null}
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
</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>