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

Iconos del panel

El conjunto canónico de iconos de producto utilizado en la navegación del panel de BetterGuard. Heroicons v2 outline en 24x24, stroke 2 round/round, servidos inline (sin biblioteca de iconos, sin sprite). Cada vez que se agregue un nuevo icono al panel, refléjelo también aquí.

Ofuscar Proteger

Historial Proteger

Ajustes Proteger

Foro de testers Proteger

Esquema Proteger

Tickets Soporte

Ayuda Soporte

Agentes Sistema

Estado Sistema

Admin Sistema

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

El escudo de Admin es una ruta personalizada, no un Heroicons estándar. No lo reemplace por el escudo estándar de Heroicons.

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

Ejemplo: Obfuscate (lock-closed). Copie este marcado directamente en una plantilla Blade; stroke="currentColor" toma el color del texto circundante.

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.