Icons - Design System

Gebruik

Hoe te gebruiken

React (shadcn/ui)

import { Mail } from "lucide-react" <Mail size={24} />

Inline SVG

 <svg width="24" height="24"  viewBox="0 0 24 24"  fill="none" stroke="currentColor"  stroke-width="2">  ...path data </svg> 

CDN

 <script src="https://unpkg.com/  lucide@latest"></script> <i data-lucide="mail"></i> 

Formaten

Icon Sizes

16px (sm) Inline, labels

20px (md) Buttons, inputs

24px (lg) Standaard

32px (xl) Features, cards

Beschikbaar

Icon Library (69 icons)

palette

type

ruler

sparkles

smile

mouse-pointer-click

text-cursor-input

heading

badge

image

square

form-input

navigation

file-text

table

panel-top

layout-template

layout-list

clipboard-list

gallery-horizontal

box

grid-3x3

columns-2

box-select

layers

monitor

puzzle

stamp

camera

pen-tool

info

mail

briefcase

arrow-right

arrow-left

check

x

plus

minus

search

menu

chevron-down

chevron-up

chevron-right

chevron-left

external-link

copy

download

upload

edit

trash

settings

user

heart

star

home

clock

calendar

phone

link

eye

eye-off

filter

sort

refresh

loader

alert-circle

check-circle

x-circle

Richtlijnen

Best Practices

Consistente grootte

Gebruik dezelfde icon grootte binnen een component of sectie.

Voldoende contrast

Zorg dat icons goed zichtbaar zijn tegen de achtergrond.

Betekenisvol gebruik

Kies icons die de actie of content duidelijk representeren.

Niet mixen

Combineer geen verschillende icon sets in één interface.

Niet uitrekken

Schaal icons altijd proportioneel, nooit vervormen.

Niet overmatig

Gebruik icons spaarzaam, niet bij elk element.

Resources

Links

Lucide Icons Volledige icon bibliotheek met zoekfunctie lucide.dev/icons → React Package Documentatie voor lucide-react React docs → GitHub Source code en contributie github.com →