Site Settings: Custom Icons
Upload custom SVG icons for use in menus, sidebars, footers, and marketing home page sections. Icons are validated, sanitised for security, and available across all icon pickers.
Custom icons allow you to upload your own SVG icons for use throughout the published site. Custom icons appear alongside the built-in icon libraries (Lucide, Heroicons, Bootstrap) in all icon pickers across the settings editor.
Uploading Custom Icons
SVG Requirements
| Requirement | Details |
|---|---|
| File format | SVG only (.svg extension) |
| Maximum file size | 50 KB |
| Allowed elements | Whitelist-based: path, circle, rect, line, polyline, polygon, ellipse, g, defs, clipPath, mask, use, symbol, text, tspan |
| Blocked elements | script, iframe, embed, object, foreignObject, and other potentially dangerous elements |
| Blocked attributes | Event handlers (onclick, onload, etc.), external resource references (xlink:href to external URLs), javascript: URLs |
Using Custom Icons
Once uploaded, custom icons are referenced using the custom:id format throughout the system. They appear in all icon pickers in the following areas:
| Area | Usage |
|---|---|
| Top menu items | Custom icon next to menu item label |
| Custom sidebar items | Custom icon for sidebar navigation items |
| Footer links | Custom icon next to footer link text |
| Feature grid items | Custom icon in marketing home page feature cards |
| Footer group titles | Custom icon next to group headings |
Managing Custom Icons
Icon Rendering
Custom icons are rendered as inline SVG in the published site. The SVG content is embedded directly in the HTML, which means custom icons work offline and do not require additional network requests.