Category icons
Control the icon next to each category in the navigation.
Every category in the navigation gets an icon. The theme guesses one from the category's name and slug, and most of the time the guess is right — so you only touch this when it is not.
How the guess works
The theme looks for keywords in the category name and slug, in this order:
| If the name contains… | Icon |
|---|---|
| rank, vip, elite, legend, mvp, donor, tier, premium | Crown |
| key, crate, loot, chest | Key |
| kit, weapon, sword, gear | Swords |
| cosmetic, skin, costume, hat, cape | Sparkles |
| bundle, collection, pack | Layers |
| boost, booster, xp, speed | Zap |
| tag, prefix, suffix, title | Tag |
| perk, ability, power | Star |
| shield, protection, guard | Shield |
| gift, reward, bonus | Gift |
| trail, effect, particle | Wind |
| token, coin, currency | Flame |
| box, mystery, random | Boxes |
| package, item | Package |
| nothing matched | Your configured fallback |
So "VIP Ranks" gets a crown and "Mystery Crates" gets a key without you doing anything.
Overriding it
Site Settings → Nav icons.
| Field | What it does |
|---|---|
| Fallback | Icon used when no keyword matches. Defaults to ShoppingBag. |
| Icon mappings | One row per override: category ID → icon name. |
The 15 valid icon names
Only these exact names work, and they are case-sensitive. Anything else is ignored and the keyword guess is used instead — so a typo fails quietly rather than loudly.
Crown | Key | Sparkles |
Zap | Tag | Star |
Shield | Layers | Gift |
Swords | Flame | Wind |
Boxes | Package | ShoppingBag |
You can preview any of them at lucide.dev/icons.
Finding a category ID
The Category ID field wants Tebex's numeric ID, not the category name or slug.
Open the Tebex Creator Panel
Go to your webstore's Categories page.
Open the category
The numeric ID appears in the address bar, for example .../categories/2166856.
Use that number
Enter it as the Category ID and pick your icon name.
Example
Suppose you have a category called "Server Boosters" that you want to show a flame rather than the lightning bolt the keyword rule picks:
| Category ID | Icon |
|---|---|
2166856 | Flame |
Save, reload your site, and the navigation updates.
Adding an icon that is not on the list
The 15 available icons are a hand-picked subset of the Lucide icon set. To add
another, edit src/lib/categoryIcons.ts:
import {
Crown,
Key,
Rocket,
// …
} from "lucide-react";
export const ICON_MAP: Record<string, LucideIcon> = {
Crown,
Key,
Rocket,
// …
};Then rebuild. The new name becomes valid in the admin panel's Icon field.