Іконографія
Рецепт заокругленої квадратної плитки; рамка 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 |
Тони
Іконки панелі керування
Канонічний набір іконок продукту, що використовується в навігації панелі керування BetterGuard. Heroicons v2 outline розміром 24x24, stroke 2 round/round, вбудовані inline (без бібліотеки іконок, без sprite). Щоразу, коли на панель керування додається нова іконка, відображайте її і тут.
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. Toolbar/nav: 20px. Іконка картки всередині плитки 48x48: 24–28px. Логотип у шапці: 32–40px. Apple touch icon: 180px.