Iconography

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
Mobile

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
Mobile

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
Mobile

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

pocket

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
Mobile

print

Indicates the ability to print.

Desktop

private-mode-fill

Indicates the ability to view private tabs.

On Android, it also indicates the ability to toggle between regular and private browsing.

Desktop

Mobile

private-mode-circle-fill

Represents private browsing mode.

Desktop

Mobile

qr-code

Represents a QR code.

Mobile

quality

Represents quality.

Desktop
Mobile

reading-list

Indicates the ability to view the reading list.

Mobile

reading-list-add

Indicates the ability to add a page to the reading list.

Mobile

reader-view

Indicates the ability to toggle reader view.

Desktop

Mobile

reader-view-fill

Indicates reader view is turned on.

Mobile

save

Represents a group of save features.

Mobile

save-file

Indicates the ability to save a PDF.

Mobile

screenshare

Represents allowed screenshare permissions.

Desktop

screenshare-slash

Represents blocked screenshare permissions.

Desktop

scroll-horizontal

Indicates the ability to scroll horizontally.

Desktop

scroll-page

Indicates the ability to only view the current page of a PDF.

Desktop

scroll-vertical

Indicates the ability to scroll vertically.

Desktop

scroll-wrapped

Indicates the ability to wrap pages in a current view.

Desktop

search

Indicates the ability to input a search query.

Desktop

Mobile

settings

Indicates the ability to view and manage app settings.

Desktop

Mobile

share-android

Indicates the ability to share on Android.

Mobile

share-apple

Indicates the ability to share a tab on macOS and iOS.

Desktop

Mobile

share-windows

Indicates the ability to share on winOS.

Desktop

shield

Represents enhanced tracking protection is turned on. Indicates the ability to view a page's tracking protection settings.

Desktop

Mobile

shield-slash

Represents enhanced tracking protection is turned off. Indicates the ability to view a page's tracking protection settings.

Desktop

Mobile

shipping

Represents shipping.

Desktop
Mobile

shopping

Represents shopping features.

Desktop
Mobile

sidebar-right

Indicates the ability to toggle the right sidebar.

Desktop

sidebar-left

Indicates the ability to toggle the left sidebar.

Desktop

social-tracker

Represents allowed social trackers.

Desktop

Mobile

social-tracker-slash

Represents allowed social trackers.

Desktop

sparkle

Represents highlights, recent activity, and recommendations.

Desktop

Mobile

spreads-even

Indicates the ability to view a PDF in spreads, starting at page 2 and 3.

Desktop

spreads-none

Indicates the ability to view a PDF in a spread, beginning at page 1 and 2.

Desktop

spreads-odd

Indicates the ability to view a PDF in a spread, beginning at page 2 and 3.

Desktop

star-half

Represents a half star rating.

Mobile

star-half-full

Represents a half star rating.

Mobile

sort

Indicates the ability to sort or toggle view.

Desktop

storage

Represents allowed storage permissions.

Desktop

Mobile

storage-slash

Represents blocked storage permissions.

Desktop

Mobile

subitem

Represents a subitem.

Desktop

subtract

Indicates the ability to zoom out.

Desktop

subtract-circle-fill

Indicates the ability to zoom out or remove.

Desktop

Mobile

sun

Represents brightness at the highest setting.

Mobile

sync

Indicates the availability of a sync action or a sync in progress.

Desktop

Mobile

sync-tabs

Represents synced tabs.

Desktop

Mobile

tab

Represents tabs.

Desktop

tab-badge-fill

Represents the item is an opened tab.

This is used as a badge.

Mobile

tab-number

Represents tabs or tab tray. Indicates current number of tabs open, the ability to open the tab tray, or view opened tabs.

Mobile

tab-tray

Represents all tabs or tab tray.

This is currently only being used on mobile.

Desktop

Mobile

theme

Represents themes.

Desktop

Mobile

tool

Represents page tools.

Mobile

top-sites

Represents shortcuts to most-recent and most-visited pages.

Desktop

translate

Represents translation.

Desktop

Mobile

translate-circle

Indicates a translated page.

Mobile

update-circle

Represents app updates.

Mobile

update-circle-fill

Represents app updates.

Desktop

warning

Represents an alert status to indicate warning.

Desktop

Mobile

warning-badge-fill

Represents an alert status to indicate warning.

This is used as a badge.

Desktop

warning-fill

Represents an alert status to indicate warning.

Desktop

Mobile

window

Represents a window.

Desktop

whats-new

Represents updates.

Mobile

word-spacing

Indicates the ability to adjust word spacing.

Desktop

xr

Represents allowed virtual reality permissions.

Desktop

xr-slash

Represents blocked virtual reality permissions.

Desktop

Oct 17, 2023

1.1.0

Added sun icon and updated private mode icons.

Feb 3, 2023

1.0.0

Initial draft of icon guidance.