Iconic Firefox — userChrome CSS snippet which adds back icons for context and popup menus in Firefox. It uses only built-in icons for optimal performance and design consistency.

iconic_firefox.css

/* Iconic Firefox (https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895/) */
/* Author (c) 2025 emvaized */
/* Based on https://gist.github.com/qaz69wsx/83a90423163b65a8344b2e60fc356a58 (no longer available) */
/* For better compatibility with dark mode, enable `svg.context-properties.content.enabled` in `about:config` */

:root{
    --uc-popup-menu-icon-color: color-mix(in srgb, currentColor 75%, transparent);
}
.subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.toolbarbutton-icon,
.subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.protections-popup-footer-icon,
menuitem[data-l10n-id="text-action-redo"]:before{
	width:16px;
	height:16px;
	margin-inline-end:8px !important;
	-moz-context-properties:fill, fill-opacity;
	fill:var(--uc-popup-menu-icon-color);
}
menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory,
#appMenu-zoom-controls{
	padding-inline-start:calc(1em + 24px) !important;
	background-position:left 1em center;
	background-repeat:no-repeat;
	background-size:16px;
	-moz-context-properties:fill, fill-opacity;
	fill:var(--uc-popup-menu-icon-color) !important;
}
#fxa-manage-account-button>vbox>label{
	margin-inline-start:24px !important;
}
.PanelUI-remotetabs-notabsforclient-label{
	margin-inline-start:40px !important;
}
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text,
toolbarbutton[data-l10n-id*="-manage-"]{
	padding-inline-start:8px !important;
}
#appMenu-fxa-label2::before,
#fxa-manage-account-button::after{
	content:"";
	display:-moz-box;
	border-radius:50%;
	background:var(--avatar-image-url) no-repeat center/contain;
	-moz-context-properties:fill, fill-opacity;
	fill:var(--uc-popup-menu-icon-color);
}
#appMenu-fxa-label2::before{
	width:16px;
	height:16px;
	margin-inline-end:8px;
}
#fxa-manage-account-button::after{
	width:32px;
	height:32px;
}
.syncNowBtn{
	visibility:visible !important;
	-moz-box-ordinal-group:0 !important;
	margin-inline-end:8px;
    order:0 !important;
}
menupopup[needsgutter] {
    @media (-moz-platform: linux) or (-moz-platform: windows) {
        > :is(menu, menuitem):not([image], [checked="true"], [type="checkbox"], [type="radio"]) > .menu-icon {
            display: none !important;
        }
    }
}
#PanelUI-fxa-menu-setup-sync-button{
	list-style-image:url("chrome://browser/skin/sync.svg");
}
.subviewbutton[data-l10n-id$="-settings"]:not([data-l10n-id*="-manage-"]){
	list-style-image:url("chrome://global/skin/icons/settings.svg");
}
.subviewbutton[data-l10n-id="fxa-menu-connect-another-device"]{
	list-style-image:url("chrome://global/skin/icons/plus.svg");
}
#appMenu-new-tab-button2{
	list-style-image:url("chrome://browser/skin/new-tab.svg");
}
#appMenu-new-window-button2,
#appMenuRecentlyClosedWindows{
	list-style-image:url("chrome://browser/skin/window.svg");
}
#appMenu-new-private-window-button2{
	list-style-image:url("chrome://browser/skin/privateBrowsing.svg");
}
.subviewbutton[data-l10n-id="library-bookmarks-menu"],
#panelMenuBookmarkThisPage[starred],
#sidebar-switcher-bookmarks{
	list-style-image:url("chrome://browser/skin/bookmark-hollow.svg");
}
#panelMenuBookmarkThisPage{
	list-style-image:url("chrome://browser/skin/bookmark-hollow.svg");
}
#panelMenu_searchBookmarks,
#appMenu-find-button2,
#appMenuSearchHistory,
#allTabsMenu-searchTabs{
	list-style-image:url("chrome://global/skin/icons/search-glass.svg");
}
#panelMenu_viewBookmarksToolbar{
	list-style-image:url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
