Icons

Genesys Widgets utilize icons in SVG format. Using SVG allows icons to be themed with different color fills and other SVG CSS properties. Using SVG icons also provides the highest rendering quality on all devices, no matter the zoom level, resolution, or DPI of the screen. Our icons scale to fit in any container, can be used inline or as blocks, and can be animated in orientation, colors, and other styles.

Our icons are available to our customers to use in their own custom extensions. This allows custom extensions to retain the look and feel of our prebuilt widgets. Some examples might be:

• Creating a custom launcher button for chat, using the chat icon
• Creating a custom widget with your choice of icon in the title bar
• Using our icons inline, inside text copy to refer to widgets by icon

Widgets includes two different sets of icons. The Multi-tone icon set utilizes multiple layers and colors per icon. The Outline icon set offers a minimalist approach to both design and color. You may use any of the icons for your own purpose.

Currently, icons cannot be customized or replaced.

How to use icons

Automatic HTML Injection

By applying the CSS class "cx-icon" and the attribute "data-icon" to an element, you can specify which icons you want and where.

Example:

<div id="your-element" class="cx-icon" data-icon="chat"> ...SVG icon will be inserted here </div>

You then pass your element as a jquery wrapped set or HTML string into the CXCommon.populateAllPlaceholders( $("#your-element") ) function, Widgets will insert the appropriate SVG icons into each specified element and return the HTML to you.

Fetching SVG Icon Markup

You can also fetch the markup for each SVG icon manually.

Example:

$("#your-element").append( CXCommon.Generate.Icon("chat") );

Multi-tone

Outline