Iconography

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
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