Index: lams_learning/web/includes/javascript/learnerPage.js
===================================================================
diff -u -r0a4686c3282eeb4f688ffb52a17818d8de6bbfd5 -r735e5ff1a7439c3b86b3448b18e324ea20eef5d0
--- lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 0a4686c3282eeb4f688ffb52a17818d8de6bbfd5)
+++ lams_learning/web/includes/javascript/learnerPage.js	(.../learnerPage.js)	(revision 735e5ff1a7439c3b86b3448b18e324ea20eef5d0)
@@ -21,16 +21,24 @@
                 let supportBarItems = $('.component-page-wrapper .component-sidebar #support-bar').removeClass('d-none')
                     .find('#support-bar-items').empty();
                 $.each(result.support, function (activityIndex, activityData) {
-                    let activityItem = $('<li>').attr('role', 'presentation')
-                        .addClass('support-bar-item progress-bar-item-openable')
-                        .prepend('<i class="fa-solid fa-fw fa-up-right-from-square progress-bar-icon">').appendTo(supportBarItems);
+                    let activityItem = $('<li>').attr('role', 'presentation').addClass('support-bar-item progress-bar-item-openable'),
+                        activityIconUrl = getActivityIconUrl(activityData),
+                        activityIcon = null;
+
+                    if (activityIconUrl) {
+                        activityIcon = $('<img class="progress-bar-icon">').attr('src', LAMS_URL + activityIconUrl);
+                    } else {
+                        activityIcon = $('<i class="fa-solid fa-fw fa-up-right-from-square progress-bar-icon"></i>');
+                    }
+
                     let activityLink = $('<a>').text(activityData.name).attr({
                         'target': '_blank',
                         'href': activityData.url,
                         'role': 'menuitem',
                         'title': 'Open completed activity'
                     });
-                    activityItem.addClass('progress-bar-item-openable').append(activityLink);
+                    activityItem.addClass('progress-bar-item-openable').append(activityIcon).append(activityLink)
+                        .appendTo(supportBarItems);
                 });
             }
 
@@ -39,26 +47,30 @@
             $.each(result.activities, function (activityIndex, activityData) {
                 let activityItem = $('<li>').attr('role', 'presentation').appendTo(progressBarItems),
                     activityName = !activityData.name && activityData.type === 'g' ? 'Gate' : activityData.name,
+                    activityIconUrl = getActivityIconUrl(activityData),
+                    activityIcon = null;
+
+                if (activityIconUrl) {
+                    activityIcon = $('<img class="progress-bar-icon">').attr('src', LAMS_URL + activityIconUrl);
+                } else {
                     activityIcon = $('<i class="fa-solid fa-fw progress-bar-icon"></i>');
+                }
 
                 if (activityData.status === 0) {
-                    activityItem.addClass('progress-bar-item-current').text(activityName).prepend(activityIcon);
-                    if (activityData.type === 'g') {
-                        activityIcon.addClass('fa-hourglass-half');
-                    } else {
+                    activityItem.addClass('progress-bar-item-current').append(activityIcon)
+                        .append($('<span class="progress-bar-activity-name">').text(activityName));
+                    if (!activityIconUrl) {
                         activityIcon.addClass('fa-pen-to-square');
                     }
                 } else if (activityData.status === 1) {
                     completedActivityCount++;
 
                     activityItem.addClass('progress-bar-item-complete').prepend(activityIcon);
-                    if (activityData.type === 'g') {
-                        activityIcon.addClass('fa-hourglass-full');
-                    } else {
+                    if (!activityIconUrl) {
                         activityIcon.addClass('fa-square-check');
                     }
                     if (activityData.url) {
-                        let activityLink = $('<a>').text(activityName).attr({
+                        let activityLink = $('<a class="progress-bar-activity-name">').text(activityName).attr({
                             'target': '_blank',
                             'href': activityData.url,
                             'role': 'menuitem',
@@ -67,10 +79,9 @@
                         activityItem.addClass('progress-bar-item-openable').append(activityLink);
                     }
                 } else {
-                    activityItem.addClass('progress-bar-item-incomplete').text(activityName).prepend(activityIcon);
-                    if (activityData.type === 'g') {
-                        activityIcon.addClass('fa-hourglass-start');
-                    } else {
+                    activityItem.addClass('progress-bar-item-incomplete').append(activityIcon)
+                        .append($('<span class="progress-bar-activity-name">').text(activityName));
+                    if (!activityIconUrl) {
                         activityIcon.addClass('fa-square');
                     }
                 }
@@ -108,4 +119,22 @@
             }
         });
     }
+}
+
+function getActivityIconUrl(activityData){
+    if (activityData.iconURL){
+        return activityData.iconURL;
+    }
+    if (activityData.type === 'g') {
+        return 'images/svg/gate' + (activityData.gateOpen ? 'Open' : 'Closed') + '.svg';
+    }
+    if (activityData.isGrouping) {
+        return 'images/svg/grouping.svg';
+    }
+    if (activityData.type === 'b') {
+        return 'images/svg/branchingStart.svg';
+    }
+    if (activityData.type === 'o') {
+        return 'images/svg/optional.svg';
+    }
 }
\ No newline at end of file