Biểu tượng

Công thức khung vuông bo tròn; khung 48x48, bán kính 12px, nền tông màu.

Công thức khung biểu tượng

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

Tông

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

Biểu tượng bảng điều khiển

Bộ biểu tượng sản phẩm chuẩn được sử dụng trong điều hướng bảng điều khiển BetterGuard. Heroicons v2 outline kích thước 24x24, stroke 2 round/round, được phục vụ inline (không có thư viện biểu tượng, không có sprite). Mỗi khi một biểu tượng mới được thêm vào bảng điều khiển, hãy phản ánh nó ở đây.

Che giấu Bảo vệ

Lịch sử Bảo vệ

Cài đặt Bảo vệ

Diễn đàn người kiểm thử Bảo vệ

Sơ đồ Bảo vệ

Phiếu Hỗ trợ

Trợ giúp Hỗ trợ

Tác nhân Hệ thống

Trạng thái Hệ thống

Admin Hệ thống

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

Khiên Admin là một đường dẫn tùy chỉnh, không phải Heroicons tiêu chuẩn. Đừng thay thế nó bằng khiên Heroicons tiêu chuẩn.

<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>

Ví dụ: Obfuscate (lock-closed). Sao chép đánh dấu này trực tiếp vào mẫu Blade; stroke="currentColor" lấy màu của văn bản xung quanh.

Kích thước khuyến nghị

Biểu tượng inline: 12-16px. Toolbar/nav: 20px. Biểu tượng thẻ bên trong khung 48x48: 24-28px. Tiêu đề logo: 32-40px. Apple touch icon: 180px.