Step 4 — Assets & Icons¶

Guide: Customizing Your Frontend · Step 4 of 5
Live: https://docs.mozaiks.ai/guides/custom-frontend/assets.html

All brand assets live in brand/public/assets/ — served statically from the app root.

File layout¶

brand/public/
├── brand.json
├── ui.json
├── navigation.json
├── assets/
│   ├── logo.svg                 →  /assets/logo.svg
│   ├── wordmark.png             →  /assets/wordmark.png
│   ├── favicon.png              →  /assets/favicon.png
│   ├── chat_bg.png              →  /assets/chat_bg.png
│   ├── sparkle.svg              →  /assets/sparkle.svg
│   ├── settings.svg             →  /assets/settings.svg
│   ├── logout.svg               →  /assets/logout.svg
│   ├── notifications.svg        →  /assets/notifications.svg
│   └── profile.svg              →  /assets/profile.svg
└── fonts/
    └── Fagrak Inline.otf        →  /fonts/Fagrak Inline.otf

In brand.json and ui.json, reference filenames only (e.g. "logo.svg", not "/assets/logo.svg"). The runtime prepends the path.

ActionIcon filename rule¶

The ActionIcon component applies a strict check: the icon value must contain a dot.

✓ Valid	✗ Invalid — logs warning, renders null
`"sparkle.svg"`	`"sparkle"`
`"logo.png"`	`"SparkleIcon"`
`"settings.svg"`	`"icons/sparkle"`

This rule applies to every icon field in ui.json: header actions, profile menu items, profile button icon, notifications icon.

SVG format requirements¶

Use fill="currentColor" — not a hardcoded hex. Inherits CSS color from the parent.
Set viewBox="0 0 24 24" — remove fixed width/height attributes.
Strip editor metadata — remove xmlns:xlink, Illustrator comments, embedded rasters.
No fill="none" on outer elements if you want solid fills.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

Starter asset checklist¶

Filename	Used in	Format
`logo.svg`	Loading screen, header	SVG currentColor
`wordmark.png`	Header expanded	PNG transparent, max 200×40
`favicon.png`	Browser tab	PNG 32×32 or 64×64
`chat_bg.png`	Chat background	PNG/WebP, 1400px+
`profile.svg`	Profile fallback avatar	SVG currentColor 24×24
`notifications.svg`	Notification button	SVG currentColor 24×24
`settings.svg`	Profile menu items	SVG currentColor 24×24
`logout.svg`	Sign out menu item	SVG currentColor 24×24
`sparkle.svg`	Action button	SVG currentColor 24×24

PNG and WebP assets¶

Non-vector assets (wordmarks, backgrounds, favicons) are standard <img> tags — no SVG injection, no color theming. Use fully composed images with alpha transparency where needed.

For chat backgrounds: WebP at ~80% quality, 1400×900px source is sufficient for most viewports.

Prev: Step 3 — ui.json
Next: Step 5 — Wiring & Backend