.subviewbutton[id$="-history-button"],
#sidebar-switcher-history{
	list-style-image:url("chrome://browser/skin/history.svg");
}
#appMenuRecentlyClosedTabs{
	list-style-image:url("chrome://browser/skin/tabs.svg");
}
#appMenuClearRecentHistory,
toolbarbutton.restoreallitem{
	list-style-image:url("chrome://browser/skin/forget.svg");
}
.subviewbutton[id$="-downloads-button"]{
	list-style-image:url("chrome://browser/skin/downloads/downloads.svg");
}
#appMenu-passwords-button{
	list-style-image:url("chrome://browser/skin/login.svg");
}
#appMenu-extensions-themes-button{
	list-style-image:url("chrome://mozapps/skin/extensions/extension.svg");
}
#appMenu-print-button2{
	list-style-image:url("chrome://global/skin/icons/print.svg");
}
#appMenu-save-file-button2{
	list-style-image:url("chrome://browser/skin/downloads/downloads.svg");
}
.subviewbutton[command="cmd_CustomizeToolbars"]{
	list-style-image:url("chrome://browser/skin/customize.svg");
}
.subviewbutton[oncommand="switchToTabHavingURI('about:performance', true)"]{
	list-style-image:url("chrome://global/skin/icons/performance.svg");
}
.subviewbutton[key="key_browserToolbox"]{
	list-style-image:url("chrome://devtools/skin/images/tool-inspector.svg");
}
.subviewbutton[key="key_aboutProcesses"]{
	list-style-image:url("chrome://devtools/skin/images/tool-profiler.svg");
}
.subviewbutton[key="key_aboutProcesses"] + .subviewbutton{
	list-style-image:url("chrome://global/skin/icons/developer.svg");
}
.subviewbutton[key="key_browserConsole"]{
	list-style-image:url("chrome://devtools/skin/images/tool-webconsole.svg");
}
.subviewbutton[key="key_toggleToolbox"]{
	list-style-image:url("resource://devtools-shared-images/command-pick.svg");
}
.subviewbutton[key="key_viewSource"]{
	list-style-image:url("chrome://devtools/skin/images/tool-styleeditor.svg");
}
.subviewbutton[key="key_responsiveDesignMode"]:not([checked="true"]){
	list-style-image:url("chrome://devtools/skin/images/command-responsivemode.svg");
	fill-opacity:0;
}
.subviewbutton[key="key_responsiveDesignMode"]+.subviewbutton{
	list-style-image:url("chrome://devtools/skin/images/command-eyedropper.svg");
}
.subviewbutton[data-l10n-id="appmenu-developer-tools-extensions"]{
	list-style-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
}
#appMenu-help-button2,
#appMenu_menu_openHelp
{
	list-style-image:url("chrome://global/skin/icons/help.svg");
}
#appMenu_menu_HelpPopup_reportPhishingtoolmenu{
	list-style-image:url("chrome://global/skin/icons/warning.svg");
}
#appMenu_feedbackPage{
	list-style-image:url("chrome://global/skin/icons/lightbulb.svg");
}
#appMenu_troubleShooting{
	list-style-image:url("chrome://devtools/skin/images/browsers/firefox.svg");
}
#appMenu_helpSafeMode{
	list-style-image:url("chrome://global/skin/icons/security.svg");
}
#appMenu_helpSwitchDevice {
	list-style-image:url("chrome://browser/skin/import.svg");
}
#appMenu_aboutName{
	list-style-image:url("chrome://global/skin/icons/info.svg");
}
#appMenu-quit-button2{
	list-style-image:url('chrome://browser/skin/sync-off.svg');
}
#sidebar-switcher-tabs{
	list-style-image:url("chrome://browser/skin/tab.svg");
}
#sidebar-reverse-position[label="Move Sidebar to Right"]{
	list-style-image:url("chrome://browser/skin/sidebars-right.svg");
}
#sidebar-reverse-position[label="Move Sidebar to Left"]{
	list-style-image:url("chrome://browser/skin/sidebars.svg");
}
.subviewbutton[data-l10n-id="sidebar-menu-close"]{
	list-style-image:url("chrome://global/skin/icons/close.svg");
}
#BMB_bookmarksPopup menuitem:not(.menuitem-iconic),
#PlacesToolbar .openintabs-menuitem{
	padding-inline-start:32px !important;
	background-position-x:8px;
}
#menu_newNavigatorTab,
menuitem[id$="openANewTab"]{
	background-image:url("chrome://browser/skin/new-tab.svg");
}
#menu_newNavigator,
#historyUndoWindowMenu,
#context_openTabInWindow,
menuitem[data-l10n-id*="-open-"][data-l10n-id$="-window"]{
	background-image:url("chrome://browser/skin/window.svg");
}
menuitem[data-l10n-id$="-private-window"]{
	background-image:url("chrome://browser/skin/privateBrowsing.svg") !important;
}
#menu_openFile{
	background-image:url("chrome://browser/skin/open.svg");
}
#menu_savePage,
#context-saveimage,
#context-savelink,
#context-saveframe,
#context-savevideo,
#context-savepage{
	background-image:url("chrome://browser/skin/downloads/downloads.svg");
}
menuitem[data-l10n-id$="-email"],
menuitem[data-l10n-id$="-email-link"]{
	background-image:url("chrome://browser/skin/mail.svg");
}
menuitem[data-l10n-id*="-print"]{
	background-image:url("chrome://global/skin/icons/print.svg");
}
#menu_importFromAnotherBrowser,
#browserImport{
	background-image:url("chrome://browser/skin/import.svg");
}
#menu_FileQuitItem{
	background-image:url('chrome://browser/skin/sync-off.svg');
}
menuitem[data-l10n-id="text-action-undo"],
menuitem[data-l10n-id$="-reopen-closed-tabs"]{
	background-image:url("chrome://global/skin/icons/undo.svg");
}
menuitem[data-l10n-id="text-action-redo"]:before{
	background-image:url("chrome://global/skin/icons/undo.svg");
	transform:scaleX(-1) !important;
	content: "";
	position: absolute;
	left: 16px;
}
menuitem[data-l10n-id="text-action-cut"]{
	background-image:url("chrome://browser/skin/edit-cut.svg");
}
menuitem[data-l10n-id="text-action-copy"],
#context-copyimage-contents,
#syncedTabsCopySelected{
	background-image:url("chrome://global/skin/icons/edit-copy.svg");
}
#context-stripOnShareLink,
menuitem[data-l10n-id="text-action-strip-on-share"]{
	background-image:url("chrome://browser/skin/fingerprint.svg");
}
menuitem[data-l10n-id="text-action-paste"]{
	background-image:url("chrome://browser/skin/edit-paste.svg");
}
menuitem[data-l10n-id="text-action-paste-no-formatting"]{
	background-image:url("chrome://browser/skin/edit-paste.svg");
}
menuitem[data-l10n-id="text-action-delete"],
#toolbar-context-remove-extension,
.downloadDeleteFileMenuItem,
menuitem[id^="placesContext_delete"],
#unified-extensions-context-menu-remove-extension,
#pageActionContextMenuRemoveExtension,
#context_moveTabToSavedGroup{
	background-image:url("chrome://global/skin/icons/delete.svg");
}
#menu_find,
#BMB_searchBookmarks,
#context-searchselect-private,
#context-searchselect,
#context-keywordfield,
#context-visual-search{
	background-image:url("chrome://global/skin/icons/search-glass.svg");
}
#toggle_PersonalToolbar,
#BMB_viewBookmarksToolbar{
	background-image:url("chrome://browser/skin/bookmarks-toolbar.svg");
}
#menu_customizeToolbars,
#toolbar-context-customize{
	background-image:url("chrome://browser/skin/customize.svg");
}
#viewSidebarMenuMenu,
#BMB_viewBookmarksSidebar{
	background-image:url("chrome://browser/skin/sidebars.svg");
}
#menu_bookmarksSidebar:not([checked="true"]),
menuitem[data-l10n-id="menu-bookmark-edit"]{
	background-image:url("chrome://browser/skin/bookmark.svg") !important;
}
#menu_historySidebar:not([checked="true"]){
	background-image:url("chrome://browser/skin/history.svg");
}
#menu_tabsSidebar:not([checked="true"]),
#sync-tabs-menuitem{
	background-image:url("chrome://browser/skin/tab.svg");
}
#menu_zoomEnlarge{
	background-image:url("chrome://browser/skin/add-circle-fill.svg");
}
#menu_zoomReduce{
	background-image:url("chrome://browser/skin/subtract-circle-fill.svg");
}
#repair-text-encoding{
	background-image:url("chrome://browser/skin/characterEncoding.svg");
}
#fullScreenItem:not([checked="true"]){
	background-image:url("chrome://browser/skin/fullscreen.svg");
}
#menu_readerModeItem{
	background-image:url("chrome://browser/skin/reader-mode.svg");
}
#sanitizeItem,
#placesContext_deleteHost,
menuitem[data-l10n-id="downloads-cmd-clear-list"]{
	background-image:url("chrome://browser/skin/forget.svg");
}
#historyUndoMenu{
	background-image:url("chrome://devtools/skin/images/debugging-tabs.svg");
}
menuitem[data-l10n-id*="bookmark-"]:not(.menuitem-iconic),
#context-bookmarkframe,
#placesContext_createBookmark{
	background-image:url("chrome://browser/skin/bookmark-hollow.svg");
}
#menu_openDownloads{
	background-image:url("chrome://browser/skin/downloads/downloads.svg");
}
#menu_openAddons{
	background-image:url("chrome://mozapps/skin/extensions/extension.svg");
}
#sync-setup{
	background-image:var(--avatar-image-url);
}
menuitem[data-l10n-id$="-sync-now"]{
	background-image:url("chrome://browser/skin/sync.svg");
}
#webDeveloperMenu{
	background-image:url("chrome://browser/skin/developer.svg");
}
#menu_taskManager{
	background-image:url("chrome://global/skin/icons/performance.svg");
}
#menu_browserToolbox{
	background-image:url("chrome://devtools/skin/images/fox-smiling.svg");
}
#menu_responsiveUI:not([checked="true"]){
	background-image:url("chrome://devtools/skin/images/command-responsivemode.svg");
	fill-opacity:0;
}
#menu_eyedropper{
	background-image:url("chrome://devtools/skin/images/command-eyedropper.svg");
}
#extensionsForDevelopers{
	background-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
}
#menu_pageInfo,
#context-viewimageinfo,
#context-viewframeinfo{
	background-image:url("chrome://global/skin/icons/info.svg");
}
#menu_preferences,
#openSettingsMenuItem,
#toolbar-context-customize-sidebar{
	background-image:url("chrome://global/skin/icons/settings.svg");
}
#menu_HelpPopup_reportPhishingtoolmenu{
	background-image:url("chrome://global/skin/icons/lightbulb.svg");
}
#aboutName{
	background-image:url("chrome://devtools/skin/images/browsers/firefox.svg");
}
#context_reloadTab,
#context_reloadSelectedTabs,
#context-reloadframe{
	background-image:url("chrome://global/skin/icons/reload.svg");
}
menuitem[id^="context_toggleMute"]:not([soundplaying], [muted]),
menuitem[id^="context_toggleMute"][soundplaying]:not([muted]),
#context-media-mute{
	background-image:url("chrome://global/skin/media/audio-muted.svg");
}
menuitem[id^="context_toggleMute"][muted],
#context-media-unmute{
	background-image:url("chrome://global/skin/media/audio.svg");
}
menuitem[data-l10n-id^="pin-"],
.customize-context-moveToPanel{
	background-image:url("chrome://browser/skin/pin-12.svg");
}
menuitem[data-l10n-id^="unpin-"],
.customize-context-moveToToolbar{
	background-image:url("chrome://browser/skin/pin.svg");
}
menuitem.sendtab-target[clientType="desktop"]{
	background-image:url("chrome://browser/skin/device-desktop.svg");
}
menuitem.sendtab-target[clientType="phone"]{
	background-image:url("chrome://browser/skin/device-phone.svg");
}
menuitem.sendtab-target[clientType="tablet"]{
	background-image:url("chrome://browser/skin/device-tablet.svg");
}
menuitem.sendtab-target[clientType="tv"]{
	background-image:url("chrome://browser/skin/device-tv.svg");
}
menuitem.sendtab-target[clientType="vr"]{
	background-image:url("chrome://browser/skin/device-vr.svg");
}
menuitem[data-l10n-id="full-screen-exit"]{
	background-image:url("chrome://browser/skin/fullscreen-exit.svg");
}
#paste-and-go{
	background-image:url("chrome://browser/skin/forward.svg");
}
.customize-context-reportExtension{
	background-image:url("chrome://global/skin/icons/warning.svg");
}
.downloadShowMenuItem,
#placesContext_showInFolder,
[data-l10n-id="places-add-folder-contextmenu"]{
	background-image:url("chrome://global/skin/icons/folder.svg");
}
.openintabs-menuitem,
menuitem[id^="context-open"]:is([id$="intab"], [id$="incontainertab"]),
menuitem[data-l10n-id$="-view-new-tab"],
menuitem[data-l10n-id$="-open-in-tab"]{
	background-image:url("chrome://global/skin/icons/open-in-new.svg");
}
#context-pocket,
#context-savelinktopocket{
	background-image:url("chrome://global/skin/icons/pocket-outline.svg");
}
menuitem[data-l10n-id$="-screenshot"]{
	background-image:url("chrome://browser/skin/screenshot.svg");
}
menuitem[data-l10n-id*="-copy-"][data-l10n-id*="-link"]:not(.menuitem-iconic){
	background-image:url("chrome://global/skin/icons/link.svg");
}
#context-searchselect[label*="Google"]{
	background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/google-com.ico");
}
#context-searchselect[label*="Bing"]{
	background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/bing-com.ico");
}
#context-searchselect[label*="DuckDuckGo"]{
	background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/duckduckgo-com.ico");
}
#context-inspect-a11y{
	background-image:url("chrome://devtools/skin/images/tool-accessibility.svg");
}
#context-inspect{
	background-image:url("resource://devtools-shared-images/command-pick.svg");
}
#context-media-play{
	background-image:url("chrome://global/skin/media/play-fill.svg");
}
#context-media-pause,
#doNotDisturbMenuItem{
	background-image:url("chrome://global/skin/media/pause-fill.svg");
}
#context-video-fullscreen{
	background-image:url("chrome://browser/skin/fullscreen.svg");
}
#context-leave-dom-fullscreen{
	background-image:url("chrome://browser/skin/fullscreen-exit.svg");
}
#context-video-saveimage{
	background-image:url("chrome://browser/skin/screenshot.svg");
}
#disableForOriginMenuItem{
	background-image:url("chrome://browser/skin/notification-icons/desktop-notification-blocked.svg");
}
menuitem[data-l10n-id^="places-edit-"]{
	background-image:url("chrome://global/skin/icons/edit.svg");
}
#context-translate-selection{
	background-image:url("chrome://browser/skin/translations.svg");
}
#appMenu-translate-button,
#appmenu-abouttranslations-button{
	list-style-image:url("chrome://browser/skin/translations.svg");
}
#appMenu-more-button2,
#identity-popup-more-info{
	list-style-image:url("chrome://global/skin/icons/more.svg");
}
#context-viewsource,
#context-viewframesource,
#context-viewpartialsource-selection{
	background-image:url("chrome://devtools/skin/images/tool-styleeditor.svg");
}
#context-selectall,
menuitem[data-l10n-id="text-action-select-all"]{
	/* background-image:url("resource:///chrome/devtools/skin/images/highlight-selector.svg"); */
	background-image:url("chrome://global/skin/reader/align-left-20.svg");
}
#unified-extensions-context-menu-move-widget-up{
	background-image:url("chrome://global/skin/icons/arrow-up.svg");
}
#unified-extensions-context-menu-move-widget-down{
	background-image:url("chrome://global/skin/icons/arrow-down.svg");
}
.customize-context-manageExtension,
#unified-extensions-context-menu-manage-extension{
	background-image:url("chrome://global/skin/icons/settings.svg");
}
#unified-extensions-context-menu-report-extension{
	background-image:url("chrome://global/skin/icons/warning.svg");
}
#context-setDesktopBackground{
	background-image:url("chrome://browser/skin/canvas.svg");
}
#appMenu-zoom-controls{
	background-image:url("chrome://global/skin/media/fullscreenEnterButton.svg");
	margin-inline-start:4px !important;
}
menu#frame{
	background-image:url("chrome://browser/skin/window.svg");
}
#context_moveToStart,
#context_closeTabsToTheStart{
	background-image:url("chrome://global/skin/icons/arrow-left.svg");
}
#context_moveToEnd,
#context_closeTabsToTheEnd{
	background-image:url("chrome://global/skin/icons/arrow-right.svg");
}
#context-media-playbackrate{
	background-image:url("chrome://global/skin/icons/performance.svg");
}
#identity-popup-clear-sitedata-button{
	list-style-image:url("chrome://global/skin/icons/delete.svg");
}
#toolbar-context-remove-from-toolbar,
#customizationPanelItemContextMenuRemove,
.downloadRemoveFromHistoryMenuItem,
#context_closeTab,
#orgClose{
	background-image:url("chrome://global/skin/icons/close.svg");
}
#context-showonlythisframe,
#context-media-showcontrols,
#context-previewlink{
	background-image:url('chrome://global/skin/icons/eye.svg');
}
#context-media-hidecontrols{
	background-image:url('chrome://global/skin/icons/eye-slash.svg');
}
/* Needs a fix for checkbox items rendered incorrectly with styles applied
#context-video-pictureinpicture:not([checked="true"]){
	background-image:url("chrome://global/skin/media/picture-in-picture-open.svg");
	fill: var(--uc-popup-menu-icon-color) !important;
}
*/
#spell-dictionaries{
	background-image:url("chrome://devtools/skin/images/globe.svg");
}
#spell-add-dictionaries,
[data-l10n-id="places-add-bookmark"],
#context_moveTabToGroupNewGroup{
	background-image:url("chrome://global/skin/icons/plus.svg");
}
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#manage-saved-logins{
	background-image:url("chrome://browser/skin/menu.svg");
}
#context-sendpagetodevice-popup menuseparator + menuitem,
#context_sendTabToDevicePopupMenu menuseparator + menuitem,
#context-sendlinktodevice-popup menuseparator + menuitem{
	background-image:url("chrome://global/skin/icons/chevron.svg");
}
#downloadsHistory{
	background-image:url("chrome://browser/skin/downloads/downloads.svg");
}
.downloadOpenReferrerMenuItem{
	background-image:url("chrome://global/skin/icons/defaultFavicon.svg")
}
#protections-popup-settings-button{
	list-style-image:url("chrome://global/skin/icons/settings.svg");
}
#protections-popup-show-report-button{
	list-style-image:url("chrome://browser/skin/controlcenter/dashboard.svg");
}
toolbarbutton.restoreallitem > .toolbarbutton-icon{
	transform:scaleX(-1);
}
#appMenu-report-broken-site-button,
#protections-popup-report-broken-site-button{
	list-style-image:url("chrome://global/skin/icons/lightbulb.svg");
}
#context-ask-chat,
#context_askChat{
	background-image:url("chrome://global/skin/icons/highlights.svg");
}
#fill-login{
	background-image:url("chrome://browser/skin/login.svg");
}
menuitem[id="context-openlinkinsidebar"][label="Open Link in Second Sidebar"]{
	background-image:url("chrome://userscripts/content/second_sidebar/icons/sidebar-right.svg");
}
#allTabsMenu-closeDuplicateTabs{
	list-style-image:url('chrome://browser/content/firefoxview/view-recentlyclosed.svg');
}
[data-l10n-id="places-add-separator"] {
	background-image:url("chrome://global/skin/reader/content-width-20.svg");
}
#context-sendpagetodevice,
#context-sendlinktodevice,
#context_sendTabToDevice{
	background-image:url("chrome://browser/skin/synced-tabs.svg");
}
#context_moveTabToSplitView,
#context-openlinkinsplitview{
	background-image:url("chrome://browser/skin/split-view-left-16.svg");
}
menu.share-tab-url-item{
	background-image:url("chrome://browser/skin/share.svg");
}
#context_addNote,
#context_editNote{
	background-image:url("chrome://global/skin/icons/tab-notes.svg");
}
#context_moveTabOptions{
	background-image:url("chrome://browser/skin/taskbar-tabs-move-tab.svg");
}
#context_moveTabToGroup,
#context_moveTabToNewGroup{
	background-image:url("chrome://browser/skin/tabbrowser/tab-groups.svg");
}
#context_reopenInContainer,
#context-openlinkinusercontext-menu,
[data-l10n-id="places-open-in-container-tab"]{
	background-image:url("chrome://browser/skin/topsites.svg");
}
#context_duplicateTab,
#context_duplicateTabs{
	background-image:url("chrome://browser/skin/tabs.svg");
}
#context_selectAllTabs{
	background-image:url("chrome://global/skin/reader/align-right-20.svg");
}
#context_closeTabOptions{
	background-image:url("chrome://browser/content/firefoxview/view-recentlyclosed.svg");
}
/* Checkboxes */
menupopup:not([needsgutter]) > menuitem[type="checkbox"]:not([checked]){
	padding-inline-start:calc(1em + 24px) !important;
}
menuitem[type="radio"],
menuitem[type="checkbox"] {
	position: relative;
}
menuitem[type="checkbox"]:before,
menuitem[type="radio"]:before{
	content: ""; position: absolute;
	width: 16px; height: 16px;
	border: 1px solid color-mix(in srgb, var(--uc-popup-menu-icon-color) 50%, transparent);
	left: 10px; top: 6px;
	border-radius: 3px;
}

