> ## 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.

# Style the icon inside a Card component

> Add a background color, rounded corners, or padding to Card component icons using custom CSS and the card-icon data attribute selector.

The [Card component](/docs/components/cards) does not have props for styling its icon, such as adding a background color, rounded corners, or padding. To customize card icons while still using the Card component, target the icon with custom CSS.

## Target the card icon

Card icons render with the attribute `data-component-part="card-icon"`. The general `icon` element selector does not match icons inside cards, so a rule like `card icon { }` has no effect. Use the data attribute selector instead:

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

Scope the rule to cards with `.card [data-component-part="card-icon"]` if the selector conflicts with other styles.

Save the rule in any `.css` file in your content directory, which is the folder in your repository that contains your `docs.json` file. Mintlify loads the file on every page automatically. See [Custom scripts](/docs/customize/custom-scripts) for how custom CSS loading works and the full list of available selectors.

## Other card parts

Cards expose additional `data-component-part` attributes you can style the same way, including `card-title`, `card-content`, `card-image`, and `card-cta`. See [Custom scripts](/docs/customize/custom-scripts#element-selectors) for the full list.


## Related topics

- [Cards](/docs/components/cards.md)
- [Components overview](/docs/components/index.md)
- [Tabs](/docs/components/tabs.md)