The three icons next to search results (translate, shield, and three-dots menu) don't match each other visually.
Steps to replicate:
- Do any search on Kagi
- Look at the icons on the right side of search results
The problem (see image 1):
- The translate icon is has a box/frame around it that the others don't have
- The shield icon is larger
- They just don't look like they belong together
The icons should look like they're part of the same family:
- Same size across all three
- Same line thickness
- Same overall style (all outlined, not mixing filled and outlined)
- No boxes or frames on just one icon
Suggested fix (see image 2):
Switch to a consistent icon set like Lucide icons:
- Translate →
lucide-languages (cleaner, no box)
- Shield →
lucide-shield / lucide-shield-alert (for tracker warnings)
- Three dots →
lucide-more-vertical
For reference here is a Tampermonkey Script (written by AI)
// ==UserScript==
// @name Kagi Icon Replacer - Lucide Icons
// @namespace http://tampermonkey.net/
// @version 1.4
// @description Replace Kagi search result icons with Lucide icons
// @match https://kagi.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const lucideIcons = {
language: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-replaced" style="width: 15px !important; height: 15px !important;"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>',
shield: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-replaced" style="width: 16px !important; height: 16px !important;"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>',
shieldWarning: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-replaced lucide-shield-warning" style="width: 16px !important; height: 16px !important;"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>',
dots: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-replaced" style="width: 16px !important; height: 16px !important;"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>'
};
let debounceTimer;
let isReplacing = false;
function replaceIcons() {
if (isReplacing) return;
isReplacing = true;
try {
// Translate icons
document.querySelectorAll('.__sri-translate:not(.lucide-replaced)').forEach(container => {
const svg = container.querySelector('svg');
if (svg) {
container.innerHTML = lucideIcons.language;
container.classList.add('lucide-replaced');
}
});
// Shield icons (normal)
document.querySelectorAll('._0_rank-icons:not(.lucide-replaced)').forEach(container => {
const svg = container.querySelector('svg');
if (svg) {
const useElement = svg.querySelector('use');
if (useElement) {
const href = useElement.getAttribute('href') || useElement.getAttribute('xlink:href');
// Check if it's the warning shield
if (href === '#icon_shield_warning') {
container.innerHTML = lucideIcons.shieldWarning;
} else if (href === '#icon_shield_normal') {
container.innerHTML = lucideIcons.shield;
}
container.classList.add('lucide-replaced');
}
}
});
// Dots icons
document.querySelectorAll('._0_k_ui_dropdown_first_item i:not(.lucide-replaced)').forEach(iTag => {
const svg = iTag.querySelector('svg');
if (svg && svg.querySelector('use[xlink\\:href="#icon_dots"]')) {
iTag.innerHTML = lucideIcons.dots;
iTag.classList.add('lucide-replaced');
}
});
} finally {
isReplacing = false;
}
}
// Initial runs
function init() {
replaceIcons();
setTimeout(replaceIcons, 200);
setTimeout(replaceIcons, 500);
setTimeout(replaceIcons, 1000);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
// Observe for dynamically loaded content
const observer = new MutationObserver((mutations) => {
const hasAddedNodes = mutations.some(m => m.addedNodes.length > 0);
if (!hasAddedNodes) return;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(replaceIcons, 150);
});
// Start observing
function startObserving() {
const mainContent = document.querySelector('._0_main-search-results, #_0_app_content, #app, main') || document.body;
observer.observe(mainContent, {
childList: true,
subtree: true
});
}
setTimeout(startObserving, 100);
})();
