Logos

Logos is an overview of the logo assets included in the Mobile Design System representing the Backbase brand.

Platform availability: iOS 17.0+

When to use:

• Use LogoView when displaying the app logo in navigation bars, splash screens, or onboarding flows.
• Consider using DesignSystem.Assets.appLogoSquare for compact spaces or app icons.
• Consider using DesignSystem.Assets.appLogoWide for headers or areas where horizontal space is available.

It includes the following features:

• Square and wide logo variants.
• Automatic dark/light mode adaptation.
• Easy asset reference through design system constants.
• Customizable for bank branding.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

Light

Dark

API reference

Available assets

Usage

Journey usage

Journeys should always use the LogoView component when a logo is needed.

                                                        
                                                        
                                                            // 1. Initialize the LogoView component
                                                        let squareLogo = LogoView(type: .square)
                                                        
                                                        // 2. Set the size (40x40 for square, 120x40 for wide)
                                                        NSLayoutConstraint.activate([
                                                            squareLogo.heightAnchor.constraint(equalToConstant: 40),
                                                            squareLogo.widthAnchor.constraint(equalTo: squareLogo.heightAnchor, multiplier: 1),
                                                        ])
                                                        
                                                        // 3. Add to your view
                                                        view.addSubview(squareLogo)
                                                        
                                                            

Direct asset usage

If you need to access logo images directly:

                                                        
                                                        
                                                            let squareLogo = DesignSystem.Assets.appLogoSquare
                                                        let wideLogo = DesignSystem.Assets.appLogoWide
                                                        
                                                            

Customization

Overriding with custom bank logo

To override the Backbase logo with your own bank's logo, add your logo PDF assets to your Xcode project's .xcassets in your main app bundle.
The asset names should match:

• app-logo-square
• app-logo-square-light
• app-logo-square-dark
• app-logo-wide
• app-logo-wide-light
• app-logo-wide-dark

Asset configuration for dynamic logos

For app-logo-wide and app-logo-square (dynamic variants), configure in Xcode:

• Scales: Single Scale
• Appearances: Any, Dark

Asset configuration for static logos

For the remaining four static variants (*-light and *-dark), configure:

• Appearances: None

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• Logo images are decorative by default.
• When using LogoView in contexts where the logo conveys meaning (such as identifying the app or brand), set an appropriate accessibilityLabel.
• Use the .image accessibility trait for logo images.

                                                        
                                                        
                                                            let logo = LogoView(type: .square)
                                                        logo.isAccessibilityElement = true
                                                        logo.accessibilityLabel = "Your Bank Name"
                                                        logo.accessibilityTraits = .image
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: None

Design tokens

Component styling is applied automatically through the design system's theming infrastructure.

JSON tokens

This component uses semantic tokens only. See Semantic tokens below.

Semantic tokens

These tokens are accessed via the public DesignSystem.shared API.

See also

• LogoView - Component for displaying logos