Good morning, sorry for my English but I use Google Translate. I copied and pasted the script into a file "iconic_firefox.css" and placed it inside the Chrome folder with my "userChrome.css". In my script I used this code to import it " @import url("./iconic_firefox.css"); ", so I think I did everything right, except that nothing happens, not even an error, nothing. I use Linux Mint Zara and Firefox 146.01. If anyone can help me I would be grateful. For now, Merry Christmas to everyone.

Hello, update, I pasted the code into my userChrome.css and this is the result. Can anyone help me?

Screenshots

As you can see, some icons are missing, others are too close to the text, but the worst thing is that the icons are black. I have the dark theme in Firefox 146.01.

@Eta-Beta
You can try enabling svg.context-properties.content.enabled on about:config page to make sure icons are colored automatically properly (browser restart is needed). If it doesn't work, than you can manually reassign uc-popup-menu-icon-color variable on top of the file to use the white color.

However, the wrong padding probably comes from other Userchrome CSS modifications you have installed. There might be some conflicts with styles, which are set by rules on the top of this CSS snippet. Keep in mind that CSS works in such way, that the rules defined on bottom of your userChrome.css file usually overwrite those above them. You might want to add more !important wording to the end of each rule to enforce it.

Good morning and thanks for the reply. I enabled "svg.context-properties.content.enabled" as recommended, and as you can see from the image, at least this menu is aligned correctly. The icons are still black. I figured I need to set "white" in "uc-popup-menu-icon-color," but I'm not sure where. I apologize, but I'm not very experienced. I also noticed, as you can see in the first images I uploaded, that some menus have double space for the icon. I tried inserting the code for the solution indicated in this thread, but to no avail. Anyway, Happy Holidays!

