Icons and images

Replace any icon, reaction image or screen-state illustration of the community UI with your own asset. Every slot you leave out keeps the SDK default.

Android availableiOS availableFlutter ≥ 1.14.0React Native ≥ 1.14.0Unity ≥ 1.14.0

Before you begin

• Complete the Quickstart and read Theming: icons travel with the rest of your theme on Android, iOS, Flutter and React Native.
• Prepare square assets, ideally 24×24 with the drawn content in the central 14.5×14.5 area (a 4.75 transparent margin on each side). A non-square asset is displayed in fit mode and looks smaller.
• The SDK tints every icon with your theme colors and ignores the asset's own colors. Reaction images and screen-state illustrations are the exception: they keep their original colors.

Icons are grouped by area of the UI:

Group	Covers
groups	The group list and the group selector
content	Posts, comments, replies, video, polls and reactions
profile	Profile screens
gamification	Badges and the rules sheet
settings	The settings screens
common	Radio buttons, checkboxes, toggles, close, more actions, activity button, list navigation arrow
screenStates	Empty lists and failed first loads

warning

Icons follow the UI, so this API changes more often than the rest of the SDK: a slot can stop being used and be deprecated quickly.

---

Override icons in a group

Set only the icons you want to change, at the level of the group that holds them. This example replaces three icons of the post creation screen.

Android

The common icons sit at the top level of OctopusIconsDefaults.icons(): there is no common namespace.

Every icon is a @Composable () -> Painter lambda. Build the icons with the OctopusIconsDefaults helpers, then pass them to OctopusTheme through OctopusImagesDefaults.images(icons = …).

import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults
import com.octopuscommunity.sdk.ui.OctopusTheme
import com.octopuscommunity.sdk.ui.octopusComposables

octopusComposables(
    navController = navController,
    container = { _, content ->
        OctopusTheme(
            images = OctopusImagesDefaults.images(
                icons = OctopusIconsDefaults.icons(
                    content = OctopusIconsDefaults.content(
                        post = OctopusIconsDefaults.post(
                            creation = OctopusIconsDefaults.postCreation(
                                create = { painterResource(R.drawable.my_create_post) },
                                addPicture = { painterResource(R.drawable.my_add_picture) },
                                addPoll = { painterResource(R.drawable.my_add_poll) },
                            ),
                        ),
                    ),
                ),
            ),
            content = content,
        )
    },
)

iOS

Every icon is an optional UIImage. Build an OctopusTheme with assets: .init(icons: …) and pass it with the \.octopusTheme environment value.

import OctopusUI

let theme = OctopusTheme(
    assets: .init(
        icons: .init(
            content: .init(
                post: .init(
                    creation: .init(
                        open: UIImage(named: "myCreatePost"),
                        addPicture: UIImage(named: "myAddPicture"),
                        addPoll: UIImage(named: "myAddPoll")
                    )
                )
            )
        )
    )
)

OctopusHomeScreen(octopus: octopus)
    .environment(\.octopusTheme, theme)

Flutter

Pass an OctopusIcons through the icons parameter of the OctopusTheme you give to OctopusHomeScreen, OctopusHomeContent or showOctopusCreatePostScreen(theme: …). Each image is an OctopusIconSource:

Constructor	Source
await OctopusIconSource.asset('assets/icons/my_icon.png')	An image declared under flutter: assets: in pubspec.yaml, by its exact key. Package assets use packages/<name>/<path>.
OctopusIconSource.bytes(bytes)	Image bytes you already hold, for example a remote image your app downloaded.
const OctopusIconSource.base64(encoded)	A raw base64 string or a base64 data: URI.

Load the images once, before you build the widget.

import 'package:octopus_sdk_flutter/octopus_sdk_flutter.dart';

Future<OctopusTheme> buildOctopusTheme() async {
  return OctopusTheme(
    icons: OctopusIcons(
      content: OctopusContentIcons(
        post: OctopusPostIcons(
          creation: OctopusPostCreationIcons(
            open: await OctopusIconSource.asset('assets/icons/create_post.png'),
            addPicture: await OctopusIconSource.asset('assets/icons/add_picture.png'),
            addPoll: await OctopusIconSource.asset('assets/icons/add_poll.png'),
          ),
        ),
      ),
    ),
  );
}

