Icons
1. What This Page Is For
The Icons page manages all icon sets displayed across the player-facing lobby on desktop and mobile viewports. Administrators can choose between the default System set or create up to 20 custom icon sets to replace individual graphics with still images (PNG, JPG, WEBP, GIF, SVG) or moving Lottie animations (.json).
This page is designed for brand designers and marketing operations to dress the site for seasonal events (such as Songkran, Chinese New Year, or Christmas) or maintain bespoke platform styling. When creating a new set, all icons inherit the system defaults; you only need to upload files for the specific icons you wish to customize.
2. Before You Begin
- Permission Requirements: You must have the 'Icons' permission in your staff role to view, create, edit, or delete icon sets. (Users without edit permissions see sets in read-only mode).
- Files and Constraints:
- Still Icons: Supported formats include PNG, JPG, WEBP, GIF, or SVG up to 1 MB per file (transparent backgrounds recommended).
- Moving Icons (Lottie): Standard JSON files (
.json) up to 1 MB. Lottie files must be self-contained with no external script dependencies or remote asset references, and can only be assigned to slots labeled Motion. - Icon Set Quota: A platform can maintain up to 20 active icon sets simultaneously. To create additional sets beyond this threshold, older unused sets must be deleted.
3. Page Layout and Components
The icon management interface consists of two connected views:
1. Icon Sets Overview
- Page Header: Displays the title Icons, subtitle, and the New icon set button in the top-right corner.
- Page Audit Bar: Displays the configuration version, last updater name, and timestamp of the currently active icon set.
- Icon Sets Section (Icon sets): Grid displaying the System set alongside custom sets with 6-icon preview strips, In use badges, and action buttons (Use this set, Edit, Delete).
- Deleted Sets Section: Displays archived sets (read-only mode).
- System Catalogue (Lobby Icon Catalogue): Bottom reference card listing all standard icons categorized across 8 groups with filtering and search tools.
2. Icon Set Editor
- Editor Header: Displays the set name, description, and Icon sets back button.
- Status and Alerts: Status badges indicating In use or Not in use alongside guidance notices (warns that publishing changes to the active set immediately impacts live players).
- Set Name Form Section: Text input for updating the set name (max 60 characters).
- Icons Section Card: Houses 4 filter tabs (All, Changed, Animated, Still) and an instant search bar.
- 8 Group Icon Grids: Displays individual icon tiles with source tags (System's, This set's, Not saved) and tile action buttons.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons.
4. Search and Filters
The Icon Set Editor and System Catalogue provide the following filtering and search tools:
| Tool | Type | Options / Usage | Filter Result |
|---|---|---|---|
| Filter Tabs | Tab buttons | Choose from: - All: Lists every icon slot in the system. - Changed: Filters down to slots modified in this custom set. - Animated: Filters to slots that support moving Lottie animations. - Still: Filters to standard still graphic slots. | The grid re-renders showing only tiles matching the selected tab criteria. |
| Search Input | Text box | Type any icon name or usage location, such as home, wallet, or deposit. | Filters down to icons matching the query in real time. |
| Clear Search | Clear button | Click the cross icon. | Clears the filter query and restores full group listings. |
5. Data Table and Layout Cards
8 Standard Icon Groups
| Group | Icon & Theme Tone | Location in Player Lobby | Example Icon Slots |
|---|---|---|---|
| Game tabs (tabs) | Grid icon (Blue) | Top and floating category navigation bars | Home, Slots, Casino, Fishing, Sports, Lottery |
| Home shortcuts (shortcuts) | House icon (Sky blue) | Rapid action shortcut buttons on homepage | Promotions, Activities, News, Mobile Quick Tabs |
| Home decorations (home) | Sparkle icon (Orange) | Header decorations and category title banners | Announcement bar, Hot games, Leaderboard, Big wins |
| Activities & rewards (rewards) | Gift box icon (Green) | Gamification modules and rewards systems | Coins, Diamonds, Spinner tickets, Trophies, Gift boxes |
| Navigation & menu (navigation) | Arrow icon (Purple) | Floating action buttons and slide-out drawers | Hamburger menu, Back button, Live chat |
| Badges & status (badges) | Tag icon (Pink) | Overlays on game cards and promotion tiles | Hot, New, Featured, Exclusive tags |
| Player menu (playerMenu) | User icon (Purple) | Player profile drawer and account modals | Bet history, Bank details, Change password |
| Site / others (site) | Bell icon (Grey) | General lobby UI utilities | Notifications, Deposits/Withdrawals, Contact us |
Actions on Icon Set Cards (Overview Page)
| Button | Style | Action Taken | Conditions |
|---|---|---|---|
| Use this set | Blue button | Opens confirmation modal to publish this set to the live website. | Available on sets not currently active. |
| Edit | Grey outline (Pencil) | Opens the Icon Set Editor. | Available when user has edit permissions. |
| View | Grey outline (Eye) | Opens set details in read-only inspection mode. | Visible for deleted sets or users without edit permissions. |
| Delete | Red ghost (Trash) | Opens confirmation modal to delete the set. | Enabled only for sets that are Not in use. |
Actions on Individual Icon Tiles (Editor Page)
| Button | Icon / Style | Action Taken | Display Conditions |
|---|---|---|---|
| Change | Grey upload icon | Opens native file browser to pick a new graphic or Lottie JSON file. | Available in edit mode. |
| Undo | Grey cross icon | Cancels a staged upload and restores the previously saved state. | Visible on tiles tagged Not saved. |
| Use the system's | Red reset arrow | Reverts the slot back to the platform default graphic. | Visible on tiles tagged This set's. |
6. Step-by-Step Guide
1. Creating a New Icon Set
- Navigate to Site look > Icons from the left navigation menu.
- Click New icon set in the top-right corner.
- In the popup modal, enter your desired Set name (e.g.
Songkran Festival 2026). - Click Create and edit.
- The system initializes a new set populated with system defaults and immediately routes you to the editor.
2. Replacing Individual Icons
- In the Icon Set Editor, locate the target icon slot using search or filter tabs.
- Click Change on that icon tile.
- Select an image file (PNG, JPG, WEBP, GIF, SVG) or Lottie animation (
.jsonfor motion slots) up to 1 MB. - The tile immediately displays the new graphic with an orange Not saved tag.
- Repeat for any other icons you wish to customize.
- Once finished, click Save in the bottom action bar.
- A green confirmation alert will notify you: "Icon set saved", and the tag turns into a green This set's badge.
3. Reverting an Icon to System Defaults
- On any tile marked with a green This set's badge, click Use the system's (reset arrow icon).
- The tag turns into an orange Not saved status.
- Click Save in the bottom action bar to confirm.
4. Activating an Icon Set on the Live Website
- Return to the Icons overview page.
- Locate the icon set you wish to publish.
- Click Use this set.
- In the confirmation modal, click Use this set again.
- The badge switches to a green In use tag, and players will see the new graphics from their next page load.
5. Deleting an Icon Set
- Verify that the set you wish to remove is not currently marked In use (if active, activate another set first).
- Click the red trash can icon (Delete) on the card.
- In the confirmation modal, click the red Delete button.
- The set moves to the Deleted sets section at the bottom (viewable, but cannot be edited or reactivated).
7. Form Fields and Settings
Form Fields in Create and Edit Modal
| Field | Required? | Description | Example | Constraints |
|---|---|---|---|---|
| Set name (Create) | Required | Name for the new icon collection. | Summer Carnival 2026 | 1–60 characters. |
| Set name (Edit) | Required | Updated name for the existing collection. | Songkran Festival | 1–60 characters; cannot be left blank. |
| Still Icon File | Optional | Graphic file for standard still slots. | menu-slot.svg | PNG, JPG, WEBP, GIF, SVG up to 1 MB. |
| Motion Icon File | Optional | Graphic or Lottie JSON file for motion slots. | anim-gift.json | Lottie .json or still image up to 1 MB; no external scripts. |
8. Popups and Confirmation Modals
1. New Icon Set Dialog
- Triggered When: Clicking New icon set in the top-right corner.
- What You See: Modal titled "New icon set", descriptive copy, Set name input field with red required asterisk, Cancel button, and Create and edit button.
- Action Required: Enter a descriptive name and click Create and edit.
- Result: Initializes the set and opens the editor.
2. Activate Icon Set Confirmation
- Triggered When: Clicking Use this set on any inactive icon set card.
- What You See: Confirmation prompt asking "Use the set (name)?", explanation of player impact, Cancel button, and blue Use this set button.
- Action Required: Confirm the name and click Use this set.
- Result: Immediately assigns the icon set to the live player lobby.
3. Delete Icon Set Confirmation
- Triggered When: Clicking Delete on an inactive icon set card.
- What You See: Red warning prompt asking "Delete the set (name)?", explanation that the set will be archived, Cancel button, and red Delete button.
- Action Required: Review the warning and click Delete.
- Result: Moves the set to the archived Deleted sets section.
4. Version Conflict Alert
- Triggered When: Another administrator edited or published an icon set before your action was submitted (Code 5451 or 1005).
- What You See: Red snackbar notification indicating concurrent modifications were detected.
- Action Required: Inspect refreshed data and re-apply changes.
9. Status Badges and Colors
| Badge / Indicator | Color | Meaning | Required Action |
|---|---|---|---|
| In use | Green | The icon set currently active across the live website. | Active; cannot be deleted. |
| Not in use | Grey | Stored custom set ready for publishing. | Can be edited, activated, or deleted. |
| Deleted | Red | Archived icon set. | View-only; cannot be restored or edited. |
| System's | Grey | Icon slot currently wearing the platform default graphic. | Click Change to upload a custom graphic if desired. |
| This set's | Green | Icon slot customized with a bespoke graphic in this set. | Click Change to replace, or reset arrow to restore system graphic. |
| Not saved | Orange | Staged file upload or reset awaiting Save submission. | Click Save in the bottom action bar. |
| Motion | Blue / Orange | Indicator tag marking slots that accept Lottie animations. | Can upload animated JSON or still graphics. |
10. Frequently Asked Questions and Troubleshooting
- Why is the Delete button disabled or hidden?
- Sets marked In use cannot be deleted to prevent broken lobby assets. Click Use this set on the System set or another collection first before deleting.
- Why does the system block me from creating a new icon set?
- Platforms have a ceiling of 20 active icon sets (Error code 5453). Delete unused sets to free up quota before creating a new one.
- Why does a Lottie (.json) upload fail with an error?
- Ensure the slot has a Motion tag; still graphic slots only accept standard image formats (PNG, JPG, WEBP, GIF, SVG).
- If "This Lottie file cannot be used (it holds code or files from elsewhere)" appears (Error code 5454), export the Lottie with embedded assets and no external script references.
- What is the maximum file size for icons?
- Every icon file must be strictly under 1 MB. Optimize graphics or compress Lottie vectors before uploading.
- Why do players still see old icons after I activated a new set?
- Asset changes take effect immediately on servers, but client browser caching may delay updates. Ask users to refresh the browser tab (Ctrl + F5 or Cmd + Shift + R).