Get started →

    Icon Colors

    Workspace cards and feature cards support a color field inside the icon object that applies a CSS color class to the icon. This controls the accent color shown behind or around the icon on cards.

    Available colors

    SwatchValueCSS ClassUse case
    		purple.cp-card__icon--purplePrimary brand, general purpose
    		blue.cp-card__icon--blueAPIs, services, networking
    		green.cp-card__icon--greenDatabases, data, success states
    		amber.cp-card__icon--amberWarnings, configuration, tooling
    		red.cp-card__icon--redDestructive actions, critical
    		slate.cp-card__icon--slateNeutral, infrastructure
    		cyan.cp-card__icon--cyanTesting, monitoring, observability
    		pink.cp-card__icon--pinkDesign, UI, creative tools

    Usage

    Set color on a workspace item icon:

    apps: [
  {
    title: 'API',
    icon: { id: 'devicon:hono', color: 'blue' },
    description: 'REST API with typed routes',
    path: '/apps/api',
  },
]

    Or on a card config within a section entry:

    {
  title: 'API',
  link: '/apps/api',
  card: {
    icon: { id: 'devicon:hono', color: 'blue' },
    description: 'REST API with typed routes',
  },
}

    Feature card colors

    Feature cards on the home page use the same color values via the color field on a Feature icon:

    features: [
  {
    title: 'Getting Started',
    icon: { id: 'pixelarticons:speed-fast', color: 'purple' },
    description: 'Set up and start building.',
    link: '/getting-started',
  },
]

    The CSS class for feature cards follows the pattern .cp-card__icon--{color}.

    Default behavior

    When color is omitted (or when icon is a plain string like 'devicon:hono'), the icon renders with its native colors (for multi-color icon sets like devicon and skill-icons) or inherits currentColor (for monochrome sets like simple-icons and pixelarticons).