Iconography

null

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

null

add-to-homescreen

Indicates the ability to add a webpage shortcut to the device's homescreen.

Mobile

null

app-menu

Represents app menu on desktop and iOS.

Desktop

Mobile

null

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

null

append-up

Indicates the ability to add on to a search (when the toolbar is positioned at the top).

Mobile

null

append-down

Indicates the ability to add on to a search (when the toolbar is positioned at the bottom).

Mobile

null

attachment

Indicates the ability to show attachments or attach an item.

Desktop

null

arrow-clockwise

Indicates the ability to reload or rotate clockwise.

Desktop

Mobile

null

arrow-counterclockwise

Indicates the ability to rotate counterclockwise.

Desktop

null

arrow-trending

Indicates trending predictions.

Desktop

null

audio

Indicates the ability to toggle volume settings.

Desktop

null

audio-mute

Indicates muted audio.

Desktop

null

audio-fill

Indicates media playing in a tab on desktop.

Desktop

null

audio-fill-slash

Indicates paused media in a tab on desktop.

Desktop

null

audio-circle-fill

Indicates the ability to mute media.

Desktop

null

audio-mute-circle-fill

Indicates the ability to unmute media.

Desktop

null

autoplay

Indicates autoplay media.

Desktop

Mobile

null

autoplay-slash

Indicates autoplay media is blocked.

Desktop

Mobile

null

avatar

Represents a non-signed in user.

Desktop

Mobile

null

avatar-fill

Represents a signed in user.

Desktop

Mobile

null

avatar-info

Represents a signed in user that hasn't confirmed their e-mail.

Mobile

null

avatar-initial

Represents a signed-in user.

 

Indicates the ability to view FxA settings.

Desktop

null

avatar-warning

Represents a signed in user with an alert.

Mobile

null

back

Indicates the ability to navigate to the previous webpage or screen.

Desktop

Mobile

null

blocked-popup

Represents a blocked popup permission.

Desktop

null

bookmark

Indicates the ability to bookmark a tab.

Desktop

Mobile

null

bookmark-fill

Indicates an individual saved bookmark or a group of saved bookmarks. It can also be used to indicate rating.

Desktop

Mobile

null

bookmark-tray

Represents bookmarks tray.

Desktop

Mobile

null

bookmark-tray-fill

Indicates the ability to open and view the bookmarks tray.

Mobile

null

bookmark-slash

Indicates the ability to remove a bookmark.

Mobile

null

camera

Represents allowed camera permissions.

Desktop

Mobile

null

camera-slash

Represents blocked camera permissions.

Desktop

Mobile

null

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

null

checkmark-circle-fill

Represents an alert status to indicate success.

Desktop

null

chevron-double-right

Represents overflow menu. Indicates the ability to reveal more items or options in the overflow menu.

Desktop

null

chevron-down

Indicates an expandable component such as a list, dropdown, or the ability to skip to view the next item.

Desktop

Mobile

null

chevron-left

Indicates the ability to navigate to a previous page/step or view overflow items to the left.

Desktop

Mobile

null

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

null

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

null

clipboard

Indicates the ability to paste.

Mobile

null

closed-caption

Indicates the ability to view closed caption settings.

Desktop

null

closed-tabs

Represents closed tabs.

Desktop

null

collection

Represents collections.

Mobile

null

competitiveness

Represents competitiveness.

Desktop
Mobile

null

cookies

Represents allowed cookie permissions.

Desktop

Mobile

null

cookies-slash

Represents blocked cookie permissions.

Desktop

Mobile

null

copy

Indicates the ability to copy.

Mobile

null

critical

Represents an alert status to indicate danger or a critical error.

Desktop

Mobile

null

critical-fill

Represents an alert status to indicate danger or a critical error.

Desktop

Mobile

null

cross

Indicates the ability to close a tab or component.

 

Mobile:

On Android, it also indicates the ability to remove an item.

Desktop

Mobile

null

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

null

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

null

cryptominer

Represents cryptominers tracking protection.

Desktop

