Style the icon inside a Card component

The Card component 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:

[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 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 for the full list.