// Later: OctopusHomeScreen(theme: await buildOctopusTheme())

Flutter maps each slot onto the native icons and ignores an image the native SDK cannot decode. It does not download remote images and supports neither SVG nor animated images; tinted icons need an alpha channel (PNG or WebP, not JPEG). On Android, it downsamples glyphs to 128 px and illustrations to 1024 px, rejects sources over 12 MiB, and does not render the post creation addPollOption and deletePollOption slots or the checkbox pair. The full slot list is in the plugin's theming guide.

React Native

Pass an OctopusIcons object through theme.icons to initialize(). Each image is an OctopusIconSource, the ImageResolvedAssetSource type of React Native: use Image.resolveAssetSource(require(…)) for a bundled image. A remote HTTP(S) source also works; the default icon stays visible until the download completes, and remains if it fails.

import { Image } from 'react-native';
import { initialize } from '@octopus-community/react-native';
import type { OctopusIcons } from '@octopus-community/react-native';

const icons: OctopusIcons = {
  content: {
    post: {
      creation: {
        open: Image.resolveAssetSource(require('./assets/icons/create_post.png')),
        addPicture: Image.resolveAssetSource(require('./assets/icons/add_picture.png')),
        addPoll: Image.resolveAssetSource(require('./assets/icons/add_poll.png')),
      },
    },
  },
};

await initialize({
  apiKey: 'YOUR_API_KEY',
  connectionMode: { type: 'sso', appManagedFields: [] },
  theme: { icons },
});

React Native accepts only the keys declared in OctopusIcons, and drops, with a warning, unknown keys and values without a string uri. On Android, the post creation addPollOption and deletePollOption slots and the checkbox pair are not rendered.

Unity

The groups are flattened into one OctopusIconSlot enum whose names start with the group (Content…, Profile…, Common…).

Call OctopusSDK.SetIcons(OctopusIcons icons) at runtime. OctopusIcons.Set takes an OctopusIconSlot and an OctopusIcon(androidDrawableName, iOSResourceName), and returns the same OctopusIcons so you can chain calls. Each name is resolved like the runtime logo:

Parameter	Value
androidDrawableName	An Android drawable shipped by your app or an Android library: my_icon for res/drawable/my_icon.png or .xml.
iOSResourceName	A path inside the app bundle when it contains a / (Data/Raw/my_icon.png for Assets/StreamingAssets/my_icon.png), otherwise the name of an image in the app's asset catalog.

Pass null for a platform to keep the default there. Icons are not Unity assets and the Theme Configuration window does not handle them: add the Android drawables and iOS resources to your build yourself.

OctopusSDK.SetIcons(new OctopusIcons()
    .Set(OctopusIconSlot.ContentPostCreationOpen,
        new OctopusIcon("my_create_post", "Data/Raw/my_create_post.png"))
    .Set(OctopusIconSlot.ContentPostCreationAddPicture,
        new OctopusIcon("my_add_picture", "Data/Raw/my_add_picture.png"))
    .Set(OctopusIconSlot.ContentPostCreationAddPoll,
        new OctopusIcon("my_add_poll", "Data/Raw/my_add_poll.png")));

Each call replaces the previous set: a slot missing from the new OctopusIcons goes back to its default, and OctopusSDK.SetIcons(null) restores every default. On iOS, SetIcons closes an open Octopus UI. On Android, it stores the icons, which apply from the next community screen opened.

Unity logs a warning when a resource is not found. A few slots exist on one platform only and are ignored on the other: ContentViews, ContentLike and ProfileDefaultAvatar on Android, CommonClose on iOS. On Android, the post creation addPollOption and deletePollOption slots and the checkbox pair are not rendered.

---

Shared icon parameters

Android availableiOS availableFlutter not availableReact Native not availableUnity not available

