Two themes, two icon packs, sixteen sidebar icons for GoHighLevel. Pick a combination, copy the CSS, paste it into the Custom CSS box.
Open index.html in your browser. That is the whole tool. One file, no install, no build
step, no account.
Skip the tool and paste a ready-made file from dist/:
| File | Look |
|---|---|
dist/midnight-outline.css |
Dark sidebar, thin stroked icons |
dist/midnight-solid.css |
Dark sidebar, filled icons |
dist/daylight-outline.css |
Light sidebar, thin stroked icons |
dist/daylight-solid.css |
Light sidebar, filled icons |
Paste one at the bottom of Agency → Settings → Company → Custom CSS, save, reload.
To undo, delete the block and save. It is CSS in a settings box; there is nothing to uninstall and nothing of yours is touched.
index.html adds what the static files cannot: your own accent colour, icon size, tighter row
spacing, and optional renaming of the menu items. It previews the sidebar live and hands you the
CSS.
Sixteen icons, one for each GoHighLevel sidebar item, drawn as inline SVG and embedded directly in the CSS as data URIs.
That last part is the useful bit. The usual way to change GoHighLevel menu icons is to upload sixteen images to the Media Library, open each one, copy its URL, and paste sixteen URLs into your CSS. Here there is nothing to upload and nothing to host. The icons travel inside the stylesheet, so they cannot 404 later and they do not depend on any server staying up, ours included.
Both packs draw the same sixteen shapes: Outline strokes them, Solid fills them. They stay
consistent with each other because they are one set of geometry rendered two ways.
Everything happens in the page you opened. No network request, no analytics, no storage, no
account. Verified rather than asserted: with the tool loaded, every automatic reference on the
page is a data: URI and there are no external ones. Read index.html and check for yourself.
node build.mjsNeeds Node 20 or newer and no dependencies. It lifts the data block out of index.html by its
comment markers, so the files in dist/ and the CSS the tool generates come from one source and
cannot drift apart. It refuses to write a stylesheet that lost its icons.
- These are GoHighLevel's own element ids (
#sb_contactsand friends). They were stable through mid-2026. If icons stop appearing after a GoHighLevel update, an id has been renamed; inspect the sidebar and update it. - Check contrast if you change the accent. A colour that looks fine on the dark theme often fails on the light one. Our contrast checker is a bookmarklet that outlines every failing element on the page.
- Want more than two themes? The HighLevel CSS Cookbook has the twenty-two individual recipes this was built from, including the login page and the traps to avoid.
- Keep a copy of your CSS outside the box. GoHighLevel stores one copy with no history.
MIT. See LICENSE. The sixteen icons are ours, drawn for this tool, and they are covered by the same licence: use them commercially, in client work, in your own product, and charge for the result.
What the licence asks of you: keep the copyright notice with the code. Every stylesheet this
tool writes already opens with it, and so does every file in dist/. Paste the block with its
header comment intact and you have met the licence.
What it does not ask: nothing in your own product. No credit in your UI, no logo, no link, no fee, no permission needed.
If you want to go further than the licence, a link back to github.com/DevTribeLabs/ghl-theme-starter is how the next person finds it. That is the whole return we were after.
Made by DevTribe Labs. We build tools for agencies running HighLevel.
GoHighLevel and HighLevel are trademarks of HighLevel Inc. DevTribe Labs is not affiliated with, endorsed by, or sponsored by HighLevel Inc.