IcônesIcons

Bibliothèque officielle : Lucide Icons (licence ISC) — 1 500+ icônes, viewBox 24×24 strict, accessibilité WCAG 1.1.1 intégrée. L'épaisseur de trait varie par variante (voir tableau ci-dessous, ADR-091) pour compenser optiquement la mise à l'échelle. Référence canonique : lucide.dev. Official library: Lucide Icons (ISC license) — 1,500+ icons, strict 24×24 viewBox, built-in WCAG 1.1.1 accessibility. Stroke width varies per variant (see table below, ADR-091) to optically compensate for scaling. Canonical reference: lucide.dev.

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

inline

16px · stroke-width:1 — --agtc-semantic-icon-size-inline

control

20px · stroke-width:1.5 — --agtc-semantic-icon-size-control

nav

24px · stroke-width:1.75 — --agtc-semantic-icon-size-nav

Tokens sémantiquesSemantic tokens

Token CSS	RéférenceReference	ValeurValue	TraitStroke	IntentionIntent
`--agtc-semantic-icon-size-inline`	`semantic.icon.size.inline`	16px	1	Dans un texte courant, un labelIn body text, a label
`--agtc-semantic-icon-size-control`	`semantic.icon.size.control`	20px	1.5	Dans un bouton, un input, un badgeIn a button, input, or badge
`--agtc-semantic-icon-size-nav`	`semantic.icon.size.nav`	24px	1.75	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 <agtc-icon name="…" size="control">Always use <agtc-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 <agtc-icon> — pas de contrat d'accessibilitéInline SVG outside <agtc-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 : agtc-icon → See the full Web Component contract: agtc-icon →