title: Logo description: Drop your brand into any screen using text or image logos that are easy to style.

Logo

The Logo component keeps your branding consistent across onboarding flows, splash screens, navigation bars, and marketing screens.

What it does

Renders either a text-based logo or an uploaded image
Snaps into headers, hero sections, and navigation without manual spacing
Scales automatically so it looks sharp on both iOS and Android

Add it in the builder

Open the screen you want to brand and tap Add component → Branding → Logo.
Choose Text if you do not have an image handy; type your app or company name.
Choose Image to upload PNG, JPG, or SVG files. Export at 2x for best results.
Select alignment (left, center, right) and adjust spacing with the margin controls.
Preview the screen to confirm it feels balanced with the rest of your layout.

Configuration options

Type - Text or Image.
Text - wording, font family, weight, letter spacing, and color.
Image - upload file, set width/height, and add alt text for accessibility.
Alignment - left for headers, center for splash/auth screens, right for accent moments.
Background treatment - optional pill or badge behind the logo for higher contrast.

Example use

Splash screen: center the logo, add a short tagline underneath, and animate fade-in.
App header: left-align the logo next to a menu icon for instant recognition.
Footer: drop a smaller logo with legal links to keep the brand present.

Tips and best practices

Text logos are perfect for early drafts or when you update wording frequently.
Image logos should include transparent backgrounds and enough padding so they do not feel cramped.
Keep contrast high: dark logo on light background or vice versa.
Always provide alt text; it is how screen readers describe your brand to users.

Limitations

Animated logos are not supported yet.
SVG uploads larger than 1 MB may be compressed.
The component does not replace the app icon - update that separately in the Production tab.