Icons are used to indicate navigation, status, type, settings, and other information.
Example
<Icon name="ab" /> |
AB: Return to AB testing, used in a sidebar navigation item in Program Management. |
|
<Icon name="add" /> |
Add: Used in buttons for adding a row, or in list boxes to indicate clicking will add the page, audience, metric etcetera. |
|
<Icon name="align-center" /> |
Align (Center): Visual editor icon. Used for centering text. |
|
<Icon name="align-justify" /> |
Align (Justify): Visual editor icon. Used for justifying text. |
|
<Icon name="align-left" /> |
Align (Left): Visual editor icon. Used for aligning text to the left. |
|
<Icon name="align-right" /> |
Align (Right): Visual editor icon. Used for aligning text to the right. |
|
<Icon name="archive" /> |
Archive: Used in icon buttons for archiving various entities. |
|
<Icon name="arrow-left" /> |
Arrow (Left): Used in chevrons for back buttons, and in calendars to navigate the months. |
|
<Icon name="arrow-right" /> |
Arrow (Right): Used in calendars to navigate the months. |
|
<Icon name="arrow-right-stem" /> |
Icon: Used to indicate movement or transfer. Currently used in the duplication dialog. |
|
<Icon name="audiences" /> |
Audiences: Audiences entities. Also used in root navigation for the Audiences tab. |
|
<Icon name="badge" /> |
Badge: Not used. |
|
<Icon name="ban" /> |
Ban: Visual editor icon. Used for removing an element in a variation. |
|
<Icon name="bell" /> |
Bell: Not used. |
|
<Icon name="calendar" /> |
Calendar: Used in date range pickers and scheduler. |
|
<Icon name="campaigns" /> |
Campaign: Campaign entities, rarely used. |
|
<Icon name="check" /> |
Icon: Used in the visual editor when confirming CSS selector change. |
|
<Icon name="clipboard" /> |
Clipboard: Used to indicated that a given field or text area is copyable. |
|
<Icon name="close" /> |
Close: Used in many places to indicate that something is closable, or cancelable. |
|
<Icon name="code" /> |
Code: Not used. |
|
<Icon name="collaborators" /> |
Collaborators: Only used in the help sidebar of the collaborators section. |
|
<Icon name="collapse" /> |
Collapse: Used in preview to collapse the preview widget. |
|
<Icon name="create-ab" /> |
Create A/B Experiment: Used in the create dropdown for A/B experiments. |
|
<Icon name="create-campaign" /> |
Create Campaign: Used in the create dropdown for Campaigns. |
|
<Icon name="create-mvt" /> |
MVT Experiment: Used in the create dropdown for MVT experiments. |
|
<Icon name="desktop" /> |
Desktop: Not used. |
|
<Icon name="dimensions" /> |
Dimensions: Not used. |
|
<Icon name="download" /> |
Download: Used in revision history for full stack (Not customer facing) to download the revision of particular datafile. |
|
<Icon name="duplicate" /> |
Duplicate: Used in the collaborators screen for duplicating collaborators to other projects. |
|
<Icon name="editor-switch" /> |
Editor Switch: Not used. |
|
<Icon name="ellipsis" /> |
Ellipsis: Used in table rows for the additional actions menu. |
|
<Icon name="events" /> |
Events : Events entities. Also used in the root navigation for the Events section. |
|
<Icon name="exclamation" /> |
Exclamation: Used inline with text to present a warning. |
|
<Icon name="exit" /> |
Exit: Exits preview mode. |
|
<Icon name="experiment" /> |
Experiments: Experiment entities. Also visible in the root navigation for sidebar items. |
|
<Icon name="extensions" /> |
Extensions: Used only in change history for Extension entities. |
|
<Icon name="external" /> |
External Link: Used in conjunction with links to indicate that a link opens in a new window or tab. |
|
<Icon name="eye" /> |
Eye: Visual editor icon. Used for showing an icon in a variation. |
|
<Icon name="eye-closed" /> |
Eye (Closed): Visual editor icon. Used for hiding an icon in a variation. |
|
<Icon name="feature-flag" /> |
Feature Flag: Not used. |
|
<Icon name="feedback" /> |
Feedback: Root navigation item for showing the “Provide Feedback” dialog. |
|
<Icon name="goal" /> |
Goal: Not used. |
|
<Icon name="hamburger" /> |
Hamburger: Not used. |
|
<Icon name="help" /> |
Help: Used in various places to indicate there’s a help popover available, or as an inline icon for chunks of help text. |
|
<Icon name="history" /> |
History: Not used. |
|
<Icon name="image" /> |
Image: Not used. |
|
<Icon name="inconclusive" /> |
Inconclusive: Not used. |
|
<Icon name="integrations" /> |
Integrations: Not used. |
|
<Icon name="link" /> |
Link: Not used. |
|
<Icon name="live-variables" /> |
Live Variables: Not used. |
|
<Icon name="lock" /> |
Lock: Not used. |
|
<Icon name="loser" /> |
Loser: Not used. |
|
<Icon name="minus" /> |
Minus: Opposite of “add”. Used to remove rows from tables that were added with “add” |
|
<Icon name="mobile" /> |
Mobile: Not used. |
|
<Icon name="orientation-landscape" /> |
Orientation Landscape: Not used. |
|
<Icon name="orientation-portrait" /> |
Orientation Portrait: Not used. |
|
<Icon name="pages" /> |
Pages: Pages Entities. Also used in root navigation for pages section. |
|
<Icon name="paperclip" /> |
Paperclip: Not used. |
|
<Icon name="parent-selector" /> |
Parent Selector: Not used. |
|
<Icon name="pause" /> |
Pause: Toolbar icon. Used for pausing experiments, etc. |
|
<Icon name="play" /> |
Play: Toolbar icon. Used for starting/resuming experiments, etc. |
|
<Icon name="preferences" /> |
Preferences: Not used. |
|
<Icon name="projects" /> |
Projects: Root navigation icon for showing the project picker. Should not be used as a project entity icon. |
|
<Icon name="redirect" /> |
Redirect: Not used. |
|
<Icon name="redo" /> |
Redo: Not used. |
|
<Icon name="refresh" /> |
Refresh: Toolbar icon. Used for refreshing the visual editor. |
|
<Icon name="rollouts" /> |
Rollouts: Rollouts entities. Also used the root navigation to indicate the Rollouts section. |
|
<Icon name="save" /> |
Save: Not used. |
|
<Icon name="search" /> |
Search: Used in input fields to indicate the field allows for searching/filtering by name. |
|
<Icon name="settings" /> |
Settings: Root navigation icon for settings. |
|
<Icon name="star" /> |
Star: Not used. |
|
<Icon name="sync" /> |
Sync: Not used. |
|
<Icon name="tablet" /> |
Tablet: Not used. |
|
<Icon name="tags" /> |
Tags: Not used. |
|
<Icon name="toolbar-code-editor" /> |
Toolbar Code Editor: Toolbar icon to show code editor in the visual editor. |
|
<Icon name="toolbar-dev-tools" /> |
Toolbar Dev Tools: Toolbar icon to show the developer tools dropdown in the visual editor. This is only visible to internal employees. |
|
<Icon name="toolbar-interactive-mode" /> |
Toolbar Interactive Mode: Toolbar icon to toggle interactive mode. |
|
<Icon name="toolbar-new-window" /> |
Toolbar New Window: Toolbar icon for popping out the visual editor into a new window. |
|
<Icon name="toolbar-new-window-close" /> |
Toolbar New Window Close: Toolbar icon for calling the popped out editor window back into the main window. |
|
<Icon name="toolbar-reload" /> |
Toolbar Reload: Toolbar icon in the visual editor for refreshing the current page. |
|
<Icon name="toolbar-size-desktop" /> |
Toolbar Desktop Size: Visual editor size picker option. |
|
<Icon name="toolbar-size-full-width" /> |
Toolbar Size Full-width: Visual editor size picker option. |
|
<Icon name="toolbar-size-mobile" /> |
Toolbar Size Mobile: Visual editor size picker option. |
|
<Icon name="toolbar-size-tablet" /> |
Toolbar Size Tablet: Visual editor size picker option. |
|
<Icon name="toolbar-size-widescreen" /> |
Toolbar Size Widescreen: Visual editor size picker option. |
|
<Icon name="trash" /> |
Trash: Not used. |
|
<Icon name="undo" /> |
Undo: Not used. |
|
<Icon name="upload" /> |
Upload: In the visual editor, allows users to select a new background image and upload it for the selected element. |
|
<Icon name="userlist" /> |
User List: Not used. |
|
<Icon name="variation-settings" /> |
Variation Settings: Not used. |
|
<Icon name="view-code" /> |
View Code: Not used. |
|
<Icon name="vote-down" /> |
Vote (Down): Not used. |
|
<Icon name="vote-up" /> |
Vote (Up): Not used. |
|
<Icon name="winner" /> |
Winner: Not used. |