# Aplicar estilo al icono dentro de un componente Card (/es/help-center/style-card-icons-with-custom-css)

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

El [componente Card](/es/components/cards) no tiene props para dar estilo a su icono, como añadir un color de fondo, esquinas redondeadas o padding. Para personalizar los iconos de las tarjetas sin dejar de usar el componente Card, apunta al icono con CSS personalizado.

<div id="target-the-card-icon">
  ## Apuntar al icono de la tarjeta [#apuntar-al-icono-de-la-tarjeta]
</div>

Los iconos de las tarjetas se renderizan con el atributo `data-component-part="card-icon"`. El selector de elemento general `icon` no coincide con los iconos dentro de las tarjetas, por lo que una regla como `card icon { }` no tiene efecto. Usa el selector de atributo de datos en su lugar:

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

Limita la regla a las tarjetas con `.card [data-component-part="card-icon"]` si el selector entra en conflicto con otros estilos.

Guarda la regla en cualquier archivo `.css` de tu directorio de contenido, que es la carpeta de tu repositorio que contiene tu archivo `docs.json`. Mintlify carga el archivo automáticamente en todas las páginas. Consulta [Scripts personalizados](/es/customize/custom-scripts) para saber cómo funciona la carga de CSS personalizado y ver la lista completa de selectores disponibles.

<div id="other-card-parts">
  ## Otras partes de la tarjeta [#otras-partes-de-la-tarjeta]
</div>

Las tarjetas exponen atributos `data-component-part` adicionales a los que puedes dar estilo de la misma manera, incluidos `card-title`, `card-content`, `card-image` y `card-cta`. Consulta [Scripts personalizados](/es/customize/custom-scripts#element-selectors) para ver la lista completa.