@Eta-Beta
You should check your userChrome.css file and remove any other modifications to the context menu to resolve any conflicts. Also note that this snippet is created for the regular Firefox version 146.0, so if you're running it on any other browser, which brings it's own modifications to the context menu, it might conflict with them resulting in double spaces or other artifacts.

I need to set "white" in "uc-popup-menu-icon-color," but I'm not sure where

It's the variable right on top of this snippet on line 7, under the :root selector

Hello, I copied/modified a script from another GitHub project to replace the bookmark and folder toolbar icons, nothing else. To test this out, I created a

usrChrome.css

file with just this script inside. I added

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

at the top. Otherwise, it didn't work, so I tried these variations to get the white icons:

:root{
--uc-popup-menu-icon-color: color-mix(in srgb, white 75%, transparent);
}

:root{
--uc-popup-menu-icon-color: white;
}

But the icons are still black. I also tried setting Firefox to a light theme, but that didn't help.

UPDATING

Problem solved, but I had to use AI, results:

Screenshots

A few icons are missing, but it's still a great job. The problem of double space for icons in some menus remains; if you know how to fix it, let me know. This is what I added:

:root{
    --uc-popup-menu-icon-color: color-mix(in srgb, var(--panel-color, currentColor) 85%, transparent);
}

and at the end of the script I added:

