Bibliothèque de référence
Lucide est la bibliothèque d’icônes officielle Gradly. Fork moderne et activement maintenu de Feather Icons, environ 1500 icônes sous licence MIT.
Pourquoi Lucide :
- Style cohérent (outline, stroke uniforme)
- Maintenance active (contrairement à Feather figé)
- Intégration facile avec Astro (icônes en SVG ou composants React/Vue/Svelte)
- Licence MIT permissive
Aperçu du style Lucide
Échantillon d’icônes Lucide en couleur Primary 600 · stroke-2, round, outline
Style
| Paramètre | Valeur |
|---|---|
| Style | Outline (ligne), pas solid |
| Stroke width | 2 px |
| Stroke linecap | Round |
| Stroke linejoin | Round |
Ces paramètres sont les defaults Lucide : pas besoin de customiser, utiliser les SVG fournis tels quels.
État actuel du site
Le site utilise lucide-astro comme bibliothèque d’icônes officielle. Les icônes sont importées en tant que composants Astro tree-shaked :
---
import { Download, ArrowRight, Check } from 'lucide-astro';
---
<Download class="w-5 h-5" aria-hidden="true" />La migration depuis les SVG inline copiés-collés a été faite en avril 2026. Seul le gabarit src/pages/presentation.astro conserve des SVG inline custom (illustrations spécifiques aux slides commerciales).
Tailles recommandées
| Contexte | Taille |
|---|---|
| Dans le texte (à côté d’un label) | 16 px (w-4 h-4) ou 20 px (w-5 h-5) |
| Standalone (bouton icon-only) | 24 px (w-6 h-6) |
| Carte feature | 32 à 48 px (w-8 h-8 à w-12 h-12) |
| Hero décoratif | 64 px ou plus (w-16 h-16) |
Couleur
Par défaut, les icônes héritent de la couleur du texte parent via currentColor (attribut par défaut de Lucide).
<!-- L'icône prend la couleur du texte -->
<p class="text-gray-700">
<svg ...><path .../></svg>
Label
</p>Icônes “accent”
Pour les icônes marquantes (check dans les listes de tarifs, étoiles de qualité), utiliser explicitement Primary 600 (text-primary-600).
Icônes sémantiques
- Succès (check, valide) :
text-emerald-500 - Avertissement (alert) :
text-amber-500 - Erreur (x, danger) :
text-red-500
Accessibilité
Icônes décoratives
Si l’icône n’apporte pas d’information (ex. flèche décorative à côté d’un bouton), marquer aria-hidden="true" :
<button>
Télécharger
<svg aria-hidden="true" ...><path .../></svg>
</button>Icônes porteuses de sens
Si l’icône transmet une information seule (bouton icon-only), fournir un label accessible :
<button aria-label="Fermer">
<svg ...><path .../></svg>
</button>Emojis
Les emojis sont autorisés dans les contextes décontractés et très lisibles :
- ✅ FAQ, CTA humains, posts LinkedIn, guides
- ❌ CGV, documents légaux, signature email, bannière LinkedIn formelle, PDF brandbook
Préférer des emojis simples et culturellement neutres : ✅ ❌ ⚠️ ℹ️ 🎯 📊 🔐. Éviter les emojis ambigus ou culturellement marqués.
Ne pas faire
- ❌ Mélanger plusieurs bibliothèques d’icônes dans la même page (incohérence de style)
- ❌ Utiliser des icônes solides (Heroicons solid) à côté des Lucide outline
- ❌ Modifier le stroke width (2 px partout, ne pas casser la cohérence)
- ❌ Recolorer les icônes arbitrairement (utiliser les couleurs de la palette)