Some icons mean the same thing in several places, such as the report icon on a post and on a profile. The builders take convenience parameters that set every icon of the same meaning at once. They are builder arguments, not properties of the resulting icon set. An icon you set individually always wins over the convenience parameter.

Android

Builder	Parameter	Applies to
icons()	report	content.report, profile.report
icons()	close	content.deletePicture, and through it the deletePicture of post, comment and reply creation
content()	notAvailable	post.notAvailable, comment.notAvailable
content()	likeNotSelected	likeNotSelected of post, comment and reply
content()	addPicture	addPicture of post, comment and reply creation
content()	deletePicture	deletePicture of post, comment and reply creation
content()	send	create of comment and reply creation
content()	openResponseCreation	post.openCommentCreation, comment.openReplyCreation

A nested group you pass yourself, such as post = OctopusIconsDefaults.post(…), no longer receives the convenience parameters of its parent. Here the post creation screen gets its own "add picture" icon, while comments and replies get the shared one.

import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults

val images = OctopusImagesDefaults.images(
    icons = OctopusIconsDefaults.icons(
        report = { painterResource(R.drawable.my_report) },
        content = OctopusIconsDefaults.content(
            addPicture = { painterResource(R.drawable.my_add_picture) },
            post = OctopusIconsDefaults.post(
                creation = OctopusIconsDefaults.postCreation(
                    addPicture = { painterResource(R.drawable.my_post_add_picture) },
                ),
            ),
        ),
    ),
)

iOS

Initializer	Parameter	Applies to
Icons.init	defaultReport	content.report, profile.report
Content.init	defaultNotAvailable	post.notAvailable, comment.notAvailable
Content.init	defaultLikeNotSelected	likeNotSelected of post, comment and reply
Content.init	defaultAddPicture	addPicture of post, comment and reply creation
Content.init	defaultDeletePicture	deletePicture of post, comment and reply creation
Content.init	defaultCreateResponse	create of comment and reply creation
Content.init	defaultOpenResponseCreation	open of comment and reply creation

Here the post creation screen gets its own "add picture" icon, while comments and replies get the shared one.

import OctopusUI

let theme = OctopusTheme(
    assets: .init(
        icons: .init(
            content: .init(
                post: .init(
                    creation: .init(addPicture: UIImage(named: "myPostAddPicture"))
                ),
                defaultAddPicture: UIImage(named: "myAddPicture")
            ),
            defaultReport: UIImage(named: "myReport")
        )
    )
)

Flutter

Shared icon parameters are not yet available on Flutter. Set the icon on each slot that uses it.

React Native

Shared icon parameters are not yet available on React Native. Set the icon on each slot that uses it.

Unity

Shared icon parameters are not yet available on Unity. Set the icon on each slot that uses it.

---

Radio, checkbox and toggle icons

Radio buttons, checkboxes and toggles take a pair of images: one for the on state, one for the off state. A pair replaces the default control only when both images are set.

Android

radio, checkbox and toggle are parameters of icons() that take an OctopusIcons.OnOff(on, off). Their default is null, which keeps the Material3 RadioButton, Checkbox and Switch.

import com.octopuscommunity.sdk.ui.OctopusIcons
import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults

val images = OctopusImagesDefaults.images(
    icons = OctopusIconsDefaults.icons(
        radio = OctopusIcons.OnOff(
            on = { painterResource(R.drawable.my_radio_on) },
            off = { painterResource(R.drawable.my_radio_off) },
        ),
        checkbox = OctopusIcons.OnOff(
            on = { painterResource(R.drawable.my_checkbox_on) },
            off = { painterResource(R.drawable.my_checkbox_off) },
        ),
        toggle = OctopusIcons.OnOff(
            on = { painterResource(R.drawable.my_toggle_on) },
            off = { painterResource(R.drawable.my_toggle_off) },
        ),
    ),
)

iOS

radio, checkbox and toggle belong to the common group and take an OnOff(on:off:), whose two images are not optional. The default is the Octopus pair.

import OctopusUI

