Iconografía

Una receta de tarjeta cuadrada redondeada; marco 48x48, radio 12px, fondo teñido.

Receta de tarjeta de icono

Tile size	48x48
Tile radius	12px
Inline icon	12px to 16px
Toolbar / nav icon	20px
Card icon	24px to 28px inside a 48x48 tile
Stroke	2 round/round
ViewBox	24 24

Tintes

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

Dashboard icons

The canonical product icon set used by the BetterGuard dashboard nav. Heroicons v2 outline at 24x24, stroke 2 round/round, served inline (no icon library, no sprite). Whenever a new icon is added to the dashboard, mirror it here.

Obfuscate Protect

History Protect

Settings Protect

Tester Forum Protect

Blueprint Protect

Tickets Support

Help Support

Agents System

Status System

Admin System

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

The Admin shield is a custom path, not stock Heroicons. Do not swap it for the stock Heroicons shield.

<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>

Example: Obfuscate (lock-closed). Copy this markup straight into a Blade template; stroke="currentColor" picks up the surrounding text color.

Tamaños recomendados

Iconos inline: 12–16px. Toolbar/nav: 20px. Icono de tarjeta dentro de tarjeta 48x48: 24–28px. Logo en cabecera: 32–40px. Icono Apple touch: 180px.