null

cryptominer-slash

Represents blocked cryptominers tracking protection.

Desktop

Mobile

null

current-view

Indicates the ability to share the URL to the current PDF page.

Desktop

null

cursor-text

Indicates the ability to add text to a PDF.

Desktop

null

cursor-arrow

Indicates the ability to select text on a PDF.

Desktop

null

device-desktop

Represents a desktop computer. Indicates the ability to request the desktop version of a webpage.

Mobile

null

device-desktop-send

Indicates the ability to send a link to a synced device.

Desktop

Mobile

null

device-mobile

Represents a mobile phone.

 

On iOS:

Indicates the ability to request the mobile version of a webpage.

Desktop

Mobile

null

delete

Indicates the ability to delete.

Desktop

Mobile

null

download

Indicates the ability to view downloads.

Desktop

Mobile

null

edit

Indicates the ability to edit an item.

Desktop

Mobile

null

edit-active

Indicates PDF is in edit mode.

Desktop

null

edit-squiggle

Indicates the ability to draw.

Desktop

null

error

Indicates the ability to remove.

Desktop

null

experiments

Represents experiments.

Desktop

Mobile

null

export

Indicates the ability to export data.

Desktop

null

external-link

Indicates the ability to open a link in an external window.

Desktop

null

extension

Desktop:

Represents extensions.

 

Mobile:

Represents Add-ons on Android.

Desktop

Mobile

null

extension-fill

Desktop:

Represents extensions.

 

Mobile:

Represents Add-ons on Android.

Desktop

Mobile

null

eye

Indicates the ability to show password.

Desktop

Mobile

null

eye-slash

Indicates the ability to hide password.

Desktop

Mobile

null

fingerprinter

Represents fingerprinter tracking content.

Desktop

Mobile

null

fingerprinter-slash

Represents blocked fingerprinter tracking content.

Desktop

null

folder

Represents a group.

Desktop

Mobile

 

null

folder-add

Indicates the ability to create or add a new group.

Mobile

null

folder-arrow-down

Indicates the ability to save a file.

Desktop

null

folder-fill

Represents a group.

Desktop

null

forward

Indicates the ability to navigate to the next webpage or screen.

Desktop

Mobile

null

fullscreen-disabled

Indicates the ability to disable fullscreen mode.

Desktop

null

fullscreen-expand

Indicates the ability to expand a window or video to fullscreen.

Desktop

null

fullscreen-exit

Indicates the ability to exit out of fullscreen mode.

Desktop

null

fx-view

Represents Firefox View.

Desktop

null

globe

Used as a default or placeholder favicon.

Desktop

Mobile

null

go-to-first

Indicates the ability to navigate to the first page or section.

Desktop

null

go-to-last

Indicates the ability to navigate to the last page or section.

Desktop

null

hand

Indicates the ability to move a PDF page while holding down the mouse.

Desktop

null

help-circle

Represents contextual help or information.

Desktop

Mobile

null

help-circle-fill

Represents contextual help or information.

Desktop

Mobile

null

highlighter

Indicates the ability to highlight text.

Desktop

null

history

Represents a historical log of previously opened tabs.

Desktop

Mobile

null

home

Indicates the ability to navigate to the homepage.

Desktop

Mobile

null

image

Represents allowed tracking content.

Desktop

Mobile

null

image-slash

Represents blocked tracking content.

Desktop

Mobile

null

information

Represents an alert status to indicate information.

Desktop

Mobile

null

information-fill

Represents an alert status to indicate information.

Desktop

Mobile

null

import

Indicates the ability to import data.

Desktop

null

import-export

Indicates the ability to import, export, backup or restore data.

Desktop

null

layer

Indicates the ability to show layers of a PDF.

Desktop

null

library

Indicates the ability to view library content such as history, bookmarks, and downloads.

Desktop

null

link

Indicates the ability to copy the link.

Mobile

null

list

Indicates the ability to view the document outline.

Desktop

null

list-collapse

Indicates the ability to collapse the document outline.

Desktop

