UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

Icon resource

The icon resource contains icons that are used to compose views in UIKit. You can customize all the icons shown in the following table.

IconImageDescription

chat-hide

Hides the channel.

chat-show

Shows the channel.

add

Adds a file.

archive

Archives a channel.

arrow-left

Goes back to the previous screen.

ban

Indicates banned channel members.

broadcast

Shows a broadcast channel.

camera

Opens the user's camera app.

channels

Indicates a channel.

chat-filled

Indicates that there are channels.

chat

Indicates that there are no channels.

checkbox-off

Indicates that a check box hasn't been selected.

checkbox-on

Indicates that a check box has been selected.

chevron-down

Directs the user to the latest message.

chevron-right

Directs the user to the member list.

close

Closes a file viewer.

copy

Copies a message.

create

Creates a channel.

delete

Deletes an item.

document

Indicates a file.

done-all

Indicates that a message has been either read or delivered to all members of a channel.

done

Indicates that a message has been sent by the current user but not necessarily delivered to every member.

download

Downloads a file to the user's mobile app.

edit

Edits a message.

emoji-more

Shows more emojis.

error

Indicates an error in channel list.

file-audio

Indicates an audio file.

file-document

Indicates a document file.

freeze

Freezes a channel.

gif

Indicates a GIF file.

info

Shows channel information.

leave

Leaves a channel.

members

Shows channel members.

message

Indicates that there are no messages.

moderations

Shows Moderation options.

more

Shows more options.

mute

Mutes notifications in a channel.

notifications-filled

Turns on notifications by swiping the icon in channel list.

notifications-off-filled

Mutes notifications by swiping the icon in channel list.

notifications

Indcates the notifications icon in channel settings.

operator

Indicates the channel operator.

photo

Indicates the user's photo library.

play

Indicates that the message is a video file.

plus

Invites a user to a channel from a user list.

question

Indicates an error in loading emojis.

refresh

Retries connection with Sendbird server.

remove

Clears the text field in message search bar.

reply-filled

Indicates that a user replied to another user's message.

reply

Replies to a message in the channel.

search

Indicates the message search feature.

send

Sends a message to the channel.

settings-filled

Shows the profile settings.

spinner

Indicates that a message or a screen is loading.

streaming

Indicates a video streaming button.

supergroup

Indicates a Supergroup channel.

theme

Indicates the UIKit light and dark themes.

thumbnail-none

Indicates a blank image.

unarchive

Unarchives a channel.

user

Indicates the default profile image of a user.


How to use

There are two ways to use icons in UIKit for React Native: use the Icon component or use the icon images set in the Icon.Assets object.

Icon component

As shown in the code below, you can use the Icon component of UIKit for React Native to render various icons.

import { Pressable } from 'react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';

const CameraButton = (props: object) => {
    return (
        <Pressable {...props}>
            <Icon icon={'camera'} size={24} color={'black'} />
        </Pressable>
    );
};

Icon.Assets

You can also use the icon images assigned to the Icon.Assets object.

import { Image, Pressable } from 'react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';

const CameraButton = (props: object) => {
    return (
        <Pressable {...props}>
            <Image source={Icon.Assets['camera']} style={{ width: 24, height: 24, tintColor: 'black' }} />
        </Pressable>
    );
};

Customize the icons

You can customize the icons by assigning a custom icon image to the Icon.Assets object.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['icon-name'] = require('your_icons/your-icon-name.png');