# Style the icon inside a Card component (/help-center/style-card-icons-with-custom-css)

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

The [Card component](/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 [#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 title="styling.css"
[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](/customize/custom-scripts) for how custom CSS loading works and the full list of available selectors.

## Other card parts [#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](/customize/custom-scripts#element-selectors) for the full list.