Icons
Pick one icon library to style every glyph across your admin and client panels. Preview the six options, then Save to apply the change interface-wide.
What the Icons page does
The Icons page lets you choose a single icon library that draws every glyph across your admin and client panels. Sidebar icons, dashboard cards, buttons, status badges and menu markers all switch together to match the style you pick, so the whole interface stays visually consistent.
How to reach it
Open Settings in the admin panel, then look in the Appearance group of the settings menu and select Icons. The same group also contains Themes and Custom Code.
Choosing an icon library
The page shows the available libraries as a grid of cards. Each card displays the library name and a one-line description.
- Click a library card. The selected card is highlighted with a blue outline and a check mark, and the preview grid below redraws using icons from that library.
- Compare the preview. The preview always shows the same set of sample icons, so you can switch between cards and judge each library side by side without committing anything.
- Click Save. The Save button sits in the top-right corner of the page, next to the page heading. Until you click it, nothing changes for your users — selecting a card only updates the on-screen preview.
Selecting a card does not apply the change. The choice is only stored when you click Save. If you navigate away first, your previous library stays in effect.
Available libraries
Six icon libraries are offered. They differ in stroke style, corner shape and overall character — the icons themselves cover the same concepts, so any choice works for every feature.
| Library | Description |
|---|---|
| Lucide | Clean, consistent stroke icons. This is the default library. |
| Feather | Simply beautiful open-source icons by Cole Bemis. |
| Heroicons | Hand-crafted SVG icons by the Tailwind CSS team. |
| Tabler Icons | A large set of free, MIT-licensed SVG icons (over 5,000). |
| Phosphor | A flexible icon family with multiple weights. |
| Bootstrap Icons | The official open-source icon library for Bootstrap. |
The preview grid
Below the library cards, a preview grid renders a fixed set of representative icons in whichever library is currently selected. Its heading names the library being previewed, and each icon is labelled with its name so you can see exactly how common interface glyphs look. The previewed icons are:
Server, CreditCard, Users, Settings, Shield, Mail, Bell, Search, Globe, Database, Package, Zap, ShoppingCart, Tag, Lock, Star, Terminal, Eye, Download and Upload.
Because the preview shows the same icons for every library, it is the quickest way to compare style choices. Hover over an icon to see its name in a tooltip, and use the row of icons to judge stroke weight, fill and roundness before you commit.
How the change takes effect
When you click Save, a confirmation message appears and the new library is stored as your interface-wide icon setting. The change applies to both the admin and client panels. In most cases the new icons appear on the next page load without needing a full browser refresh, because the panels pick up the updated setting and re-render automatically.
If you have multiple staff members or customers signed in, they will see the new icons the next time their panel reloads. There is no need to clear caches or restart anything.
Tips and notes
- Pick a style that matches your brand. If your theme uses bold colours and rounded shapes, a softer icon set such as Phosphor or Heroicons can complement it; a crisp, technical look pairs well with Lucide, Feather or Tabler.
- Functionality never changes. Switching libraries only changes how icons look — every button, menu and page keeps working exactly the same way.
- Use the preview before saving. Cycle through all six cards and watch the preview grid; this is faster and safer than saving and then judging the result live.
- One library at a time. The whole interface uses a single library, so you cannot mix icons from different sets. This keeps the design consistent across every screen.
- The setting is shared. Your icon choice is not a per-person preference — it changes the look for everyone who uses your panels, so confirm the style works for both staff and customers.
Related
See Themes to change colours and branding, and Custom Code to add your own styling or scripts.