diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js
index 2b98e8e62..1c29d25b3 100644
--- a/web/app/assets/javascripts/hoverBand.js
+++ b/web/app/assets/javascripts/hoverBand.js
@@ -6,7 +6,6 @@
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
-    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
     var hoverSelector = "#band-hover";
 
     this.showBubble = function() {
@@ -28,7 +27,7 @@
               instrumentHtml = '<td><div class="nowrap">';
               if (val.instruments) { // @FIXME: edge case for Test user that has no instruments?
                   $.each(val.instruments, function(index, instrument) {
-                      instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
+                      instrumentHtml += '<img src="' + context.JK.getInstrumentIcon24(instrument.instrument_id) + '" width="24" height="24" />&nbsp;';
                   });
               }
 
diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js
index 0cee5cb0f..e4443a8c4 100644
--- a/web/app/assets/javascripts/hoverMusician.js
+++ b/web/app/assets/javascripts/hoverMusician.js
@@ -6,7 +6,6 @@
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
-    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
     var hoverSelector = "#musician-hover";
 
     this.showBubble = function() {
@@ -20,7 +19,7 @@
           // instruments
           var instrumentHtml = '';
           $.each(response.instruments, function(index, val) {
-            instrumentHtml += '<div class="left mr10 mb"><img src="' + instrumentLogoMap[val.instrument_id] + '" width="24" height="24" /></div>';
+            instrumentHtml += '<div class="left mr10 mb"><img src="' + context.JK.getInstrumentIcon24(val.instrument_id) + '" width="24" height="24" /></div>';
           });
 
           // followings
diff --git a/web/app/assets/javascripts/hoverRecording.js b/web/app/assets/javascripts/hoverRecording.js
index 6d32b8ffa..e99d9fedd 100644
--- a/web/app/assets/javascripts/hoverRecording.js
+++ b/web/app/assets/javascripts/hoverRecording.js
@@ -5,7 +5,6 @@
   context.JK.RecordingHoverBubble = function(recordingId, position) {
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
-    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
     var hoverSelector = "#recording-hover";
 
     function deDupTracks(recordedTracks) {
@@ -61,7 +60,7 @@
 
               instrumentHtml = '<td><div class="nowrap">';
               $.each(val.instrument_ids, function(index, val) {
-                instrumentHtml += '<img src="' + instrumentLogoMap[val] + '" width="24" height="24" />&nbsp;&nbsp;';
+                instrumentHtml += '<img src="' + context.JK.getInstrumentIcon24(val) + '" width="24" height="24" />&nbsp;&nbsp;';
               })
               instrumentHtml += '</div></td>';
               
diff --git a/web/app/assets/javascripts/hoverSession.js b/web/app/assets/javascripts/hoverSession.js
index 373bd0cc6..f9bca235e 100644
--- a/web/app/assets/javascripts/hoverSession.js
+++ b/web/app/assets/javascripts/hoverSession.js
@@ -6,7 +6,6 @@
 
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
-    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
     var hoverSelector = "#session-hover";
 
     this.showBubble = function() {
@@ -28,7 +27,7 @@
               instrumentHtml = '<td><div class="nowrap">';
               var instruments = val.instruments.split("|");
               $.each(instruments, function(index, instrument) {
-                instrumentHtml += '<img src="' + instrumentLogoMap[instrument] + '" width="24" height="24" />&nbsp;';
+                instrumentHtml += '<img src="' + context.JK.getInstrumentIcon24(instrument) + '" width="24" height="24" />&nbsp;';
               });
 
               instrumentHtml += '</div></td>';