아이코노그래피

둥근 사각형 타일 레시피. 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.