Ikonografia

Pyöristetyn neliölaatan resepti; 48x48 kehys, 12px säde, sävytetty tausta.

Ikonilaatan resepti

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

Sävyt

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

Hallintapaneelin kuvakkeet

BetterGuardin hallintapaneelin navigoinnissa käytetty kanoninen tuotekuvakesarja. Heroicons v2 outline koossa 24x24, stroke 2 round/round, upotettuna inline (ei kuvakekirjastoa, ei spriteä). Aina kun hallintapaneeliin lisätään uusi kuvake, peilaa se myös tänne.

Peittäminen Suojaus

Historia Suojaus

Asetukset Suojaus

Testaajien foorumi Suojaus

Kaavio Suojaus

Tiketit Tuki

Ohje Tuki

Agentit Järjestelmä

Tila Järjestelmä

Admin Järjestelmä

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

Adminin kilpi on mukautettu polku, ei vakio Heroicons. Älä korvaa sitä vakiona olevalla Heroicons-kilvellä.

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

Esimerkki: Obfuscate (lock-closed). Kopioi tämä merkintä suoraan Blade-mallipohjaan; stroke="currentColor" omaksuu ympäröivän tekstin värin.

Suositellut koot

Inline-ikonit: 12-16px. Toolbar/nav: 20px. Kortin ikoni 48x48-laatassa: 24-28px. Logo headerissa: 32-40px. Apple touch icon: 180px.