Lucide Icons - Kroescontrol Design System

Onze documentatie gebruikt Lucide Icons als primaire icon set. Lucide biedt 1000+ consistente, open-source iconen die perfect aansluiten bij onze moderne, professionele uitstraling.

Waarom Lucide Icons?

✅ 1000+ iconen - Uitgebreide collectie voor alle use cases ✅ React components - Direct te gebruiken in MDX en TSX ✅ Consistent design - Unified stroke width en stijl ✅ Lightweight - Tree-shakeable, alleen wat je gebruikt ✅ Open source - MIT licensed, actief onderhouden ✅ Toegankelijk - ARIA labels en semantic HTML

KCIcon Wrapper Component

We gebruiken een wrapper component (KCIcon) voor consistente kleuren en styling.

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

Color Variants

Primary (Instance Accent Color)

Elke documentatie instance gebruikt een eigen accent kleur voor variant="primary":

Instance	Accent Kleur	Hex Code
Public Docs	Crimson Magenta	`#c22757`
Internal Docs	Royal Blue	`#2050a3`
Operations Docs	Teal	`#1c9c8e`
Finance Docs	Amber	`#f59e0b`

<KCIcon icon={Rocket} variant="primary" size={32} />

Secondary (Navy Muted)

<KCIcon icon={Settings} variant="secondary" size={32} />

Gradient (Kroescontrol Gradient)

<KCIcon icon={Sparkles} variant="gradient" size={40} />

Success, Warning, Error

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

Sizes

Beschikbare sizes: 16, 20, 24, 32, 40

<KCIcon icon={Heart} variant="primary" size={16} />
<KCIcon icon={Heart} variant="primary" size={24} />
<KCIcon icon={Heart} variant="primary" size={40} />

Common Use Cases

Contact & Location

secretariaat@kroescontrol.nl

+31 6 34116494

Amsterdam, Rotterdam

Kroescontrol B.V.

Documentation Sections

Technische Documentatie

API references, code examples, SDKs

Security & Privacy

AVG, beveiliging, compliance

Team Resources

Interne tools, procedures, guides

Wanneer WEL Lucide Gebruiken

✅ Navigation - Menu items, links, breadcrumbs ✅ Actions - Buttons, controls, interactive elements ✅ Status - Success, warning, error states ✅ Categories - Section headers, document types ✅ UI Elements - Search, filter, settings, modals ✅ Documentation - Technical concepts, features

Wanneer NIET Lucide Gebruiken

❌ Branding - Gebruik Kroescontrol logo en brand assets ❌ Emoji context - Fun, informele content (🎉 blijft emoji) ❌ Custom illustrations - Gebruik SVG illustraties ❌ Complex diagrams - Gebruik Mermaid of diagram tools ❌ Decorative alleen - Elke icon moet betekenis hebben

Toegankelijkheid

Gebruik altijd aria-label voor standalone icons:

<KCIcon
  icon={Search}
  variant="primary"
  size={24}
  aria-label="Zoeken in documentatie"
/>

Voor decoratieve icons (naast tekst):

<div>
  <KCIcon icon={Info} variant="neutral" size={20} />
  <span>Informatie</span>
</div>

Icon Browser

Bekijk alle beschikbare iconen op: lucide.dev/icons

Veelgebruikte Icons

Navigatie

Acties

Status

Security & Business

Best Practices

Consistentie - Gebruik dezelfde icon voor hetzelfde concept door hele docs
Context - Icon moet betekenis ondersteunen, niet afleiden
Contrast - Zorg voor voldoende kleurcontrast (WCAG AA)
Size - Gebruik juiste size voor context (menu=20, header=24, feature=32)
Variant - Primary voor belangrijke acties, neutral voor ondersteunend
Spacing - Geef icons ruimte, minimaal 0.5rem gap bij tekst

Icon Guidelines Bedrijfsgegevens