# Styliser l'icône à l'intérieur d'un composant Card (/fr/help-center/style-card-icons-with-custom-css)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 433 · updated: 2026-09-23 -->

Le [composant Card](/fr/components/cards) n'a pas de props pour styliser son icône, comme l'ajout d'une couleur de fond, de coins arrondis ou de padding. Pour personnaliser les icônes de carte tout en continuant à utiliser le composant Card, ciblez l'icône avec du CSS personnalisé.

<div id="target-the-card-icon">
  ## Cibler l'icône de la carte [#cibler-licône-de-la-carte]
</div>

Les icônes de carte sont rendues avec l'attribut `data-component-part="card-icon"`. Le sélecteur d'élément général `icon` ne correspond pas aux icônes à l'intérieur des cartes, donc une règle comme `card icon { }` n'a aucun effet. Utilisez plutôt le sélecteur d'attribut de données :

```css title="styling.css"
[data-component-part="card-icon"] {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
```

Limitez la règle aux cartes avec `.card [data-component-part="card-icon"]` si le sélecteur entre en conflit avec d'autres styles.

Enregistrez la règle dans n'importe quel fichier `.css` de votre répertoire de contenu, c'est-à-dire le dossier de votre dépôt qui contient votre fichier `docs.json`. Mintlify charge le fichier automatiquement sur chaque page. Consultez [Scripts personnalisés](/fr/customize/custom-scripts) pour comprendre le chargement du CSS personnalisé et la liste complète des sélecteurs disponibles.

<div id="other-card-parts">
  ## Autres parties de la carte [#autres-parties-de-la-carte]
</div>

Les cartes exposent des attributs `data-component-part` supplémentaires que vous pouvez styliser de la même manière, notamment `card-title`, `card-content`, `card-image` et `card-cta`. Consultez [Scripts personnalisés](/fr/customize/custom-scripts#element-selectors) pour la liste complète.