@media (prefers-color-scheme: dark) {
    menupopup,
    panel,
    .panel-subview-body {
        --uc-popup-menu-icon-color: rgba(255,255,255,0.85);
    }
}

Again, I'm no expert, and I only came up with this solution thanks to AI, which is useful but not immediate, so I had to try several times.
One question: if I wanted to change the icons with my own favorites, is it possible? Do I just replace the address where the script finds the icons? Or is it more complicated?

Good morning,
I tried the solutions suggested by yuuqilin to fix the issue with the extra spacing visible in the context menu, but unfortunately the problem has not been resolved.

I also tried asking the AI, but without any success. The extra space in the menus is still there and is especially noticeable in menus that contain checkboxes, where it becomes extremely large.

Can anyone help me?
I’m using Linux Mint and Firefox 146.01.
Thank you.

I updated the snippet to cover some recently added context menu items (like Add to Tab Group, Split Tab, Add Tab Note etc), and removed all non-native SVG paths for the best performance of the script. Also applied fix when icon opacity and colour was not applied, and updated the code for checkboxes decoration which got broken after recent FF updates.

@emvaized Very useful!

Did you tried with vertical tab bar enabled? Some icons are empty on my system. In addition, some extension context menus appear to be missing.

#context_moveTabToNewGroup
#context_unloadTab
#context_duplicateTab
#context_selectAllTabs
.share-windows-item
context_sendTabToDevice
#context_closeTabOptions
#context_closeOtherTabs

