圖示規範

圓角方形圖塊配方;48x48 外框、12px 圓角、帶色調的背景。

圖示圖塊配方

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

色調

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。工具列/導覽:20px。48x48 圖塊內的卡片圖示:24-28px。標誌頁首:32-40px。Apple touch icon:180px。