04

Iconographie

Une recette de tuile carrée arrondie ; cadre 48x48, rayon 12px, fond teinté.

Recette de la tuile d'icône

Tile size48x48
Tile radius12px
Inline icon12px to 16px
Toolbar / nav icon20px
Card icon24px to 28px inside a 48x48 tile
Stroke2 round/round
ViewBox24 24

Teintes

cyan
rgba(0, 139, 139, 0.3)
bg:icon-tint:cyan
green
rgba(34, 197, 94, 0.3)
bg:icon-tint:green
purple
rgba(124, 77, 255, 0.3)
bg:icon-tint:purple
orange
rgba(251, 146, 60, 0.3)
bg:icon-tint:orange
blue
rgba(59, 130, 246, 0.3)
bg:icon-tint:blue
red
rgba(239, 68, 68, 0.3)
bg:icon-tint:red

Icônes du tableau de bord

Le jeu d'icônes produit canonique utilisé dans la navigation du tableau de bord BetterGuard. Heroicons v2 outline en 24x24, stroke 2 round/round, intégrées en inline (pas de bibliothèque d'icônes, pas de sprite). Chaque fois qu'une nouvelle icône est ajoutée au tableau de bord, reflétez-la également ici.

Masquer Protéger
Historique Protéger
Paramètres Protéger
Forum des testeurs Protéger
Schéma Protéger
Tickets Support
Aide Support
Agents Système
Statut Système
Admin Système

Stroke: #9ca3af inactive (shown above) · #22d3ee active. Both inherited via stroke="currentColor" from the surrounding .nav-item color.

Le bouclier Admin est un tracé personnalisé, pas une icône Heroicons standard. Ne le remplacez pas par le bouclier Heroicons standard.

<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>

Exemple : Obfuscate (lock-closed). Copiez ce balisage directement dans un modèle Blade ; stroke="currentColor" reprend la couleur du texte environnant.

Tailles recommandées

Icônes inline : 12–16px. Toolbar/nav : 20px. Icône de carte dans une tuile 48x48 : 24–28px. Logo d'en-tête : 32–40px. Icône Apple touch : 180px.