#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_SkipScripts
#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_showBadge
#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_settings

@PhilJbt

Some icons are empty on my system

Most of them are missing in the snippet as well, because there's no matching icons amongst Firefox built-in icons (at least not that I could find). If you find a matching icon, for example, for #context_unloadTab using these guides, let me know!

But for the tabs groups item, there is a matching icon but we previously covered only #context_moveTabToGroup. I added the #context_moveTabToNewGroup variant now as well.

As for #context_sendTabToDevice – on my computer it gets covered by the existing menu[data-l10n-id*="-send-to-device"] selector. Does this attribute field say something else in your setup for this item?

#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_SkipScripts
#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_showBadge
#aecec67f-0d10-4fa7-b7c7-609a2db280cf-menuitem-_settings

These are custom context menu items which we can't support.

@emvaized

For the unload item I had in mind the "night" icon of the weather folder: chrome://browser/skin/weather/night-clear.svg

About the "send to device", I have data-l10n-id="tab-context-send-to-mobile", even if its ID is context_sendTabToDevice. Does menu[data-l10n-id*="-send-to-"] could be an option?

For the three custom IDs, I thought the end of their names were standardized. Nevermind!

For the unload item I had in mind the "night" icon of the weather folder: chrome://browser/skin/weather/night-clear.svg