null

location

Indicates allowed location tracking.

Desktop

Mobile

null

location-slash

Indicates blocked location tracking.

Desktop

Mobile

null

lock

Represents a safe connection.

Desktop

Mobile

null

lock-slash

Represents an unsafe connection.

Desktop

Mobile

null

lock-warning

Represents a connection with a potential security risk.

Desktop

Mobile

null

login

Represents logins and passwords.

Desktop

Mobile

null

media-skip-backward

Indicates the ability to rewind media by 5 seconds.

Desktop

null

media-skip-forward

Indicates the ability to fast forward media by 5 seconds.

Desktop

null

microphone

Represents enabled microphone permissions.

 

Mobile:

On Android, it also indicates the ability to convert speech to type.

Desktop

Mobile

null

microphone-slash

Represents blocked microphone permissions.

Desktop

Mobile

null

more-grid

On Android, it indicates the ability to open the app drawer or select an app.

Mobile

null

more-horizontal

Indicates the ability to view more options.

Desktop

Mobile

null

more-vertical

On Android, it indicates the ability to open the app menu or view more options.

Mobile

null

music

Represents music or sound.

Desktop

null

night-mode

Indicates the ability to turn on night mode. Also represents brightness at the lowest setting.

Mobile

null

notification

Represents allowed notification permissions.

Desktop

Mobile

null

notification-slash

Represents blocked notification permissions.

Desktop

Mobile

null

notification-dot-badge-fill

Represents an alert status to indicate something new.

 

This is used as a badge.

Desktop

Mobile

null

open-tabs

Represents open tabs.

Desktop

null

packaging

Represents packaging.

Desktop
Mobile

null

page-horizontal

Represents a landscape document or a page.

Desktop

null

page-vertical

Represents a portrait document or a page.

Desktop

null

page-thumbnails

Indicates the ability to view PDF thumbnails.

Desktop

null

page-zoom

Indicates the ability to zoom in content on a page.

Mobile

null

pause-badge-fill

Indicates the ability to pause media.

Desktop

Mobile

null

passkey

Represents a login or account.

Desktop
Mobile

null

permission

Represents permissions. Indicates the ability to view a pages permission settings.

Desktop

null

picture-in-picture-open

Indicates the ability to open picture-in-picture mode.

Desktop

null

picture-in-picture-close

Indicates the ability to close picture-in-picture mode.

Desktop

null

pin

Indicates the ability to pin a website.

Desktop

Mobile

null

pin-fill

Represents a pinned website.

Desktop

Mobile

null

pin-slash

Indicates the ability to unpin a website.

Mobile

null

play

Indicates the ability to play media.

Desktop

Mobile

null

play-circle

Indicates the ability to play media.

Desktop

null

plugin

Represents allowed plugin permissions.

Desktop

Mobile

null

plugin-slash

Represents blocked plugin permissions.

Desktop

null

plus

Indicates the ability to add an item, open a new tab, or zoom in.

Desktop

Mobile

null

plus-circle-fill

Indicates the ability to zoom in.

Desktop

null

pocket

Represents Pocket. Indicates the ability to save a website to Pocket and manage Pocket settings.

Desktop

null

pocket-fill

Represents Pocket. Indicates the ability to save a website to Pocket and manage Pocket settings.

Desktop

null

presentation-mode

Indicates the ability to view PDF in presentation mode.

Desktop

null

price

Represents price.

Desktop
Mobile

null

print

Indicates the ability to print.

Desktop

null

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

null

private-mode-circle-fill

Represents private browsing mode.

Desktop

Mobile

null

qr-code

Represents a QR code.

Mobile

null

quality

Represents quality.

Desktop
Mobile

null

reading-list

Indicates the ability to view the reading list.

Mobile

null

reading-list-add

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

Mobile

null

reader-view

Indicates the ability to toggle reader view.

Desktop

Mobile

null

screenshare

Represents allowed screenshare permissions.

Desktop

null

screenshare-slash

Represents blocked screenshare permissions.

Desktop