IcônesIcons

Bibliothèque officielle : Lucide Icons (MIT) — 1 500+ icônes, cohérence géométrique stricte (strokeWidth: 1.5px), accessibilité WCAG 1.1.1 intégrée. Référence canonique : lucide.dev. Official library: Lucide Icons (MIT) — 1,500+ icons, strict geometric consistency (strokeWidth: 1.5px), built-in WCAG 1.1.1 accessibility. Canonical reference: lucide.dev.

Tailles — 3 échelons sémantiquesSizes — 3 semantic steps

inline

16px — --sda-semantic-icon-size-inline

control

20px — --sda-semantic-icon-size-control

nav

24px — --sda-semantic-icon-size-nav

Tokens sémantiquesSemantic tokens

Token CSS	RéférenceReference	ValeurValue	IntentionIntent
`--sda-semantic-icon-size-inline`	`semantic.icon.size.inline`	16px	Dans un texte courant, un labelIn body text, a label
`--sda-semantic-icon-size-control`	`semantic.icon.size.control`	20px	Dans un bouton, un input, un badgeIn a button, input, or badge
`--sda-semantic-icon-size-nav`	`semantic.icon.size.nav`	24px	Navigation, en-tête, emphaseNavigation, header, emphasis

Galerie — aperçu LucideGallery — Lucide preview

Extrait de 20 icônes. Catalogue complet sur lucide.dev. Sample of 20 icons. Full catalog at lucide.dev.

home

settings

user

bell

heart

star

trash-2

check

arrow-right

plus

edit

download

upload

eye

lock

mail

calendar

file-text

Règles absoluesAbsolute rules

Toujours utiliser <sda-icon name="…" size="control">Always use <sda-icon name="…" size="control">
Icône sémantique (seule info visible) → label="…" obligatoireSemantic icon (sole visible info) → label="…" required
Icône décorative (texte adjacent) → decorative obligatoireDecorative icon (adjacent text) → decorative required
Taille en dur : style="width:20px" — utiliser size="control"Hardcoded size: style="width:20px" — use size="control"
SVG inline hors <sda-icon> — pas de contrat d'accessibilitéInline SVG outside <sda-icon> — no accessibility contract
Icône sémantique sans label ni decorativeSemantic icon without label or decorative

ComposantComponent

Voir le contrat complet du Web Component : ds-icon → See the full Web Component contract: ds-icon →