Logo Management
Customize your application's branding by providing your own logo files and configuring two simple environment variables. The system uses a naming convention that automatically resolves the correct logo variant based on context (sidebar, login page, light/dark mode).
Environment Variables
| Variable | Description | Example |
|---|---|---|
NEXT_PUBLIC_LOGO_PREFIX | Path prefix to your logo files (without extension) | /i/zynomi/logo-hb |
NEXT_PUBLIC_LOGO_EXT | File extension for logo files | png or svg |
Required Logo Files
Based on the prefix and extension you configure, provide these four logo files:
| File Pattern | Usage | Example |
|---|---|---|
{prefix}.{ext} | Main logo (light/default) | /i/zynomi/logo-hb.png |
{prefix}-dark.{ext} | Main logo (dark variant for sidebar) | /i/zynomi/logo-hb-dark.png |
{prefix}-mark.{ext} | Logo mark/icon (light/default) | /i/zynomi/logo-hb-mark.png |
{prefix}-mark-dark.{ext} | Logo mark (dark variant for collapsed sidebar) | /i/zynomi/logo-hb-mark-dark.png |
Configuration Example
Add these to your .env file:
# Logo Configuration
NEXT_PUBLIC_LOGO_PREFIX=/i/zynomi/logo-hb
NEXT_PUBLIC_LOGO_EXT=png
This configuration expects the following files in your public folder:
public/
└── i/
└── hb/
├── logo-hb.png # Main logo
├── logo-hb-dark.png # Dark variant (sidebar)
├── logo-hb-mark.png # Icon/mark
└── logo-hb-mark-dark.png # Icon dark variant
Logo Usage by Context
| Context | Logo Used |
|---|---|
| Login / Signup pages | Main logo ({prefix}.{ext}) |
| Sidebar (expanded) | Dark variant ({prefix}-dark.{ext}) |
| Sidebar (collapsed) | Mark dark variant ({prefix}-mark-dark.{ext}) |
Using SVG Format
For sharper logos at all screen sizes, use SVG:
NEXT_PUBLIC_LOGO_PREFIX=/i/mycompany/logo
NEXT_PUBLIC_LOGO_EXT=svg
Quick Checklist
- Create 4 logo files following the naming convention
- Place files in the
publicfolder with matching path - Set
NEXT_PUBLIC_LOGO_PREFIXin.env - Set
NEXT_PUBLIC_LOGO_EXTin.env - Restart the development server
tip
For best results, use transparent PNG or SVG files. The dark variants should be visible on dark/colored backgrounds (typically white or light-colored logos).