let theme = OctopusTheme(
    assets: .init(
        icons: .init(
            common: .init(
                radio: .init(on: UIImage(named: "myRadioOn")!, off: UIImage(named: "myRadioOff")!),
                checkbox: .init(on: UIImage(named: "myCheckboxOn")!, off: UIImage(named: "myCheckboxOff")!),
                toggle: .init(on: UIImage(named: "myToggleOn")!, off: UIImage(named: "myToggleOff")!)
            )
        )
    )
)

Flutter

common.radio, common.checkbox and common.toggle take an OctopusIconOnOff(on:, off:), which requires both images. If either image cannot be decoded, the pair keeps its default.

Future<OctopusIcons> buildOctopusIcons() async {
  return OctopusIcons(
    common: OctopusCommonIcons(
      toggle: OctopusIconOnOff(
        on: await OctopusIconSource.asset('assets/icons/toggle_on.png'),
        off: await OctopusIconSource.asset('assets/icons/toggle_off.png'),
      ),
    ),
  );
}

React Native

common.radio, common.checkbox and common.toggle take an OctopusIconOnOff with on and off. initialize() drops a pair that misses either image, logs a warning and keeps the default pair.

import { Image } from 'react-native';
import type { OctopusIcons } from '@octopus-community/react-native';

const icons: OctopusIcons = {
  common: {
    toggle: {
      on: Image.resolveAssetSource(require('./assets/icons/toggle_on.png')),
      off: Image.resolveAssetSource(require('./assets/icons/toggle_off.png')),
    },
  },
};

Unity

The pairs are CommonRadioOn / CommonRadioOff, CommonCheckboxOn / CommonCheckboxOff and CommonToggleOn / CommonToggleOff. A pair applies on a platform only when both halves have a resource for that platform.

OctopusSDK.SetIcons(new OctopusIcons()
    .Set(OctopusIconSlot.CommonToggleOn,
        new OctopusIcon("my_toggle_on", "Data/Raw/my_toggle_on.png"))
    .Set(OctopusIconSlot.CommonToggleOff,
        new OctopusIcon("my_toggle_off", "Data/Raw/my_toggle_off.png")));

---

Reaction images

Six reaction images appear on posts, comments and replies: heart, joy, mouthOpen, clap, cry and rage. They keep their original colors, so provide assets that already match your visual identity.

warning

Each image must match the meaning of its reaction. The SDK shows the reaction name next to the image on some screens and uses it as the accessibility label read by TalkBack and VoiceOver: heart is "Like", joy "Haha", mouthOpen "Wow", clap "Celebrate", cry "Sad" and rage "Angry". A party image on cry would be announced as "Sad".

Android

Pass OctopusIconsDefaults.reaction(…) as the reaction parameter of content().

import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults

val images = OctopusImagesDefaults.images(
    icons = OctopusIconsDefaults.icons(
        content = OctopusIconsDefaults.content(
            reaction = OctopusIconsDefaults.reaction(
                heart = { painterResource(R.drawable.my_heart) },
                joy = { painterResource(R.drawable.my_joy) },
                mouthOpen = { painterResource(R.drawable.my_mouth_open) },
                clap = { painterResource(R.drawable.my_clap) },
                cry = { painterResource(R.drawable.my_cry) },
                rage = { painterResource(R.drawable.my_rage) },
            ),
        ),
    ),
)

iOS

Pass reaction: .init(…) to the content group.

import OctopusUI

let theme = OctopusTheme(
    assets: .init(
        icons: .init(
            content: .init(
                reaction: .init(
                    heart: UIImage(named: "myHeart"),
                    joy: UIImage(named: "myJoy"),
                    mouthOpen: UIImage(named: "myMouthOpen"),
                    clap: UIImage(named: "myClap"),
                    cry: UIImage(named: "myCry"),
                    rage: UIImage(named: "myRage")
                )
            )
        )
    )
)

Flutter

Pass an OctopusReactionIcons as content.reaction.

