Media
Logo
Brand and app logo block that supports both image mode and text mode. Use it for app identity on auth screens, lightweight top-of-screen branding, splash-like identity blocks, and text-logo fallback when no image is available.
Switch between a logo image and a styled text label - no separate component needed.
Top bars, onboarding areas, sign-in screens, and company profile sections.
Available on all plans.
Four things worth knowing
Image mode and text mode
Set useText to false to render logoUrl as an image. Set it to true to render logoText with configurable font size and family. Switch between modes from the property editor without touching code.
Placeholder when image is empty
If image mode is active but no logoUrl is set, the component shows a Tap to add logo placeholder. The layout stays intact and clearly prompts the builder user to add an image.
Pinch-to-resize in the editor
Logo size is controlled by logoSize. A pinch gesture can resize the logo while interacting in editor and runtime contexts. Size is clamped to a safe range in component logic.
Builder mode vs. preview mode
On the canvas, drag compatibility takes priority - press interactions are avoided. In preview and runtime, tapping the logo opens an internal options modal for switching mode, updating the image, or editing the text.
Find it, drop it, add the logo
Where to find itAdd it to any screen
- Component picker → Media → Logo.
- Drop it on any auth, splash, or branded screen section.
- Tap the placeholder on the canvas to open the image picker or switch to text mode.
Before you publishThree things to check
- Set a
logoUrlimage or enable Use Text Instead of Image and setlogoText- the placeholder is visible to all users until one of these is configured. - Tune
logoSizeandfontSizein the Style tab to match the screen layout. - Choose
fontFamilyto match your brand typography when using text mode.
Mode, image, text, and sizing
Every prop below is set directly in the property panel. Start with useText to pick the mode, then configure the relevant image or text props.
| Prop | Type | Default | Description |
|---|---|---|---|
useText | boolean | false | Switches between image mode (false) and text mode (true). |
logoUrl | string | ” | Image URI shown in image mode. Empty string shows the placeholder. |
logoText | string | ’Logo’ | Text shown in text mode. |
logoSize | number | 80 | Base logo width/height in px. Also used as fallback font size in text mode. |
fontSize | number | - | Explicit text font size in text mode. Overrides the logoSize fallback. |
fontFamily | string | ’Urbanist-Bold’ | Font face used in text mode. |
Make it yours
The defaults are a neutral starting point. The most impactful changes are mode, size, and font - adjust those first before touching anything else.
| Prop | Default | What it controls |
|---|---|---|
useText | false | Toggle between image and text mode from the Labels & Copy tab. |
logoSize | 80 | Master size control. Affects both image dimensions and text fallback size. |
fontSize | - | Fine-tune text size independently of logoSize in text mode. |
fontFamily | ’Urbanist-Bold’ | Font face for text mode. Choose from the font dropdown in the Style tab. |
Common mistakes to avoid
Set image or text before publishing
The Tap to add logo placeholder is visible to all users in a live app. Always configure either a logoUrl or a logoText value before going live.
Use text mode as a fallback, not a workaround
Text mode is useful when no image asset is ready yet or when a typographic logo fits the brand better. Avoid using it simply to skip uploading an image - a properly sized logo image always looks more polished.
logoSize drives both modes
logoSize controls the image dimensions and acts as the fallback font size in text mode. Set it first, then use fontSize only if you need to decouple the text size from the image size.
Keep logo placement consistent
Place the logo in the same position across all auth and onboarding screens. Inconsistent logo placement across screens weakens brand recognition and looks unfinished.