04
图标规范
圆角方形图块配方;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。