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

# Aplicar estilo al icono dentro de un componente Card

> Añade un color de fondo, esquinas redondeadas o padding a los iconos del componente Card usando CSS personalizado y el selector de atributo card-icon.

El [componente Card](/docs/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
</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 styling.css theme={null}
[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](/docs/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
</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](/docs/es/customize/custom-scripts#element-selectors) para ver la lista completa.


## Related topics

- [Iconos](/docs/es/components/icons.md)
- [Tarjetas](/docs/es/components/cards.md)
- [Navegación](/docs/es/organize/navigation.md)