Last active
May 7, 2025 18:11
-
-
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/) */ | |
| /* based on https://gist.github.com/qaz69wsx/83a90423163b65a8344b2e60fc356a58 (now removed) */ | |
| /* 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-"], | |
| #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; | |
| } | |
| #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"]{ | |
| 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/bookmarks-toolbar.svg"); | |
| } | |
| .subviewbutton[id$="-history-button"], | |
| #sidebar-switcher-history{ | |
| list-style-image:url("chrome://browser/skin/history.svg"); | |
| } | |
| #appMenuRecentlyClosedTabs{ | |
| list-style-image:url("chrome://browser/content/firefoxview/view-opentabs.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{ | |
| 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('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="M8 6a1 1 0 001-1V1a1 1 0 00-2 0v4a1 1 0 001 1zm3.5-4.032a1 1 0 00-1 1.732A4.946 4.946 0 0113 8 5 5 0 013 8a4.946 4.946 0 012.5-4.3 1 1 0 00-1-1.732 7 7 0 107.006 0z"/></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('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="M8 6a1 1 0 001-1V1a1 1 0 00-2 0v4a1 1 0 001 1zm3.5-4.032a1 1 0 00-1 1.732A4.946 4.946 0 0113 8 5 5 0 013 8a4.946 4.946 0 012.5-4.3 1 1 0 00-1-1.732 7 7 0 107.006 0z"/></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("chrome://global/skin/icons/undo.svg"); | |
| transform:scaleX(-1); | |
| background-position:right !important; | |
| margin-inline-start:12px; | |
| } | |
| menuitem[data-l10n-id="text-action-redo"] > *{ | |
| transform:scaleX(-1); | |
| } | |
| 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-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, | |
| #context-searchselect-private, | |
| #context-searchselect, | |
| #context-keywordfield{ | |
| 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{ | |
| 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{ | |
| 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://activity-stream/content/data/content/assets/glyph-pin-16.svg"); | |
| } | |
| menuitem[data-l10n-id^="unpin-"], | |
| .customize-context-moveToToolbar{ | |
| background-image:url("chrome://activity-stream/content/data/content/assets/glyph-unpin-16.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{ | |
| background-image:url("chrome://global/skin/icons/folder.svg"); | |
| } | |
| 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"); | |
| } | |
| #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://devtools/skin/images/command-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("resource:///chrome/devtools/skin/images/highlight-selector.svg"); | |
| background-size:24px !important; | |
| background-position-x:8px !important; | |
| } | |
| #unified-extensions-context-menu-pin-to-toolbar{ | |
| background-image:url("chrome://activity-stream/content/data/content/assets/glyph-pin-16.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, | |
| menuitem.sendtab-target:last-child{ | |
| 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{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M16 7.595C14.675 4.244 11.493 2 8 2S1.325 4.244 0 7.595l0 .809C1.325 11.756 4.507 14 8 14s6.675-2.244 8-5.595l0-.81zM8 12.75c-3.013 0-5.669-1.856-6.83-4.75C2.331 5.106 4.987 3.25 8 3.25S13.669 5.106 14.83 8c-1.161 2.894-3.817 4.75-6.83 4.75z"/><path d="M8 11c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zm0-4.75c-.965 0-1.75.785-1.75 1.75S7.035 9.75 8 9.75 9.75 8.965 9.75 8 8.965 6.25 8 6.25z"/></svg>'); | |
| } | |
| #context-media-hidecontrols{ | |
| background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3.067 1.183a.626.626 0 0 0-.885.885l1.306 1.306A8.885 8.885 0 0 0 0 7.595l0 .809C1.325 11.756 4.507 14 8 14c1.687 0 3.294-.535 4.66-1.455l2.273 2.273a.626.626 0 0 0 .884-.886L3.067 1.183zm3.759 5.528 2.463 2.463c-.32.352-.777.576-1.289.576-.965 0-1.75-.785-1.75-1.75 0-.512.225-.969.576-1.289zM8 12.75c-3.013 0-5.669-1.856-6.83-4.75a7.573 7.573 0 0 1 3.201-3.745l1.577 1.577A2.958 2.958 0 0 0 5 8c0 1.654 1.346 3 3 3 .858 0 1.624-.367 2.168-.948l1.613 1.613A7.118 7.118 0 0 1 8 12.75z"/><path d="M8 2c-.687 0-1.356.11-2.007.275l1.049 1.049A7.06 7.06 0 0 1 8 3.25c3.013 0 5.669 1.856 6.83 4.75a7.925 7.925 0 0 1-1.141 1.971l.863.863A9.017 9.017 0 0 0 16 8.404l0-.809C14.675 4.244 11.493 2 8 2z"/></svg>'); | |
| } | |
| menuitem[type="checkbox"], | |
| menuitem[type="radio"]{ | |
| background-image:url("chrome://devtools/skin/images/checkbox.svg"); | |
| padding-inline-start:1em !important; | |
| } | |
| #context-video-pictureinpicture:not([checked="true"]){ | |
| background-image:url("chrome://global/skin/media/picture-in-picture-open.svg"); | |
| } | |
| #spell-dictionaries{ | |
| background-image:url("chrome://devtools/skin/images/globe.svg"); | |
| } | |
| #spell-add-dictionaries{ | |
| background-image:url("chrome://global/skin/icons/plus.svg"); | |
| } | |
| toolbarbutton[data-l10n-id*="-manage-"], | |
| #manage-saved-logins{ | |
| background-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #context-sendpagetodevice-popup menuseparator + menuitem{ | |
| background-image:url("chrome://browser/skin/forward.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") | |
| } | |
| menuitem[data-l10n-id="downloads-cmd-clear-list"]{ | |
| background-image:url("chrome://browser/skin/forget.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{ | |
| list-style-image:url("chrome://browser/skin/forget.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{ | |
| background-image:url("chrome://mozapps/skin/extensions/category-discover.svg"); | |
| } | |
| #fill-login{ | |
| background-image:url("chrome://browser/skin/login.svg"); | |
| } |
Great feature.
... but the icons are black and I'm using dark theme on my Ubuntu. Any way I can fix that easily?
... but the icons are black and I'm using dark theme on my Ubuntu. Any way I can fix that easily?
Sure! 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 any color of your choice.
Hey, @emvaized
Sorry for taking too long to thank you. Unfortunately, changing the vars and FF config (and anything else I've tried) didn't change the colours of the icons.
Not only that,but the icons seem to have an extra margin/padding around them.
It's actually a problem with FF-Dev itself. Some extensions that are native-ish like Sidebar and Snooze Tabs also have their icons black from the light theme.
The icons are always black not matter what you do.
Just a heads-up:
The following two resources will be removed starting from Firefox version 140:
resource://gre-resources/password.svgresource://gre-resources/password-hide.svg
I'm not sure if Firefox still includes these files elsewhere, but if not, it might be a good idea to extract and store the SVG content ahead of time for future use.
@yuuqilin
Thanks for the heads-up! I updated these icons to use svg icons directly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Iconic Firefox 🦊
This CSS snippet adds back icons for most context and popup menu entries in Firefox.
Features
--uc-popup-menu-icon-colorvariable