04

Іконографія

Рецепт заокругленої квадратної плитки; рамка 48x48, радіус 12px, тонований фон.

Рецепт плитки іконки

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

Тони

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.

Рекомендовані розміри

Інлайн-іконки: 12–16px. Toolbar/nav: 20px. Іконка картки всередині плитки 48x48: 24–28px. Логотип у шапці: 32–40px. Apple touch icon: 180px.