Styles

Available styles

Style	Description
default	Primary background, bold contrast. The signature shieldcn look.
secondary	Muted background, subtle appearance.
outline	Transparent background, visible border, themed text colors.
ghost	Transparent background, no border.
destructive	Red/danger styling for error states.
branded	Uses the logo's brand color as background (e.g., Discord blurple, npm red).

Usage

![default](https://shieldcn.dev/npm/react.svg?variant=default)
![secondary](https://shieldcn.dev/npm/react.svg?variant=secondary)
![outline](https://shieldcn.dev/npm/react.svg?variant=outline)
![ghost](https://shieldcn.dev/npm/react.svg?variant=ghost)
![destructive](https://shieldcn.dev/npm/react.svg?variant=destructive)
![branded](https://shieldcn.dev/npm/react.svg?variant=branded)

Combining with themes

Styles and themes compose freely:

![blue outline](https://shieldcn.dev/npm/react.svg?variant=outline&theme=blue)
![green secondary](https://shieldcn.dev/npm/react.svg?variant=secondary&theme=green)

Branded variant

The branded variant automatically uses the icon's official brand color as the badge background:

![npm branded](https://shieldcn.dev/npm/react.svg?variant=branded)
![discord branded](https://shieldcn.dev/badge/join-discord.svg?variant=branded&logo=discord)
![typescript branded](https://shieldcn.dev/badge/typescript-5.0.svg?variant=branded&logo=typescript)

This pulls colors directly from SimpleIcons — Discord gets blurple (#5865F2), npm gets red (#CB3837), etc.