This one could be a good variant, but it is coloured and wouldn't match the rest of icons, which are monochrome and dynamically coloured... Perhaps we could better use the moon.svg icon from the Acorn design repository, but it's not built-in in Firefox and would require manual importing in the file.

About the "send to device", I have data-l10n-id="tab-context-send-to-mobile", even if its ID is context_sendTabToDevice

Oh, I see. So the data-l10n-id changes dynamically based on your list of "other devices". Perhaps we're better off replacing this selector with a list of all possible IDs, like so:

#context-sendpagetodevice,
#context-sendlinktodevice,
#context_sendTabToDevice{

Indeed, because of my screen color it appears white on my system.

Does chrome://global/skin/icons/performance.svg or chrome://global/skin/media/pause-fill.svg could fit ?

For the "send to ...", there are those svg: chrome://browser/skin/device-desktop.svg chrome://browser/skin/device-phone.svg chrome://browser/skin/device-tablet.svg chrome://browser/skin/device-tv.svg chrome://browser/skin/device-vr.svg

Does chrome://global/skin/icons/performance.svg or chrome://global/skin/media/pause-fill.svg could fit ?

It could. Another possible option would be chrome://browser/skin/circle-check-dotted.svg. But I think neither of these represent this action good enough.

For the "send to ...", there are those svg

These icons are already added to the snippet. Did you mean that they are not applied on your setup due to not precise selectors?

Adding on to what I stated in reddit the following icons are available in the latest omni.ja file which I extracted today:

Backwards = back.svg
Forwards = forward.svg
Help = help.svg (2 versions)
Sort By Name = sort.svg
Select All Tabs = tabs.svg

Moving on.

As I stated previously

Where ever there is a 'tick box' there is a problem with the spacing between icon and label and the 'tick box' is overridden by the label.

I have provided images without your iconic Firefox.css enabled and with it enabled. Last image is with ALL my menu css code disabled and as you can see there is still wide spacing and over writing of 'tick box'.

Sorry to be such a pain but I do not think this is a macOS FF specific issue. (could be wrong) It would be nice if others out there using macOS FF tested this as well.

EDIT 5 hours on from this original post: Have read your code line by line, and I am wondering, from my amateurish perspective, if the code at lines 657 - 660 and lines 653 - 668 are the troublesome bits in my case and if so what can I do about them ??

Screenshots

These icons are already added to the snippet. Did you mean that they are not applied on your setup due to not precise selectors?

On my system data-l10n-id="tab-context-send-to-mobile" id="context_sendTabToDevice" is empty. So set a generic icon like a screen for all "send to" (css selector based on the ID) could be an option, otherwise (based on the i10n attribute) specify each type of device since their icons are present in Firefox.

I was wondering something: does the icons are re-colorized depending on which Firefox dark/light theme is set? I remember noticing that the moon was colored and be like "Oh well.". But once I added it to my userChrome.css, I don't recall noticing it again. Perhaps my screen's reddish color profile is to blame.

useless screen

EDIT: It's not re-colorized, I found a way to check with a colorized icon. Forget it.

@ChasCB

You are correct, styles for checkboxes are set at the very end of the file, on line 667 and forward. Since they are causing problems in your build, you can remove them altogether to revert the default look. I would've also took a look at the section on line 66, but you said you already tried adding (-moz-platform: macos) with no success, so I'm out of ideas as for now.

PS: I hid your screenshots under spoiler to keep this comments section tidier.

@PhilJbt
This is how this menu looks for me with the most updated code from the post above:

What are attributes for "Add device" empty menu item? Does it have identifiable data-l10n-id, clientType, ID or classname?

As for the moon icon, I suggest you to use this one:

