Icon Usage Guidelines

Richtlijnen voor consistent en toegankelijk icon gebruik in Kroescontrol documentatie.

Variant Voorbeelden (Light & Dark Theme)

Primary (Brand Color) - Per Instance

Elk documentatie platform gebruikt een eigen accent kleur voor variant="primary" icons. Hieronder zie je hoe de primaire variant eruitziet per instance:

Public Docs (Crimson Magenta #c22757)

Internal Docs (Royal Blue #2050a3)

Operations Docs (Teal #1c9c8e)

Finance Docs (Amber #f59e0b)

// Gebruik automatisch de juiste kleur per instance met variant="primary"
<KCIcon icon={Rocket} variant="primary" size={24} />

Gebruik voor: Belangrijke acties, brand elements, CTAs, feature highlights

Secondary (Navy Muted)

<KCIcon icon={FileText} variant="secondary" size={20} />

Gebruik voor: Ondersteunende elementen, minder prominente UI, sectie headers

Kleuren: Altijd Navy (muted) in beide themes

Success, Warning, Error

<KCIcon icon={CheckCircle} variant="success" size={20} />
<KCIcon icon={AlertTriangle} variant="warning" size={20} />
<KCIcon icon={XCircle} variant="error" size={20} />

Gebruik voor: Status feedback, alerts, notifications, form validation

Kleuren:

• Success: Green-600 (light) / Green-400 (dark)
• Warning: Orange-500 (light) / Orange-400 (dark)
• Error: Red-600 (light) / Red-400 (dark)
• Neutral: Gray-600 (light) / Gray-400 (dark)

Neutral (Gray)

<KCIcon icon={Settings} variant="neutral" size={20} />

Gebruik voor: Algemene UI, navigation, settings, filters, search

Kleuren: Gray-600 (light) / Gray-400 (dark)

Size Guidelines

Vuistregel: Icon size = text size + 4px

Common Patterns (Light & Dark Theme)

Navigation Link met Icon

<a href="/docs" style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
  <KCIcon icon={FileText} variant="neutral" size={20} />
  <span>Documentation</span>
  <KCIcon icon={ExternalLink} variant="neutral" size={16} />
</a>

Status Alert

<div className="alert alert-success">
  <KCIcon icon={CheckCircle} variant="success" size={24} />
  <div>
    <strong>Success!</strong>
    <p>Your changes have been saved.</p>
  </div>
</div>

Card Header

<div className="card">
  <div className="card-header">
    <KCIcon icon={Shield} variant="primary" size={24} />
    <h3>Security & Privacy</h3>
  </div>
  <div className="card-body">
    <p>Content...</p>
  </div>
</div>

Button met Icon

<button>
  <KCIcon icon={Download} variant="neutral" size={20} />
  <span>Download PDF</span>
</button>

Emoji vs Lucide (Light & Dark Theme)

UI Elements (VERVANGEN met Lucide)

Behoud Emoji (voor informele content)

Documentatie Instances

Elk docs platform gebruikt eigen accent kleur voor variant="primary":

Gebruik: variant="primary" past zich automatisch aan per instance. Geen handmatige kleur configuratie nodig!

Volledige kleuren referentie: Zie Branding Kleuren pagina voor het complete Kroescontrol kleurenpalet.

Accessibility Best Practices

Gebaseerd op Lucide accessibility guidelines:

1. Altijd Zichtbare Labels

Gebruik NOOIT alleen een icon zonder tekst. Voeg altijd een text label toe (inline of via screen reader).

// ✅ GOED: Icon met zichtbare tekst
<button>
  <KCIcon icon={Download} variant="neutral" size={20} />
  <span>Download PDF</span>
</button>
 
// ❌ FOUT: Alleen icon
<button>
  <KCIcon icon={Download} variant="neutral" size={20} />
</button>

2. Screen Reader Support

Voor standalone icons (zonder zichtbare tekst):

// Optie 1: Visually hidden span
<button>
  <KCIcon icon={Download} variant="neutral" size={20} />
  <span className="sr-only">Download PDF</span>
</button>
 
// Optie 2: aria-label op button
<button aria-label="Download PDF">
  <KCIcon icon={Download} variant="neutral" size={20} />
</button>

3. Contrast & Kleur

• Minimum contrast ratio: 4.5:1 (WCAG 2.1 SC 1.4.3)
• Communiceer niet alleen met kleur - gebruik ook vorm/tekst
• Test contrast met tools zoals WebAIM Contrast Checker

4. Interactive Elements

• Minimum touch target: 44x44 pixels
• Keyboard navigatie: Zorg dat icon buttons focusable zijn
• Focus ring: Maak focus state duidelijk zichtbaar

// Keyboard-friendly icon button
<button className="focus:ring-2 focus:ring-primary">
  <KCIcon icon={Settings} variant="neutral" size={20} />
  <span>Instellingen</span>
</button>

Lucide React Best Practices

Gebaseerd op Lucide React documentatie:

Tree-Shaking & Performance

Import alleen de icons die je nodig hebt:

// ✅ GOED: Direct import (tree-shakable)
import { Camera, Settings, Download } from 'lucide-react'
 
// ❌ FOUT: Default import (bundelt alles)
import lucide from 'lucide-react'

Props & Styling

Lucide icons ondersteunen alle SVG presentatie attributes:

<KCIcon
  icon={Camera}
  variant="primary"
  size={24}
  strokeWidth={2}
  className="custom-class"
/>

Available props:

• size - Number (default: 24)
• color - String (default: currentColor)
• strokeWidth - Number (default: 2)
• absoluteStrokeWidth - Boolean (default: false)

Dynamic Icons (gebruik zuinig!)

Voor dynamic icon rendering (niet aanbevolen voor static use):

import { icons } from 'lucide-react'
 
const DynamicIcon = ({ name }) => {
  const LucideIcon = icons[name]
  return <LucideIcon size={24} />
}

Let op: Dynamic import verhindert tree-shaking. Gebruik alleen waar echt nodig.

Heading Icons Pattern

Vanaf oktober 2025 gebruiken we branded Lucide icons in headings in plaats van functionele emoji’s.

Implementatie

---
title: 'Example Page'
---
 
import { Target, Building, Lock } from 'lucide-react'
 
## Perfect voor <Target className="heading-icon" size={20} />
 
Content here...
 
## Faciliteiten <Building className="heading-icon" size={20} />
 
Content here...

CSS Styling

/* styles/globals.css */
.heading-icon {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 200ms ease;
  color: var(--kc-color-primary-500); /* Instance accent */
}
 
h2:hover .heading-icon,
h3:hover .heading-icon {
  opacity: 1;
}

Design Beslissingen

Special Emoji’s (behouden)

Deze emoji’s hebben emotionele waarde en blijven behouden:

Voorbeelden

Before (emoji vooraan):

## 🎯 Perfect voor

After (icon achteraan):

import { Target } from 'lucide-react'
 
## Perfect voor <Target className="heading-icon" size={20} />

Common Heading Icons

Quick Reference

Gebruik Lucide Icons voor:

• Heading accents (achteraan, 20px, instance kleur)
• UI elementen (knoppen, menu’s, navigatie)
• Status indicatoren (success, warning, error)
• Actions (zoeken, filteren, downloaden)
• Documentatie structuur (secties, categorieën)

Gebruik Emoji voor:

• Celebratory content (🎉 launches)
• Informele tone (💡 tips - waar emotioneel)
• Persoonlijke expressies (❤️ appreciation)
• Special headings (👋 welkom, 🚀 journey)

Component Gebruik

Basis Syntax

import { IconName } from 'lucide-react'
import { KCIcon } from '@/components/icons/KCIcon'
 
<KCIcon icon={IconName} variant="primary" size={24} />

Props

Meer Informatie

Icon library: lucide.dev/icons - Browse 1000+ icons

Laatste update: 2025-10-18 Versie: 1.1 Eigenaar: Serge Kroes