Iconography

Recipe ng rounded-square tile; 48x48 frame, 12px radius, tinted background.

Recipe ng icon tile

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

Mga Tint

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

Mga icon ng dashboard

Ang opisyal na hanay ng mga icon ng produkto na ginagamit sa nabigasyon ng dashboard ng BetterGuard. Heroicons v2 outline sa 24x24, stroke 2 round/round, na inihahatid nang inline (walang icon library, walang sprite). Sa tuwing may bagong icon na idadagdag sa dashboard, salaminin din ito rito.

Obfuscate Protektahan

Kasaysayan Protektahan

Mga setting Protektahan

Forum ng mga tester Protektahan

Blueprint Protektahan

Mga tiket Suporta

Tulong Suporta

Mga ahente Sistema

Status Sistema

Admin Sistema

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

Ang Admin shield ay isang custom na path, hindi karaniwang Heroicons. Huwag itong palitan ng karaniwang 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>

Halimbawa: Obfuscate (lock-closed). Kopyahin ang markup na ito nang direkta sa isang Blade template; ang stroke="currentColor" ay kumukuha ng kulay ng nakapaligid na teksto.

Mga inirerekomendang sukat

Inline icons: 12-16px. Toolbar/nav: 20px. Card icon sa loob ng 48x48 tile: 24-28px. Logo header: 32-40px. Apple touch icon: 180px.