Code change:
private _renderBadges(historyItem: ISCMHistoryItem, templateData: HistoryItemTemplate): void { templateData.elementDisposables.add(autorun(reader => { const labelConfig = this._badgesConfig.read(reader); <ins> const firstColoredRef = historyItem.references?.find(ref => ref.color); </ins> templateData.labelContainer.textContent = ''; <del> const firstColoredRef = historyItem.references?.find(ref => ref.color); for (const ref of historyItem.references ?? []) { if (!ref.color && labelConfig === 'filter') { </del> <ins> // Group history item references by color const historyItemRefsByColor = groupBy2( (historyItem.references ?? []), ref => ref.color ? ref.color : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefsByColor)) { // Skip badges with no color if (key === '' && labelConfig !== 'all') { </ins> continue; } <del> if (ref.icon && ThemeIcon.isThemeIcon(ref.icon)) { const elements = h('div.label', { style: { color: ref.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), backgroundColor: ref.color ? asCssVariable(ref.color) : asCssVariable(historyItemHoverDefaultLabelBackground) } }, [ h('div.icon@icon'), h('div.description@description') ]); elements.icon.classList.add(...ThemeIcon.asClassNameArray(ref.icon)); elements.description.textContent = ref.name; elements.description.style.display = ref === firstColoredRef ? '' : 'none'; </del> <ins> // Group history item references by icon const historyItemRefByIconId = groupBy2(historyItemRefs, ref => ThemeIcon.isThemeIcon(ref.icon) ? ref.icon.id : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefByIconId)) { if (key === '' || historyItemRefs.length === 0) { continue; } </ins> <del> append(templateData.labelContainer, elements.root); </del> <ins> this._renderBadge(historyItemRefs[0], historyItemRefs[0] === firstColoredRef, templateData); </ins> } } })); } <ins> private _renderBadge(historyItemRef: ISCMHistoryItemRef, showDescription: boolean, templateData: HistoryItemTemplate): void { if (!ThemeIcon.isThemeIcon(historyItemRef.icon)) { return; } const elements = h('div.label', { style: { color: historyItemRef.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), backgroundColor: historyItemRef.color ? asCssVariable(historyItemRef.color) : asCssVariable(historyItemHoverDefaultLabelBackground) } }, [ h('div.icon@icon'), h('div.description@description') ]); elements.icon.classList.add(...ThemeIcon.asClassNameArray(historyItemRef.icon)); elements.description.textContent = historyItemRef.name; elements.description.style.display = showDescription ? '' : 'none'; append(templateData.labelContainer, elements.root); } </ins> private _getHoverActions(historyItem: ISCMHistoryItem) { return [ {

Related discussion:
text: Testing I wonder how well it scales to show multiple tag icons, why not find a new icon that resembles multiple tags: !
I like that. Adding as that would require a new Codicon...
!
Or just show one tag in the row, but show all of them on hover like you do now.
How about showing one badge pert type (ex: branch, remote branch, tag) and a number indicating how many they are. That way there is no need create new icons that would cause further confusion.
I am actually not entirely sure what value there is to distinguish 1 tag from N tags? I would just show 1 icon if there is any tag.
Seems reasonable. Let's start with that and see how things go.