# 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](/guides/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](/guides/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](/guides/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)

## Related pages

- [Ai](./ai-index.md)
- [Analytics overview](./analytics-index.md)
- [Api](./api-index.md)
- [Api playground](./api-playground-index.md)
- [Assistant](./assistant-index.md)
- [Automations overview](./automations-index.md)
- [Components overview](./components-index.md)
- [Create](./create-index.md)
- [Customize](./customize-index.md)
- [Dashboard](./dashboard-index.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.