04

Ikonografia

Një recetë e pllakës katrore të rrumbullakosur; kornizë 48x48, rreze 12px, sfond me nuancë.

Receta e pllakës së ikonës

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

Nuancat

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.

Madhësitë e rekomanduara

Ikona inline: 12-16px. Toolbar/nav: 20px. Ikona karte brenda pllakës 48x48: 24-28px. Kreu i logos: 32-40px. Ikona Apple touch: 180px.