LogoView

LogoView is a wrapper component for displaying company logos with support for square and wide variants, as well as automatic dark and light mode adaptation.

Platform availability: iOS 17.0+

When to use:

• Use LogoView when displaying your bank or company logo with automatic dark/light mode adaptation.
• Consider using a custom implementation when you need logo handling outside the design system's asset management.

It includes the following features:

• Six different logo types for various use cases.
• Automatic dark/light mode image switching.
• Configurable content mode for the underlying image view.
• Built-in accessibility support.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

LogoView

Initializers

LogoType Enum

Configuration

type

The type property determines which logo variant to display.

                                                        
                                                        
                                                            // Square logo with automatic dark/light mode
                                                        let squareLogo = LogoView(type: .square)
                                                        
                                                        // Wide logo with automatic dark/light mode
                                                        let wideLogo = LogoView(type: .wide)
                                                        
                                                        // Force dark mode variant
                                                        let darkLogo = LogoView(type: .squareDark)
                                                        
                                                            

contentMode

The contentMode property controls how the logo image fills its bounds.

                                                        
                                                        
                                                            // Default aspect fit
                                                        let logo = LogoView(type: .square)
                                                        
                                                        // Fill the entire bounds
                                                        let filledLogo = LogoView(type: .square, contentMode: .scaleToFill)
                                                        
                                                            

Usage

Basic usage

                                                        
                                                        
                                                            let logoView = LogoView(type: .square)
                                                        view.addSubview(logoView)
                                                        
                                                            

With custom content mode

                                                        
                                                        
                                                            let logoView = LogoView(type: .square, contentMode: .scaleToFill)
                                                        view.addSubview(logoView)
                                                        
                                                            

Setting constraints

                                                        
                                                        
                                                            let squareLogo = LogoView(type: .square)
                                                        
                                                        NSLayoutConstraint.activate([
                                                            squareLogo.heightAnchor.constraint(equalToConstant: 40),
                                                            squareLogo.widthAnchor.constraint(equalTo: squareLogo.heightAnchor, multiplier: 1),
                                                        ])
                                                        
                                                        view.addSubview(squareLogo)
                                                        
                                                            

Wide logo with recommended size

                                                        
                                                        
                                                            let wideLogo = LogoView(type: .wide)
                                                        
                                                        NSLayoutConstraint.activate([
                                                            wideLogo.heightAnchor.constraint(equalToConstant: 40),
                                                            wideLogo.widthAnchor.constraint(equalToConstant: 120),
                                                        ])
                                                        
                                                        view.addSubview(wideLogo)
                                                        
                                                            

Customization

Overriding logo assets

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

For app-logo-wide and app-logo-square, set:

• Scales: Single Scale
• Appearances: Any, Dark

For the remaining four assets, set:

• 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

• The component automatically sets the accessibility label using DesignSystem.Strings.LogoView.Accessibility.logo.
• The default localized value is "Bank logo".
• To change the accessibility label, modify the localized string in your Localizable.strings file.

                                                        
                                                        
                                                            // Default accessibility label is set automatically
                                                        let logo = LogoView(type: .square)
                                                        
                                                        // Override accessibility label if needed
                                                        logo.accessibilityLabel = "Your Bank Name"
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: DesignSystem.Assets

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.

Localization

The following strings are available for localization:

To customize these strings, add the keys to your app's Localizable.strings file.

See also

• Logos - Overview of available logo assets