#context_unloadTab {
	background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path fill-rule="evenodd" d="M6.98 1.59a1.2 1.2 0 0 1 1.18.3c.32.3.45.75.35 1.18q-.14.6-.14 1.2A5.34 5.34 0 0 0 12.7 9.5q.55.12 1.08.13a1.2 1.2 0 0 1 1.06.63c.22.38.22.84 0 1.22q-.41.7-.97 1.3A6.8 6.8 0 0 1 8.84 15l-.73-.04A6.9 6.9 0 0 1 2 8.53 6.8 6.8 0 0 1 6.98 1.6m-.02 1.58a5.3 5.3 0 0 0-3.45 5.28 5.4 5.4 0 0 0 4.75 5.02 5.3 5.3 0 0 0 4.51-1.7q.3-.31.53-.65a7 7 0 0 1-.9-.14 6.84 6.84 0 0 1-5.53-6.71q0-.55.1-1.1z" clip-rule="evenodd"/></svg>');
}

It uses the moon-16.svg icon from the GitHub repo with official Firefox icons. I optimised it and adapted for inline import, and it will be automatically coloured by the browser. Maybe I'll add this later to the main snippet as well.

It just has a class sync-menuitem, no ID, neither a i10n.

<menuitem xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" label="Connectez-vous pour envoyer des onglets" class="sync-menuitem">
<html:img xmlns:html="http://www.w3.org/1999/xhtml" loading="lazy" class="menu-icon" aria-hidden="true" />
<label class="menu-text" crop="end" aria-hidden="true" value="Connectez-vous pour envoyer des onglets"/>
<label class="menu-highlightable-text" crop="end" aria-hidden="true">Connectez-vous pour envoyer des onglets</label>
<label class="menu-accel" aria-hidden="true"/>
</menuitem>

Indeed I already added some changes to your gist so that it aligns even better with my needs (just focus on colors help me a lot). I find that SVGs are lightweight enough to be embedded directly into the CSS if necessary. I think it would even be possible to create a complete theme without reaching the 1 MB mark.

Screenshot

It just has a class sync-menuitem, no ID, neither a i10n.

Hm, then unfortunately we couldn't style that item.

Screenshot

Looks good! But there's a point to keep in mind with custom inline icons, that each of them will require time for parsing by the browser on every browser startup. Although I'm not sure if this has any measurable effect on modern fast computers.

By the way, I ended up finding 2 somewhat fitting native icons for Duplicate Tab and Select All Tabs:

#context_duplicateTab,
#context_duplicateTabs{
	background-image:url("chrome://browser/skin/tabs.svg");
}
#context_selectAllTabs{
	background-image:url("chrome://global/skin/reader/align-right-20.svg");
} 

Probably will add them to the snippet later. I think they convey these actions quite well, at least with vertical tabs enabled.

Screenshot

Note:

1. images hidden under >Details
2. All my styling has been removed in the images

I have managed to get it to partial work by commenting out lines 665 - 672

This affects:
menupopup#placesContext menuitem#placesContext

Details

/* menuitem[type="checkbox"]:before,
menuitem[type="radio"]:before{
	content: ""; position: absolute;
	width: 16px; height: 16px;
	border: 1px solid color-mix(in srgb, var(--uc-popup-menu-icon-color) 50%, transparent);
	left: 10px; top: 6px;
	border-radius: 3px;
}
*/

Using RED arrows and text in above image, you can see there is still a huge space to the left of the icons and between the icons and the labels, including within the sub-menus. With the tick box and 'Show Other Bookmarks' label there is no space. I have managed to move the '✔️Show Other Bookmarks' to the right by inserting at line 663:

left: 14px;

This also affects:
menuitem#toolbar-context-manage-extension.customize-context-manageExtension

Details

Can I also point out that the following has changed in Firefox CSS:

padding-inline-end: = padding-right:
padding-inline-start: = padding-left:
margin-inline-end: = margin-right:
margin-inline-start: = margin-left:
list-style-image: = content:

I have slowly been going though my code to reflect these changes.

by commenting out lines 665 - 672

Perhaps I could just disable these lines on Mac OS using @media (-moz-platform: macos) before we come up with a better solution for checkboxes problem.

the following has changed in Firefox CSS

Could you please clarify, what do you mean that it was changed in Firefox CSS? These rules work fine for me in Firefox 152.0.3

You are correct. What I forgot was that ****-inline-end etc was designed for multiple languages especially those that read right to left, whilst just ****-end etc is mainly for English languages. My boo boo.

As for list-style-image: vs content: This content: targets the browser icon container which in your case relevant. I started a discussion here 1 year ago: https://www.reddit.com/r/FirefoxCSS/comments/1mfdq1y/firefox_css_property_liststyleimage_to_change_to/

cheers.

@ChasCB
I use list-style-image for popup menu items from the navbar (like .subviewbutton), and just assign images as background-image to regular context menu items. I experimented with content approach for context menus, but found that it has no advantages over the currently used approach.

Fair enough.

I spent the afternoon in the browser toolbox trying to solve the issue I raised 4 days ago. Using all sorts of esoteric code I found there and throwing in @media (-moz-platform: macos) etc still no go.

Mystery 🤔