Contact usRequest a demo

Enterprise UX Kit

The Enterprise UX Kit provides additional theming, branding, and integration options for the Unblu UI. It lets you replace individual icons with custom SVGs and customize loading animations with custom animated SVGs.

The Enterprise UX Kit is available since Unblu 8.24.0.

The Enterprise UX Kit is a separately licensed feature of Unblu. The icon configuration properties are only visible and editable in the Account Configuration interface with a valid license.

Custom icons

With the Enterprise UX Kit, the icons and loading animations used in Unblu UIs are available as configuration properties in the Account and Global Server Configuration interfaces.

  • The icon configuration properties are available in the scopes GLOBAL, ACCOUNT, AREA, TEAM, USER, and APIKEY. This means you can configure different icon sets for different contexts, such as mobile integrations, named areas, or teams.

  • The keys of the icons' configuration properties all begin with com.unblu.theme.icons.*.

  • Each icon must be specified as an SVG <symbol>. No other image formats are supported.

Custom loading animations

Loading animations can be customized using the same SVG symbol approach as icons. To create a custom loading animation, provide an SVG <symbol> element that includes embedded SVG animations such as <animate> or <animateTransform> elements.

SVG symbol format

The SVG <symbol> element for an icon must meet the following requirements:

  • The id attribute must match the ID specified in the description of the icon’s configuration property and used in the default icon.

  • The <symbol> element must include the viewBox attribute. The default icons use a view box of 0 0 20 20.

  • Any custom loading animations must be embedded directly in the SVG. CSS animations are not supported.

The following example shows the default value of the add-circle-filled icon:

<symbol id="x-unblu-icon-add-circle-filled" viewBox="0 0 20 20">
  <path fill-rule="evenodd"
    d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m0 3a.75.75 0 0 1
       .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0
       1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75
       0 0 1 10 5"
    clip-rule="evenodd"/>
</symbol>

To replace this icon, provide your own SVG <symbol> element with the same id value (x-unblu-icon-add-circle-filled) in the configuration property com.unblu.theme.icons.addCircleFilledSymbol.

The icon editor

The configuration interfaces include a built-in icon editor with the following features:

  • Upload an SVG file

  • Remove colors so the icon inherits the theme colors

  • Preview the icon, both alone and on buttons

  • Edit the raw SVG markup

To access the icon editor, open the configuration property that defines the icon in the Account Configuration interface and click the preview of the current icon.

See also