Let's assume there is a requirement to offer users in your ServiceNow instance with activated Next Experience UI a quick link to any already existing information page outside your ServiceNow instance.

The most prominent place for such a link would be the header bar, where we already find central functionalities like the combined Application & Update Set picker (globe icon) or the notification display (bell icon).

Unfortunately, there is no OOTB configuration available to inject another icon into the header bar. So the only way is extending the HTML code manually. And the only approach to implement something like this is creating a global UI script which waits until finished page loading to inject the required HTML code accordingly.

But first you have to decide for a certain icon. You can choose one at at https://developer.servicenow.com/dev.do#!/reference/next-experience/vancouver/now-components/now-ico...

Please note the corresponding ID of the icon (see red rectangle in the above screenshot) to insert it into the code (at number 1) I have provided below.

Then create a UI Script with the following properties:

API Name

(give any name)

UI Type

Desktop

Global

(checked)

Script

var injectCustomIcon = function (strIconId, strHtmlId, strHtmlTitle, strOnClick) {
    try {
        //is Next Experience UI loaded?
        if (!(top.NOW && top.NOW.isPolarisWrapper === "true")) {
            return;
        }

        //is the icon already injected?
        if (typeof window.top.custom_icon_injected !== 'undefined') {
          return;
        }       

        var objElement = window.top.document;

        //search for the DOM element for the icon bar
        [   
            'macroponent-f51912f4c700201072b211d4d8c26010', 'shadowRoot',
            'sn-polaris-layout', 'shadowRoot',
            'sn-polaris-header', 'shadowRoot',
            '.utility-menu'
        ].forEach(function (strId) {
            if (!objElement) {
                return;
            }

            objElement = strId === 'shadowRoot' ? objElement.shadowRoot : objElement.querySelector(strId);
        });

        //inject HTML code for the custom icon
        if (objElement) {
            jQuery(objElement).prepend(
                '<span role="button" tabindex="0" class="contextual-zone-button polaris-enabled" ' +
                    'id="' + strHtmlId + '" aria-label="' + strHtmlTitle + '" ' + 
                    'onclick="' + strOnClick + '" ' +
                    'title="' + strHtmlTitle + '" ' +
                    'aria-describedby="contextual_zone_' + strHtmlId + '_button" ' +
                    'aria-expanded="false"' + 
                '>' +
                    '<now-icon class="contextual-zone-icon" icon="' + strIconId + '" dir="ltr"></now-icon>' +
                    '<now-tooltip ' +
                        'id="' + strHtmlId + '-tooltip" ' +
                        'aria-label="' + strHtmlTitle + '" ' +
                        'role="tooltip" dir="ltr" aria-hidden="true">' +
                    '</now-tooltip>' +
                '</span>'       
            );

            top.custom_icon_injected = true;
        }
    }
    catch (e) {
        console.error(e);
    }
}

//after finished loading the page inject custom icon 
if (typeof jQuery === 'function') {
    jQuery(document).ready(
        injectCustomIcon(
            /* (1) ad the ID of the chosen icon */
            'circle-info-outline', 

            /* (2) HTML ID of the created icon */
            'my_custom_icon', 

            /* (3) text to display when hovering over the icon */
            'My custom icon. Click to action!', 

            /* (4) performed action when clicking on the icon */
            'window.open(\'https://www.servicenow.com\', \'_blank\');' 
        )
    );
}

At the end of the above script, you can see four parameters for the method injectCustomIcon() you have to adapt to your needs.