Future<OctopusIcons> buildOctopusIcons() async {
  return OctopusIcons(
    content: OctopusContentIcons(
      reaction: OctopusReactionIcons(
        heart: await OctopusIconSource.asset('assets/reactions/heart.png'),
        clap: await OctopusIconSource.asset('assets/reactions/clap.png'),
      ),
    ),
  );
}

React Native

Set the images under content.reaction.

import { Image } from 'react-native';
import type { OctopusIcons } from '@octopus-community/react-native';

const icons: OctopusIcons = {
  content: {
    reaction: {
      heart: Image.resolveAssetSource(require('./assets/reactions/heart.png')),
      clap: Image.resolveAssetSource(require('./assets/reactions/clap.png')),
    },
  },
};

Unity

The slots are ContentReactionHeart, ContentReactionJoy, ContentReactionMouthOpen, ContentReactionClap, ContentReactionCry and ContentReactionRage.

OctopusSDK.SetIcons(new OctopusIcons()
    .Set(OctopusIconSlot.ContentReactionHeart,
        new OctopusIcon("my_heart", "Data/Raw/my_heart.png"))
    .Set(OctopusIconSlot.ContentReactionClap,
        new OctopusIcon("my_clap", "Data/Raw/my_clap.png")));

---

Screen state illustrations

Android ≥ 1.14.0iOS ≥ 1.14.0Flutter ≥ 1.14.0React Native ≥ 1.14.0Unity not available

The screenStates group holds the illustrations shown when a list is empty or its first load fails. They appear on every list of the SDK: main feed, group list, group detail, post and comment detail, profile tabs and notification center. They keep their original colors: draw them on a transparent background so they sit on your community's background color.

Slot	Shown on
emptyContent	An empty list of posts or comments
emptyNotifications	An empty notification center
networkError	A first load that failed because the device is offline, next to a retry button
error	A first load that failed for any other reason, next to a retry button

Android

Pass OctopusIconsDefaults.screenStates(…) as the screenStates parameter of icons(). You can also replace a default without any theme code: add a drawable with one of these names to your app's src/main/res/drawable/. A screenStates lambda takes precedence over the drawable.

Drawable name	Slot
ic_octopus_screen_state_empty_content	emptyContent
ic_octopus_screen_state_empty_notifications	emptyNotifications
ic_octopus_screen_state_network_error	networkError
ic_octopus_screen_state_error	error

import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults

val images = OctopusImagesDefaults.images(
    icons = OctopusIconsDefaults.icons(
        screenStates = OctopusIconsDefaults.screenStates(
            emptyContent = { painterResource(R.drawable.my_empty_content) },
            emptyNotifications = { painterResource(R.drawable.my_empty_notifications) },
            networkError = { painterResource(R.drawable.my_network_error) },
            error = { painterResource(R.drawable.my_error) },
        ),
    ),
)

OctopusIconsDefaults.post(emptyFeed = …) has no effect: use screenStates.emptyContent instead.

iOS

Pass screenStates: .init(…) to Icons.init.

import OctopusUI

let theme = OctopusTheme(
    assets: .init(
        icons: .init(
            screenStates: .init(
                emptyContent: UIImage(named: "myEmptyContent"),
                emptyNotifications: UIImage(named: "myEmptyNotifications"),
                networkError: UIImage(named: "myNetworkError"),
                error: UIImage(named: "myError")
            )
        )
    )
)

Flutter

Pass an OctopusScreenStateIcons as screenStates.

Future<OctopusIcons> buildOctopusIcons() async {
  return OctopusIcons(
    screenStates: OctopusScreenStateIcons(
      emptyContent: await OctopusIconSource.asset('assets/illustrations/empty.png'),
      networkError: await OctopusIconSource.asset('assets/illustrations/offline.png'),
    ),
  );
}

React Native

Set the illustrations under screenStates.

import { Image } from 'react-native';
import type { OctopusIcons } from '@octopus-community/react-native';

const icons: OctopusIcons = {
  screenStates: {
    emptyContent: Image.resolveAssetSource(require('./assets/illustrations/empty.png')),
    networkError: Image.resolveAssetSource(require('./assets/illustrations/offline.png')),
  },
};

