IconView

IconView is a themed image view component that serves as a UIKit replacement for UIImageView with built-in support for padding, corner radius, and background color.

Platform availability: iOS 17.0+

When to use:

• Use IconView when displaying icons that need padding, corner radius, or background color styling.
• Consider custom implementation when you need a simple image display without additional styling features.

It includes the following features:

• Customizable padding around the image.
• Configurable corner radius using design system types.
• Background color support separate from the image view.
• Intrinsic content size based on the image dimensions.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

	Background	Semantic colors

API reference

IconView

Properties

Initializers

Usage

Basic usage

                                                        
                                                        
                                                            let iconView = IconView()
                                                        iconView.image = DesignSystem.Assets.icPerson
                                                        
                                                        view.addSubview(iconView)
                                                        
                                                            

Customizing the icon

                                                        
                                                        
                                                            let iconView = IconView()
                                                        iconView.imageView.tintColor = .red
                                                        iconView.backgroundColor = UIColor.orange
                                                        iconView.cornerRadius = .medium()
                                                        iconView.padding = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
                                                        iconView.image = DesignSystem.Assets.icPerson
                                                        
                                                        view.addSubview(iconView)
                                                        
                                                            

Using the OOTB style with background

                                                        
                                                        
                                                            let style = DesignSystem.shared.styles.iconViewWithBackground <> { iconView in
                                                            iconView.image = DesignSystem.Assets.icPerson
                                                            iconView.cornerRadius = .small()
                                                        }
                                                        
                                                        let iconView = IconView()
                                                        style(iconView)
                                                        
                                                        view.addSubview(iconView)
                                                        
                                                            

Customization

Styling

Important notes

• To customize the image itself, use the sub-properties of imageView. For example: imageView.tintColor.
• To set the background color, set the backgroundColor property of IconView, not imageView.backgroundColor.
• To set the corner radius, set the cornerRadius property of IconView, not layer.cornerRadius.

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

• Set accessibilityLabel to describe the icon's meaning or purpose.
• Set isAccessibilityElement to true when the icon conveys important information.
• Set isAccessibilityElement to false for decorative icons.

                                                        
                                                        
                                                            let iconView = IconView()
                                                        iconView.image = DesignSystem.Assets.icPerson
                                                        iconView.accessibilityLabel = "User profile"
                                                        iconView.isAccessibilityElement = true
                                                        
                                                            

Dependencies

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

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

• IconButton - A button component with an icon