Skip to main content

Customize Icons

VideoEditor SDK supports full control over the icons used in the editor UI.

Before we customize the editor icons, we add a small helper extension to UIImage in order to quickly create a new icon image for a specific size.

In this example, we replace some of the default icons with symbol images provided by SF Symbols. Beforehand, we need to create a symbol configuration with the scale variant set to .large as the default is too small for our use case.

In order to replace the default icons, simply register a blog using the IMGLY.bundleImageBlock property which is called once for each icon. Afterwards the icon image is loaded from the cache, so ideally we set this property before initializing the editor.

From this block, we return the replacement images using the UIImage extension we defined above. Returning nil from the block will result in usage of the default icon.

Icon Names#

Most icon image names use the pt postfix which states the expected dimensions for the used image measured in points (pt), e.g., the postfix _48pt stands for an image of 48x48 pixels for scale factor 1.0 and 96x96 pixels (@2x) as well as 144x144 pixels (@3x) for its high-resolution variants. In order to find out the signifiers for the respective icons you want to replace. Either print their names and consult the logs at runtime or search the Imgly.bundle located within the ImglyKit.frameworks, e.g. in the directory: ImglyKit.xcframework/ios-arm64/ImglyKit.framework/ImglyKit.bundle/