Unity

Screen state illustrations are not yet available on Unity. OctopusIconSlot has no slot for the screenStates group.

---

Full example

One theme that combines a logo, the top-level icons, a group override, the control pairs and the screen states.

Android

import com.octopuscommunity.sdk.ui.OctopusIcons
import com.octopuscommunity.sdk.ui.OctopusIconsDefaults
import com.octopuscommunity.sdk.ui.OctopusImagesDefaults
import com.octopuscommunity.sdk.ui.OctopusTheme
import com.octopuscommunity.sdk.ui.octopusComposables

octopusComposables(
    navController = navController,
    container = { _, content ->
        OctopusTheme(
            images = OctopusImagesDefaults.images(
                logo = { painterResource(R.drawable.my_logo) },
                icons = OctopusIconsDefaults.icons(
                    close = { painterResource(R.drawable.my_close) },
                    moreActions = { painterResource(R.drawable.my_more_actions) },
                    activityButton = { painterResource(R.drawable.my_activity) },
                    report = { painterResource(R.drawable.my_report) },
                    content = OctopusIconsDefaults.content(
                        addPicture = { painterResource(R.drawable.my_add_picture) },
                    ),
                    profile = OctopusIconsDefaults.profile(
                        defaultAvatar = { painterResource(R.drawable.my_default_avatar) },
                    ),
                    radio = OctopusIcons.OnOff(
                        on = { painterResource(R.drawable.my_radio_on) },
                        off = { painterResource(R.drawable.my_radio_off) },
                    ),
                    toggle = OctopusIcons.OnOff(
                        on = { painterResource(R.drawable.my_toggle_on) },
                        off = { painterResource(R.drawable.my_toggle_off) },
                    ),
                    screenStates = OctopusIconsDefaults.screenStates(
                        emptyContent = { painterResource(R.drawable.my_empty_content) },
                        networkError = { painterResource(R.drawable.my_network_error) },
                    ),
                ),
            ),
            content = content,
        )
    },
)

iOS

The account, logout and deleteAccountWarning icons of settings are shown only in Octopus authentication mode, not with SSO.

import OctopusUI

let icons = OctopusTheme.Assets.Icons(
    groups: .init(
        openList: UIImage(named: "myGroupList"),
        selected: UIImage(named: "myGroupSelected")
    ),
    content: .init(
        post: .init(
            creation: .init(
                open: UIImage(named: "myCreatePost"),
                topicSelection: UIImage(named: "myTopicArrow"),
                addPoll: UIImage(named: "myAddPoll")
            ),
            commentCount: UIImage(named: "myCommentCount"),
            viewCount: UIImage(named: "myViewCount")
        ),
        video: .init(
            muted: UIImage(named: "myMuted"),
            notMuted: UIImage(named: "myNotMuted")
        ),
        reaction: .init(
            heart: UIImage(named: "myHeart"),
            clap: UIImage(named: "myClap")
        ),
        delete: UIImage(named: "myDelete"),
        defaultAddPicture: UIImage(named: "myAddPicture")
    ),
    profile: .init(
        editPicture: UIImage(named: "myEditAvatar"),
        blockUser: UIImage(named: "myBlockUser")
    ),
    gamification: .init(
        badge: UIImage(named: "myBadge")
    ),
    settings: .init(
        help: UIImage(named: "myHelp"),
        logout: UIImage(named: "myLogout")
    ),
    common: .init(
        radio: .init(on: UIImage(named: "myRadioOn")!, off: UIImage(named: "myRadioOff")!),
        toggle: .init(on: UIImage(named: "myToggleOn")!, off: UIImage(named: "myToggleOff")!),
        close: UIImage(named: "myClose"),
        moreActions: UIImage(named: "myMoreActions"),
        activityButton: UIImage(named: "myActivity"),
        listCellNavIndicator: UIImage(named: "myCellArrow")
    ),
    screenStates: .init(
        emptyContent: UIImage(named: "myEmptyContent"),
        networkError: UIImage(named: "myNetworkError")
    ),
    defaultReport: UIImage(named: "myReport")
)

