Images
The ChatImages class holds the icons and images of the chat interface. By default, most icons are SF Symbols; chatBubble, sentStatusImage, and readStatusImage use raster resources from the SDK bundle. Any value can be replaced with an SF Symbol, a custom image from your own bundle, or a ready UIImage through ChatImage constructors.
Available images
Search
| Variable | Type | Purpose |
|---|---|---|
searchButtonImage | SF Symbol | Search icon |
searchNotFoundPlaceholderImage | SF Symbol | Image for "nothing found" |
Navigation
| Variable | Type | Purpose |
|---|---|---|
backButtonImage | SF Symbol | "Back" button icon. Not applied in 5.x — see Known issues |
nextButtonImage | SF Symbol | "Forward" button icon |
keyboardShowImage | SF Symbol | Show keyboard |
keyboardHideImage | SF Symbol | Hide keyboard |
Sending messages
| Variable | Type | Purpose |
|---|---|---|
sendButtonImage | SF Symbol | Send a message |
attachButtonImage | SF Symbol | Attach a file |
Placeholders
| Variable | Type | Purpose |
|---|---|---|
emptyChatPlaceholderImage | SF Symbol | Chat is empty |
errorPlaceholderImage | SF Symbol | Chat loading error |
Reactions
| Variable | Type | Purpose |
|---|---|---|
likeEmptyImage | SF Symbol | Inactive like |
likeFullImage | SF Symbol | Active like |
dislikeEmptyImage | SF Symbol | Inactive dislike |
dislikeFullImage | SF Symbol | Active dislike |
Rating
| Variable | Type | Purpose |
|---|---|---|
starRatingEmptyImage | SF Symbol | Inactive star |
starRatingFullImage | SF Symbol | Active star |
Files and media
| Variable | Type | Purpose |
|---|---|---|
fileImage | SF Symbol | File |
chatBubble | Custom | Message mask |
Scrolling
| Variable | Type | Purpose |
|---|---|---|
scrollToTopImage | SF Symbol | Scroll to top |
scrollToBottomImage | SF Symbol | Scroll to bottom |
Avatars
| Variable | Type | Purpose |
|---|---|---|
avatarPlaceholderImage | SF Symbol | Avatar placeholder |
Menus and actions
| Variable | Type | Purpose |
|---|---|---|
closeButtonImage | SF Symbol | Close |
menuCopyImage | SF Symbol | Copy |
menuQuoteImage | SF Symbol | Quote |
Voice messages
| Variable | Type | Purpose |
|---|---|---|
voiceButtonImage | SF Symbol | Voice recording |
voiceSendButtonImage | SF Symbol | Send voice message |
voicePlayImage | SF Symbol | Playback |
voicePauseImage | SF Symbol | Pause |
Message statuses
| Variable | Type | Purpose |
|---|---|---|
sentStatusImage | Custom | Message sent |
pendingStatusImage | SF Symbol | Message in progress |
readStatusImage | Custom | Message read |
Status icon color
sentStatusImage, pendingStatusImage, readStatusImage are initialized with tintColor: ChatColors().positive on first access. When you replace an image through ChatImages properties, set the desired tintColor explicitly — custom colors from ChatComponents.colors are not applied to these three tokens automatically.
Errors and notifications
| Variable | Type | Purpose |
|---|---|---|
errorInfoImage | SF Symbol | Error info icon |
errorAlertImage | SF Symbol | Error warning icon. Not applied in 5.x — see Known issues |
errorShieldImage | SF Symbol | File type error icon. Not applied in 5.x — see Known issues |
scheduleImage | SF Symbol | Schedule / out-of-hours icon |
editImage | SF Symbol | Edit icon |
Figma and SDK mapping
On the Foundation → Icons page in Figma, icons have their own naming system. The mapping between Figma names and ChatImages properties is below:
| Figma icon | Description (Figma) | SDK property |
|---|---|---|
icon/user | User avatar | avatarPlaceholderImage |
icon/star_empty | Empty rating star | starRatingEmptyImage |
icon/star_half | Half star | no direct token (the SDK supports only empty/full stars) |
icon/star_full | Full rating star | starRatingFullImage |
icon/file | Document | fileImage |
icon/state-send | Sent | sentStatusImage |
icon/state-received | Received / Delivered | ChatMessageStyle.deliveredStatusImage (not in ChatImages). By default it reads the current value of sentStatusImage; to use a separate icon, set deliveredStatusImage explicitly |
icon/state-error | Send error | errorInfoImage |
icon/state-sending | In progress | pendingStatusImage |
icon/state-edit | Editing | editImage |
icon/play | Audio playback | voicePlayImage |
icon/photos | Photo gallery | Not publicly configurable — the SDK icon is used |
icon/camera | Camera | Not publicly configurable — the SDK icon is used |
icon-spinner | Loading spinner | Icon not configurable (system UIActivityIndicatorView); color — through LoadingIndicatorStyle.indicatorColor |
icon/back | "Back" button | backButtonImage |
icon/forward | "Forward" button | nextButtonImage |
icon/mic | Microphone | voiceButtonImage |
icon/cite | Quote | menuQuoteImage |
icon/cancel | Close | closeButtonImage |
icon/scroll-down | Scroll down | scrollToBottomImage |
icon/arrow-up | Scroll up (to older messages) | scrollToTopImage |
icon/arrow-down | Scroll down (to newer messages) | scrollToBottomImage |
icon/calendar | Schedule | scheduleImage |
icon/menu | Attachment menu trigger | attachButtonImage (trigger button); the menu sheet itself is styled through chatMenuStyle (ChatMenuStyle — text and behavior only, not icons) |
icon/search | Search | searchButtonImage |
icon/delete | Delete | Through the context menu |
icon/copy | Copy | menuCopyImage |
icon/record | Voice recording | voiceButtonImage |
icon/attach | Attach a file | attachButtonImage |
The ChatImage class
Constructors
/// SF Symbol
init(system name: String, tintColor: UIColor? = nil)
/// SF Symbol with a specified size
init(system name: String, size: CGFloat = 14, tintColor: UIColor? = nil)
/// Custom image (specify the bundle it is stored in)
init(named: String,
bundle: Bundle = Bundle(for: ChatImage.self),
tintColor: UIColor? = nil,
renderingMode: UIImage.RenderingMode? = nil)
/// Wrap a ready UIImage
init(image: UIImage,
tintColor: UIColor? = nil,
renderingMode: UIImage.RenderingMode? = nil)
Usage example
let images = ChatImages()
images.avatarPlaceholderImage = ChatImage(system: "person.circle.fill", tintColor: .white)
images.sendButtonImage = ChatImage(system: "paperplane.fill")
images.attachButtonImage = ChatImage(system: "plus.circle")
let theme = ChatTheme(images: images)
chatCenterSDK.theme = theme
Builder pattern
To group several overrides into a single expression, use ChatImage.build(configure:) — analogous to ChatColors.build and ChatTypography.build. The method is declared on ChatImage but returns a ChatImages.
static func build(configure: (ChatImages) -> Void) -> ChatImages
| Field | Type | Required | Description |
|---|---|---|---|
configure | (ChatImages) -> Void | Yes | A closure where you mutate the required properties of the ChatImages being created |
Example:
let images = ChatImage.build { images in
images.sendButtonImage = ChatImage(system: "paperplane.fill", tintColor: .white)
images.attachButtonImage = ChatImage(system: "plus.circle")
images.avatarPlaceholderImage = ChatImage(system: "person.circle.fill")
}
let theme = ChatTheme(images: images)
chatCenterSDK.theme = theme