Iconography - Acorn Design System

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.

Don't

Use an icon for more than one context.

Refer to the table below for usage guidance for specific icons.

If you need usage clarification or help choosing an appropriate icon for your project, please reach out to #acorn-design-system on Slack.

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