let theme = OctopusTheme(
    assets: .init(logo: UIImage(named: "myLogo"), icons: icons)
)

Flutter

import 'package:octopus_sdk_flutter/octopus_sdk_flutter.dart';

Future<OctopusTheme> buildOctopusTheme() async {
  Future<OctopusIconSource> icon(String name) =>
      OctopusIconSource.asset('assets/icons/$name.png');

  return OctopusTheme(
    icons: OctopusIcons(
      content: OctopusContentIcons(
        post: OctopusPostIcons(
          creation: OctopusPostCreationIcons(open: await icon('create_post')),
        ),
        reaction: OctopusReactionIcons(heart: await icon('heart')),
      ),
      common: OctopusCommonIcons(
        toggle: OctopusIconOnOff(on: await icon('toggle_on'), off: await icon('toggle_off')),
        moreActions: await icon('more_actions'),
        activityButton: await icon('activity'),
      ),
      screenStates: OctopusScreenStateIcons(
        emptyContent: await icon('empty_content'),
        networkError: await icon('network_error'),
      ),
    ),
  );
}

React Native

import { Image } from 'react-native';
import { initialize } from '@octopus-community/react-native';
import type { OctopusIcons } from '@octopus-community/react-native';

const icons: OctopusIcons = {
  content: {
    post: {
      creation: { open: Image.resolveAssetSource(require('./assets/icons/create_post.png')) },
    },
    reaction: { heart: Image.resolveAssetSource(require('./assets/icons/heart.png')) },
  },
  common: {
    toggle: {
      on: Image.resolveAssetSource(require('./assets/icons/toggle_on.png')),
      off: Image.resolveAssetSource(require('./assets/icons/toggle_off.png')),
    },
    moreActions: Image.resolveAssetSource(require('./assets/icons/more_actions.png')),
    activityButton: Image.resolveAssetSource(require('./assets/icons/activity.png')),
  },
  screenStates: {
    emptyContent: Image.resolveAssetSource(require('./assets/icons/empty_content.png')),
    networkError: Image.resolveAssetSource(require('./assets/icons/network_error.png')),
  },
};

await initialize({
  apiKey: 'YOUR_API_KEY',
  connectionMode: { type: 'sso', appManagedFields: [] },
  theme: { icons },
});

Unity

OctopusSDK.SetIcons(new OctopusIcons()
    .Set(OctopusIconSlot.ContentPostCreationOpen,
        new OctopusIcon("my_create_post", "Data/Raw/my_create_post.png"))
    .Set(OctopusIconSlot.ContentReactionHeart,
        new OctopusIcon("my_heart", "Data/Raw/my_heart.png"))
    .Set(OctopusIconSlot.CommonToggleOn,
        new OctopusIcon("my_toggle_on", "Data/Raw/my_toggle_on.png"))
    .Set(OctopusIconSlot.CommonToggleOff,
        new OctopusIcon("my_toggle_off", "Data/Raw/my_toggle_off.png"))
    .Set(OctopusIconSlot.CommonMoreActions,
        new OctopusIcon("my_more_actions", "Data/Raw/my_more_actions.png"))
    .Set(OctopusIconSlot.CommonActivityButton,
        new OctopusIcon("my_activity", "Data/Raw/my_activity.png")));

---

Behavior and limits

• An image the SDK cannot load keeps the default of its slot.
• The former empty-state icons are no longer displayed: content.post.emptyFeedInGroups, emptyFeedInCurrentUserProfile, emptyFeedInOtherUserProfile, content.comment.emptyFeed, and the former empty-notifications icon (notifications.emptyNotifications or profile.emptyNotifications, depending on the platform). Set screenStates.emptyContent and screenStates.emptyNotifications instead.

Next steps

• Theming: colors, fonts, logo and the top app bar.
• Display the community: the entry points that receive your theme.
• Unified Profile: the activity button and the other profile icons in context.