Definition
Small image-based glyphs used to communicate additional context in user interface design.
Usage
Icons help our interfaces become clearer, cleaner, and more fun without using up too much screen space. However, there is a fine line between improving experience and overwhelming the user. Icon use should always be accessible and thoughtful, not a space saving shortcut.
- Keep icons simple and literal.
- Use standardized icons correctly.
- Use an icon for more than one context.
Refer to the table below for usage guidance for specific icons.
|
Icon |
Name |
Usage |
Platform |
|---|---|---|---|
|
add-text |
Indicates the ability to add text to a PDF document. |
Desktop |
|
add-to-homescreen |
Indicates the ability to add a webpage shortcut to the device's homescreen. |
Mobile |
|
app-menu |
Represents app menu on desktop and iOS. |
Desktop Mobile |
|
app-menu-space |
Represents app menu on desktop and iOS.
The space is a placeholder for a notification dot used to indicate new updates. |
Desktop Mobile |
|
append-up |
Indicates the ability to add on to a search (when the toolbar is positioned at the top). |
Mobile |
|
append-up-right |
Indicates the ability to open a link or target. |
Mobile |
|
append-down |
Indicates the ability to add on to a search (when the toolbar is positioned at the bottom). |
Mobile |
|
attachment |
Indicates the ability to show attachments or attach an item. |
Desktop |
|
arrow-clockwise |
Indicates the ability to reload or rotate clockwise. |
Desktop Mobile |
|
arrow-counterclockwise |
Indicates the ability to rotate counterclockwise. |
Desktop |
|
arrow-trending |
Indicates trending predictions. |
Desktop |
|
audio |
Indicates the ability to toggle volume settings. |
Desktop |
|
audio-mute |
Indicates muted audio. |
Desktop |
|
audio-fill |
Indicates media playing in a tab on desktop. |
Desktop |
|
audio-fill-slash |
Indicates paused media in a tab on desktop. |
Desktop |
|
audio-circle-fill |
Indicates the ability to mute media. |
Desktop |
|
audio-mute-circle-fill |
Indicates the ability to unmute media. |
Desktop |
|
autoplay |
Indicates autoplay media. |
Desktop Mobile |
|
autoplay-slash |
Indicates autoplay media is blocked. |
Desktop Mobile |
|
avatar |
Represents a non-signed in user. |
Desktop Mobile |
|
avatar-fill |
Represents a signed in user. |
Desktop Mobile |
|
avatar-info |
Represents a signed in user that hasn't confirmed their e-mail. |
Mobile |
|
avatar-initial |
Represents a signed-in user.
Indicates the ability to view FxA settings. |
Desktop |
|
avatar-warning |
Represents a signed in user with an alert. |
Mobile |
|
back |
Indicates the ability to navigate to the previous webpage or screen. |
Desktop Mobile |
|
blocked-popup |
Represents a blocked popup permission. |
Desktop |
|
bookmark |
Indicates the ability to bookmark a tab. |
Desktop Mobile |
|
bookmark-fill |
Indicates an individual saved bookmark or a group of saved bookmarks. It can also be used to indicate rating. |
Desktop Mobile |
|
bookmark-tray |
Represents bookmarks tray. |
Desktop Mobile |
|
bookmark-tray-fill |
Indicates the ability to open and view the bookmarks tray. |
Mobile |
|
bookmark-slash |
Indicates the ability to remove a bookmark. |
Mobile |
|
camera |
Represents allowed camera permissions. |
Desktop Mobile |
|
camera-slash |
Represents blocked camera permissions. |
Desktop Mobile |
|
checkmark |
Desktop: Used to indicate a selected item in a checkbox or list.
Mobile: Used to indicate a selected item. On Android, it can also indicate the ability to confirm, save changes or to exit out of edit mode. |
Desktop Mobile |
|
checkmark-circle-fill |
Represents an alert status to indicate success. |
Desktop |
|
chevron-double-right |
Represents overflow menu. Indicates the ability to reveal more items or options in the overflow menu. |
Desktop |
|
chevron-down |
Indicates an expandable component such as a list, dropdown, or the ability to skip to view the next item. |
Desktop Mobile |
|
chevron-left |
Indicates the ability to navigate to a previous page/step or view overflow items to the left. |
Desktop Mobile |
|
chevron-right |
Indicates the ability to navigate to the next step, view overflow items to the right, reveal more information or options, or expand a list. |
Desktop Mobile |
|
chevron-up |
Indicates the ability to collapse a list or dropdown. Also used to indicate the ability to toggle to the view the previous item. |
Desktop Mobile |
|
clipboard |
Indicates the ability to paste. |
Mobile |
|
closed-caption |
Indicates the ability to view closed caption settings. |
Desktop |
|
closed-tabs |
Represents closed tabs. |
Desktop |
|
collection |
Represents collections. |
Mobile |
|
competitiveness |
Represents competitiveness. |
Desktop |
|
content-width |
Indicates ability to adjust content width. |
Desktop |
|
cookies |
Represents allowed cookie permissions. |
Desktop Mobile |
|
cookies-slash |
Represents blocked cookie permissions. |
Desktop Mobile |
|
copy |
Indicates the ability to copy. |
Mobile |
|
critical |
Represents an alert status to indicate danger or a critical error. |
Desktop Mobile |
|
critical-fill |
Represents an alert status to indicate danger or a critical error. |
Desktop Mobile |
|
cross |
Indicates the ability to close a tab or component.
Mobile: On Android, it also indicates the ability to remove an item. |
Desktop Mobile |
|
cross-circle |
Indicates the ability to close a component.
On Android, this is also used to indicate the ability to quit Firefox and delete browsing data. |
Mobile |
|
cross-circle-fill |
Desktop: Indicates the ability to clear an input.
Mobile: On iOS, it indicates the ability to close a modal or message component. On Android, it indicates the ability to clear an input. |
Desktop Mobile |
|
cryptominer |
Represents cryptominers tracking protection. |
Desktop |
|
cryptominer-slash |
Represents blocked cryptominers tracking protection. |
Desktop Mobile |
|
current-view |
Indicates the ability to share the URL to the current PDF page. |
Desktop |
|
cursor-text |
Indicates the ability to add text to a PDF. |
Desktop |
|
cursor-arrow |
Indicates the ability to select text on a PDF. |
Desktop |
|
device-desktop |
Represents a desktop computer. Indicates the ability to request the desktop version of a webpage. |
Mobile |
|
device-desktop-send |
Indicates the ability to send a link to a synced device. |
Desktop Mobile |
|
device-mobile |
Represents a mobile phone.
On iOS: Indicates the ability to request the mobile version of a webpage. |
Desktop Mobile |
|
delete |
Indicates the ability to delete. |
Desktop Mobile |
|
download |
Indicates the ability to view downloads. |
Desktop Mobile |
|
edit |
Indicates the ability to edit an item. |
Desktop Mobile |
|
edit-active |
Indicates PDF is in edit mode. |
Desktop |
|
edit-squiggle |
Indicates the ability to draw. |
Desktop |
|
error |
Indicates the ability to remove. |
Desktop |
|
experiments |
Represents experiments. |
Desktop Mobile |
|
export |
Indicates the ability to export data. |
Desktop |
|
external-link |
Indicates the ability to open a link in an external window. |
Desktop |
|
extension |
Desktop: Represents extensions.
Mobile: Represents Add-ons on Android. |
Desktop Mobile |
|
extension-cog |
Indicates the ability to manage extensions. |
Mobile |
|
extension-fill |
Desktop: Represents extensions.
Mobile: Represents Add-ons on Android. |
Desktop Mobile |
|
eye |
Indicates the ability to show password. |
Desktop Mobile |
|
eye-slash |
Indicates the ability to hide password. |
Desktop Mobile |
|
fingerprinter |
Represents fingerprinter tracking content. |
Desktop Mobile |
|
fingerprinter-slash |
Represents blocked fingerprinter tracking content. |
Desktop |
|
folder |
Represents a group. |
Desktop Mobile
|
|
folder-add |
Indicates the ability to create or add a new group. |
Mobile |
|
folder-arrow-down |
Indicates the ability to save a file. |
Desktop |
|
folder-fill |
Represents a group. |
Desktop |
|
forward |
Indicates the ability to navigate to the next webpage or screen. |
Desktop Mobile |
|
fullscreen-disabled |
Indicates the ability to disable fullscreen mode. |
Desktop |
|
fullscreen-expand |
Indicates the ability to expand a window or video to fullscreen. |
Desktop |
|
fullscreen-exit |
Indicates the ability to exit out of fullscreen mode. |
Desktop |
|
fx-view |
Represents Firefox View. |
Desktop |
|
globe |
Used as a default or placeholder favicon. |
Desktop Mobile |
|
go-to-first |
Indicates the ability to navigate to the first page or section. |
Desktop |
|
go-to-last |
Indicates the ability to navigate to the last page or section. |
Desktop |
|
grid-plus-24 |
Indicates the ability to customize the homepage. |
Mobile |
|
hand |
Indicates the ability to move a PDF page while holding down the mouse. |
Desktop |
|
help-circle |
Represents contextual help or information. |
Desktop Mobile |
|
help-circle-fill |
Represents contextual help or information. |
Desktop Mobile |
|
highlighter |
Indicates the ability to highlight text. |
Desktop |
|
history |
Represents a historical log of previously opened tabs. |
Desktop Mobile |
|
home |
Indicates the ability to navigate to the homepage. |
Desktop Mobile |
|
image |
Represents allowed tracking content. |
Desktop Mobile |
|
image-slash |
Represents blocked tracking content. |
Desktop Mobile |
|
information |
Represents an alert status to indicate information. |
Desktop Mobile |
|
information-fill |
Represents an alert status to indicate information. |
Desktop Mobile |
|
justify-center |
Indicates the ability to justify text to the center. |
Desktop |
|
justify-left |
Indicates the ability to justify text to the left. |
Desktop |
|
justify-right |
Indicates the ability to justify text to the right. |
Desktop |
|
import |
Indicates the ability to import data. |
Desktop |
|
import-export |
Indicates the ability to import, export, backup or restore data. |
Desktop |
|
layer |
Indicates the ability to show layers of a PDF. |
Desktop |
|
letter-spacing |
Indicates the ability to adjust letter spacing. |
Desktop |
|
line-spacing |
Indicates the ability to adjust line spacing. |
Desktop |
|
library |
Indicates the ability to view library content such as history, bookmarks, and downloads. |
Desktop |
|
link |
Indicates the ability to copy the link. |
Mobile |
|
list |
Indicates the ability to view the document outline. |
Desktop |
|
list-collapse |
Indicates the ability to collapse the document outline. |
Desktop |
|
location |
Indicates allowed location tracking. |
Desktop Mobile |
|
location-slash |
Indicates blocked location tracking. |
Desktop Mobile |
|
lock |
Represents a safe connection. |
Desktop Mobile |
|
lock-slash |
Represents an unsafe connection. |
Desktop Mobile |
|
lock-warning |
Represents a connection with a potential security risk. |
Desktop Mobile |
|
login |
Represents logins and passwords. |
Desktop Mobile |
|
media-skip-backward |
Indicates the ability to rewind media by 5 seconds. |
Desktop |
|
media-skip-forward |
Indicates the ability to fast forward media by 5 seconds. |
Desktop |
|
microphone |
Represents enabled microphone permissions.
Mobile: On Android, it also indicates the ability to convert speech to type. |
Desktop Mobile |
|
microphone-slash |
Represents blocked microphone permissions. |
Desktop Mobile |
|
more-grid |
On Android, it indicates the ability to open the app drawer or select an app. |
Mobile |
|
more-horizontal |
Indicates the ability to view more options. |
Desktop Mobile |
|
more-vertical |
On Android, it indicates the ability to open the app menu or view more options. |
Mobile |
|
music |
Represents music or sound. |
Desktop |
|
newsfeed |
Represents newsfeed. |
Desktop |
|
night-mode |
Indicates the ability to turn on night mode. Also represents brightness at the lowest setting. |
Mobile |
|
notification |
Represents allowed notification permissions. |
Desktop Mobile |
|
notification-slash |
Represents blocked notification permissions. |
Desktop Mobile |
|
notification-dot-badge-fill |
Represents an alert status to indicate something new.
This is used as a badge. |
Desktop Mobile |
|
open-tabs |
Represents open tabs. |
Desktop |
|
packaging |
Represents packaging. |
Desktop |
|
page-horizontal |
Represents a landscape document or a page. |
Desktop |
|
page-vertical |
Represents a portrait document or a page. |
Desktop |
|
page-thumbnails |
Indicates the ability to view PDF thumbnails. |
Desktop |
|
page-zoom |
Indicates the ability to zoom in content on a page. |
Mobile |
|
page-zoom-fill |
Indicates page zoom is active. |
Mobile |
|
pause-badge-fill |
Indicates the ability to pause media. |
Desktop Mobile |
|
passkey |
Represents a login or account. |
Desktop |
|
permission |
Represents permissions. Indicates the ability to view a pages permission settings. |
Desktop |
|
picture-in-picture-open |
Indicates the ability to open picture-in-picture mode. |
Desktop |
|
picture-in-picture-close |
Indicates the ability to close picture-in-picture mode. |
Desktop |
|
pin |
Indicates the ability to pin a website. |
Desktop Mobile |
|
pin-fill |
Represents a pinned website. |
Desktop Mobile |
|
pin-slash |
Indicates the ability to unpin a website. |
Mobile |
|
pin-slash-fill |
Indicates a website has been added as a shortcut. |
Mobile |
|
play |
Indicates the ability to play media. |
Desktop Mobile |
|
play-circle |
Indicates the ability to play media. |
Desktop |
|
plugin |
Represents allowed plugin permissions. |
Desktop Mobile |
|
plugin-slash |
Represents blocked plugin permissions. |
Desktop |
|
plus |
Indicates the ability to add an item, open a new tab, or zoom in. |
Desktop Mobile |
|
plus-circle-fill |
Indicates the ability to zoom in. |
Desktop |
|
|
Represents Pocket. Indicates the ability to save a website to Pocket and manage Pocket settings. |
Desktop |
|
pocket-fill |
Represents Pocket. Indicates the ability to save a website to Pocket and manage Pocket settings. |
Desktop |
|
presentation-mode |
Indicates the ability to view PDF in presentation mode. |
Desktop |
|
price |
Represents price. |
Desktop |
|
|