Last active
December 29, 2025 14:51
-
-
Save emvaized/a379d61ed8970e5711ca7278a39c1895 to your computer and use it in GitHub Desktop.
Iconic Firefox — userChrome CSS snippet which adds back icons for most context and popup menu entries in Firefox. It uses mostly built-in icons.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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{ | |
| 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, [checked="true"]), | |
| menuitem[type="checkbox"], | |
| menuitem[type="radio"], | |
| 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); | |
| } | |
| #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"]) > .menu-icon { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| #PanelUI-fxa-menu-setup-sync-button{ | |
| list-style-image:url("chrome://browser/skin/sync.svg"); | |
| } | |
| #PanelUI-fxa-menu-sendtab-button{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 0H4a2 2 0 00-2 2v2a1 1 0 001 1 1 1 0 001-1V2.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5V11a1 1 0 00-1-1 1 1 0 00-1 1v3a2 2 0 002 2h8a2 2 0 002-2V2a2 2 0 00-2-2zM9 15H7v-1h2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.146 10.146a.5.5 0 10.707.707l3-3a.5.5 0 000-.708l-3-3a.5.5 0 00-.707.707L7.293 7H.5a.5.5 0 000 1h6.793z"/></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"); | |
| } | |
| #PanelUI-fxa-menu-account-signout-button{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 11.375a.875.875 0 110 1.75H3.375A2.625 2.625 0 01.75 10.5v-7A2.625 2.625 0 013.375.875H6a.875.875 0 110 1.75H3.375A.875.875 0 002.5 3.5v7c0 .483.392.875.875.875zm5.871-4.996a.875.875 0 010 1.242l-2.625 2.625a.875.875 0 01-1.242 0 .875.875 0 010-1.242L9.14 7.875H5.125a.875.875 0 110-1.75h4.016L8.004 4.996a.879.879 0 011.242-1.242z"/></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"); | |
| } | |
| #appMenuRestoreSession{ | |
| list-style-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 d="M13 0H3a3 3 0 00-3 3v8a3 3 0 003 3h4l-.3.4a1 1 0 101.6 1.2l1.5-2a1 1 0 000-1.2l-1.5-2a1 1 0 00-1.6 1.2l.3.4H3a1 1 0 01-1-1V5h12v6a1 1 0 01-1 1 1 1 0 000 2 3 3 0 003-3V3a3 3 0 00-3-3zM2 4V3a1 1 0 011-1h10a1 1 0 011 1v1z"/></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'); | |
| } | |
| #allTabsMenu-containerTabsButton{ | |
| list-style-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><path d="M14.75 3H13V1.25a.25.25 0 00-.25-.25h-1.5a.25.25 0 00-.25.25V3H9.25a.25.25 0 00-.25.25v1.5a.25.25 0 00.25.25H11v1.75a.25.25 0 00.25.25h1.5a.25.25 0 00.25-.25V5h1.75a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25z"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/></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_newUserContext{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><path d="M14.75 3H13V1.25a.25.25 0 00-.25-.25h-1.5a.25.25 0 00-.25.25V3H9.25a.25.25 0 00-.25.25v1.5a.25.25 0 00.25.25H11v1.75a.25.25 0 00.25.25h1.5a.25.25 0 00.25-.25V5h1.75a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25z"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/></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"]{ | |
| 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"]{ | |
| background-image:url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m1 11c0 0.55228 0.44772 1 1 1s1-0.44772 1-1c0-2.7614 2.2386-5 5-5 2.0503 0 3.8124 1.2341 4.584 3h-2.5883c-0.55228 0-1 0.44772-1 1 0 0.55228 0.44772 1 1 1h5.0043c0.55228 0 1-0.44772 1-1v-5c0-0.55228-0.44772-1-1-1s-1 0.44772-1 1v2.3924c-1.2249-2.0328-3.4537-3.3924-6-3.3924-3.866 0-7 3.134-7 7z" fill="context-fill"/></svg>'); | |
| } | |
| 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"); */ | |
| background-image:url('data:image/svg+xml,<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m5.5583 7.0446h4.9833v1.3338h-4.9833zm0 3.0486h3.0437v1.3338h-3.0437z" fill="context-fill" fill-rule="evenodd" stroke-width=".76441"/><path d="m11.883 1.5189h-1.1807a3.0667 3.0486 0 0 0-5.3053 0h-1.1807a1.9167 1.9054 0 0 0-1.9167 1.9054v10.67a1.9167 1.9054 0 0 0 1.9167 1.9054h7.6667a1.9167 1.9054 0 0 0 1.9167-1.9054v-10.67a1.9167 1.9054 0 0 0-1.9167-1.9054zm-5.75 3.8108a1.15 1.1432 0 0 1-1.15-1.1432v-1.3338h-0.76667a0.575 0.57162 0 0 0-0.575 0.57162v10.67c0 0.31249 0.26067 0.57162 0.575 0.57162h7.6667c0.31433 0 0.575-0.25914 0.575-0.57162v-10.67a0.575 0.57162 0 0 0-0.575-0.57162h-0.76667v1.3338c0 0.63259-0.51367 1.1432-1.15 1.1432zm1.15-1.9054v-1.5243h1.5333v1.5243z" fill="context-fill" fill-rule="evenodd" stroke-width=".76441"/></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"], | |
| .customize-context-removeExtension, | |
| menuitem[data-l10n-id="toolbar-context-menu-remove-from-toolbar"], | |
| .downloadDeleteFileMenuItem, | |
| menuitem[id^="placesContext_delete"]{ | |
| 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"); | |
| } | |
| menuitem[data-l10n-id*="-customize-toolbar"]{ | |
| 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"); | |
| } | |
| #historyRestoreLastSession{ | |
| 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 d="M13 0H3a3 3 0 00-3 3v8a3 3 0 003 3h4l-.3.4a1 1 0 101.6 1.2l1.5-2a1 1 0 000-1.2l-1.5-2a1 1 0 00-1.6 1.2l.3.4H3a1 1 0 01-1-1V5h12v6a1 1 0 01-1 1 1 1 0 000 2 3 3 0 003-3V3a3 3 0 00-3-3zM2 4V3a1 1 0 011-1h10a1 1 0 011 1v1z"/></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, | |
| menuitem[data-l10n-id*="about-"], | |
| #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"); | |
| } | |
| menuitem[data-l10n-id*="reload-"], | |
| #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[id^="context_duplicateTab"]{ | |
| 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 d="M15 13a1 1 0 000-2h-1V5a2 2 0 00-2-2H8.402a2 2 0 00-2 2v6h-1a1 1 0 000 2"/><path d="M5.281 10V5c0-.771.301-1.468.78-2H4a2 2 0 00-2 2v6H1a1 1 0 000 2h2.559a1.978 1.978 0 01-.278-1c0-1.103.897-2 2-2z"/></svg>'); | |
| } | |
| #context_moveTabOptions{ | |
| 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 d="M15.854 12.14s-.001 0 0 0l-3.001-3.001a.496.496 0 00-.707.013.5.5 0 000 .695l2.147 2.148H7.5a.5.5 0 000 1h6.793l-2.147 2.146a.5.5 0 10.695.719l.012-.012 3-3a.5.5 0 00.001-.708z"/><path d="M7.5 10.994h4.38l-.453-.453a1.495 1.495 0 010-2.084 1.503 1.503 0 012.133-.025l.44.44V5a2 2 0 00-2-2H4a2 2 0 00-2 2v6H1a1 1 0 000 2h5.094A1.49 1.49 0 016 12.494c0-.827.673-1.5 1.5-1.5z"/></svg>'); | |
| } | |
| menu.sync-ui-item{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 0H4a2 2 0 00-2 2v2a1 1 0 001 1 1 1 0 001-1V2.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5V11a1 1 0 00-1-1 1 1 0 00-1 1v3a2 2 0 002 2h8a2 2 0 002-2V2a2 2 0 00-2-2zM9 15H7v-1h2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.146 10.146a.5.5 0 10.707.707l3-3a.5.5 0 000-.708l-3-3a.5.5 0 00-.707.707L7.293 7H.5a.5.5 0 000 1h6.793z"/></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"); | |
| } | |
| .share-tab-url-item{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" d="M12.707 4.294l-4-4A1 1 0 008.38.077a.984.984 0 00-.246-.05A.938.938 0 008 0a.938.938 0 00-.134.027.984.984 0 00-.246.05A1 1 0 007.291.3l-4 4a1 1 0 001.416 1.408L7 3.415V11a1 1 0 002 0V3.415l2.293 2.293a1 1 0 001.414-1.414z"/><path fill="context-fill" d="M14 9a1 1 0 00-1 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3a1 1 0 00-2 0v3a3 3 0 003 3h8a3 3 0 003-3v-3a1 1 0 00-1-1z"/></svg>'); | |
| } | |
| #context_reopenInContainer, | |
| #context-openlinkinusercontext-menu{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><rect width="6" height="6" x="1" y="1" rx="1"/><rect width="6" height="6" x="1" y="9" rx="1"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M14.92 1.62a1 1 0 00-.54-.54A1 1 0 0014 1h-4a1 1 0 000 2h1.59l-2.3 2.29a1 1 0 000 1.42 1 1 0 001.42 0L13 4.41V6a1 1 0 002 0V2a1 1 0 00-.08-.38z"/></svg>'); | |
| } | |
| #context_closeTab, | |
| #orgClose{ | |
| background-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #context_closeTabOptions{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.3 10l-1.8 1.8-1.8-1.8c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l1.8 1.8-1.8 1.8c-.2.2-.2.5 0 .7s.5.2.7 0l1.8-1.8 1.8 1.8c.2.2.5.2.7 0s.2-.5 0-.7l-1.8-1.8 1.8-1.8c.2-.2.2-.5 0-.7s-.5-.2-.7 0z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M16 12c0-.2-.1-.5-.2-.6l-1.1 1.1.5.5c.4-.1.8-.5.8-1zm-5.6.5L9 11.1c-.4-.4-.4-1 0-1.4l.7-.7c.4-.4 1-.4 1.4 0l1.4 1.4L13.9 9s.1 0 .1-.1V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v6H1c-.6 0-1 .4-1 1s.4 1 1 1h8.9l.5-.5z"/></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-"][data-l10n-id$="-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"]{ | |
| /* background-image:url("chrome://global/skin/icons/link.svg"); */ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill"><path d="m2.695 9.023c.384.384.88.576 1.384.576l.008.008c.496 0 1-.192 1.384-.576l.304-.304-.992-.992-.304.304c-.208.216-.576.216-.792 0l-2.113-2.112c-.232-.232-.232-.616 0-.848l3.505-3.504c.232-.232.616-.232.848 0l2.113 2.112c.112.104.168.24.168.392 0 .152-.064.296-.168.4l-.304.304.992.992.304-.304c.768-.768.768-2.008 0-2.776l-2.113-2.112c-.784-.776-2.048-.776-2.833 0l-3.505 3.496c-.776.784-.776 2.048 0 2.832zM5.652 4.656l-.99.99 5.686 5.686.99-.99zM10.497 16c-.512 0-1.024-.192-1.416-.584l-2.113-2.112c-.768-.768-.768-2.008 0-2.776l.304-.304.992.992-.304.304c-.104.104-.168.248-.168.4 0 .152.056.288.168.392l2.113 2.112c.232.232.616.232.848 0l3.505-3.504c.232-.232.232-.616 0-.848l-2.113-2.112c-.208-.216-.584-.208-.792 0l-.304.304-.992-.992.304-.304c.768-.768 2.009-.768 2.777 0l2.112 2.112c.776.784.776 2.048 0 2.832l-3.505 3.505c-.392.392-.904.584-1.416.584z"/></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("chrome://devtools/content/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{ | |
| 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-inspect{ | |
| background-image:url("resource://devtools-shared-images/command-pick.svg"); | |
| } | |
| #context-selectall, | |
| menuitem[data-l10n-id="text-action-select-all"]{ | |
| background-image:url('data:image/svg+xml,<svg fill="context-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.1667 0.5c-0.92046 0-1.6667 0.7462-1.6667 1.6667v1.6667h3.3334v-3.3334zm-1.6667 5.8333v3.3334h3.3334v-3.3334zm0 7.5v-1.6667h3.3334v3.3334h-1.6667c-0.92046 0-1.6667-0.74616-1.6667-1.6667zm9.1666 1.6667h-3.3334v-3.3334h3.3334zm2.5 0h1.6667c0.9205 0 1.6667-0.74616 1.6667-1.6667v-1.6667h-3.3334zm3.3334-9.1666v3.3334h-3.3334v-3.3334zm0-2.5v-1.6667c0-0.92046-0.74616-1.6667-1.6667-1.6667h-1.6667v3.3334zm-5.8333-3.3334h-3.3334v3.3334h3.3334z" stroke-width=".93749"/></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-remove-extension{ | |
| background-image:url("chrome://global/skin/icons/delete.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:0px !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{ | |
| 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'); | |
| } | |
| menuitem[type="checkbox"], | |
| menuitem[type="radio"]{ | |
| /* background-image:url("chrome://devtools/skin/images/checkbox.svg"); */ | |
| background-image:url('data:image/svg+xml,<svg width="16" height="16" fill="context-fill" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2.6667 0h10.667a2.6667 2.6667 0 0 1 2.6667 2.6667v10.667a2.6667 2.6667 0 0 1-2.6667 2.6667h-10.667a2.6667 2.6667 0 0 1-2.6667-2.6667v-10.667c0-1.4667 1.2-2.6667 2.6667-2.6667zm0 1.3333a1.3333 1.3333 0 0 0-1.3333 1.3333v10.667c0 0.8 0.53333 1.3333 1.3333 1.3333h10.667c0.8 0 1.3333-0.53333 1.3333-1.3333v-10.667c0-0.8-0.53333-1.3333-1.3333-1.3333z"/></svg>'); | |
| fill: color-mix(in srgb, var(--uc-popup-menu-icon-color) 66%, transparent) !important; | |
| padding-inline-start:1em !important; | |
| } | |
| #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-"], | |
| #manage-saved-logins{ | |
| background-image:url("chrome://browser/skin/menu.svg"); | |
| } | |
| #context-sendpagetodevice-popup menuseparator + menuitem{ | |
| background-image:url("chrome://global/skin/icons/chevron.svg"); | |
| } | |
| #downloadsHistory{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| .downloadRemoveFromHistoryMenuItem{ | |
| background-image:url("chrome://global/skin/icons/close.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/error.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"); | |
| } |
Author
@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:
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?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!