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

仪表板图标

BetterGuard 仪表板导航中使用的标准产品图标集。Heroicons v2 outline 尺寸为 24x24,stroke 2 round/round,以内联方式提供(无图标库,无 sprite)。每当仪表板添加新图标时,请在此处同步。

混淆 保护
历史 保护
设置 保护
测试者论坛 保护
蓝图 保护
工单 支持
帮助 支持
代理 系统
状态 系统
Admin 系统

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

Admin 盾牌是自定义路径,不是标准的 Heroicons。请勿将其替换为标准的 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>

示例:Obfuscate (lock-closed)。将此标记直接复制到 Blade 模板中;stroke="currentColor" 会继承周围文本的颜色。

推荐尺寸

行内图标:12-16px。工具栏/导航:20px。48x48 图块内的卡片图标:24-28px。标志页眉:32-40px。Apple touch icon:180px。