Icon Colors

Workspace cards and feature cards support an iconColor field 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.home-card-icon--purplePrimary brand, general purpose
blue.home-card-icon--blueAPIs, services, networking
green.home-card-icon--greenDatabases, data, success states
amber.home-card-icon--amberWarnings, configuration, tooling
red.home-card-icon--redDestructive actions, critical
slate.home-card-icon--slateNeutral, infrastructure
cyan.home-card-icon--cyanTesting, monitoring, observability
pink.home-card-icon--pinkDesign, UI, creative tools

Usage

Set iconColor on a workspace item:

apps: [
  {
    text: 'API',
    icon: 'devicon:hono',
    iconColor: 'blue',
    description: 'REST API with typed routes',
    docsPrefix: '/apps/api',
  },
]

Or on a card config within a section entry:

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

Feature card colors

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

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

The CSS class for feature cards follows the pattern .home-card-icon--{color}.

Default behavior

When iconColor is omitted, 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).