Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Icons

Our icons are SVGs, the SVG sprite gets injected into the DOM by our Javascript.

Icons are symbols of frequently used actions or internal system state, or enhance meaning, distinctiveness and memorability of functionality.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-icon

<e-icon icon="cog"></e-icon>
<e-icon icon="cog"></e-icon>
JavaScript
Copy JavaScript

Small
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[size=small]

<e-icon icon="cog" size="small"></e-icon>
<e-icon icon="cog" size="small"></e-icon>
JavaScript
Copy JavaScript

Middle
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[size=middle]

<e-icon icon="cog" size="middle"></e-icon>
<e-icon icon="cog" size="middle"></e-icon>
JavaScript
Copy JavaScript

Large
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[size=large]

<e-icon icon="cog" size="large"></e-icon>
<e-icon icon="cog" size="large"></e-icon>
JavaScript
Copy JavaScript

Disabled
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[disabled]

<e-icon icon="cog" disabled></e-icon>
<e-icon icon="cog" disabled></e-icon>
JavaScript
Copy JavaScript

Rotate left
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[rotation=left]

<e-icon icon="e-thumbs-up" rotation="left"></e-icon>
<e-icon icon="e-thumbs-up" rotation="left"></e-icon>
JavaScript
Copy JavaScript

Rotate right
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[rotation=right]

<e-icon icon="e-thumbs-up" rotation="right"></e-icon>
<e-icon icon="e-thumbs-up" rotation="right"></e-icon>
JavaScript
Copy JavaScript

Inherit color
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[color="inherit"]

<div style="color:#bad;">
  <e-icon icon="cog" color="inherit"></e-icon>
</div>
<div style="color:#bad;">
  <e-icon icon="cog" color="inherit"></e-icon>
</div>
JavaScript
Copy JavaScript

Colors
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[color="*"]

<div class="doc-icons">
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="primary"></e-icon>
    <code class="doc-icons__title">
      color="primary"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="secondary"></e-icon>
    <code class="doc-icons__title">
      color="secondary"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="success"></e-icon>
    <code class="doc-icons__title">
      color="success"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="danger"></e-icon>
    <code class="doc-icons__title">
      color="danger"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="dark"></e-icon>
    <code class="doc-icons__title">
      color="dark"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="info"></e-icon>
    <code class="doc-icons__title">
      color="info"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="warning"></e-icon>
    <code class="doc-icons__title">
      color="warning"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="alert"></e-icon>
    <code class="doc-icons__title">
      color="alert"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="shade"></e-icon>
    <code class="doc-icons__title">
      color="shade"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="disabled"></e-icon>
    <code class="doc-icons__title">
      color="disabled"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="title"></e-icon>
    <code class="doc-icons__title">
      color="title"
    </code>
  </div>
  <div class="doc-icons__icon e-logo">
    <e-icon icon="cog" color="white"></e-icon>
    <code class="doc-icons__title">
      color="white"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="help"></e-icon>
    <code class="doc-icons__title">
      color="help"
    </code>
  </div>
</div>
<div class="doc-icons">
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="primary"></e-icon>
    <code class="doc-icons__title">
      color="primary"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="secondary"></e-icon>
    <code class="doc-icons__title">
      color="secondary"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="success"></e-icon>
    <code class="doc-icons__title">
      color="success"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="danger"></e-icon>
    <code class="doc-icons__title">
      color="danger"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="dark"></e-icon>
    <code class="doc-icons__title">
      color="dark"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="info"></e-icon>
    <code class="doc-icons__title">
      color="info"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="warning"></e-icon>
    <code class="doc-icons__title">
      color="warning"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="alert"></e-icon>
    <code class="doc-icons__title">
      color="alert"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="shade"></e-icon>
    <code class="doc-icons__title">
      color="shade"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="disabled"></e-icon>
    <code class="doc-icons__title">
      color="disabled"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="title"></e-icon>
    <code class="doc-icons__title">
      color="title"
    </code>
  </div>
  <div class="doc-icons__icon e-logo">
    <e-icon icon="cog" color="white"></e-icon>
    <code class="doc-icons__title">
      color="white"
    </code>
  </div>
  <div class="doc-icons__icon">
    <e-icon icon="cog" color="help"></e-icon>
    <code class="doc-icons__title">
      color="help"
    </code>
  </div>
</div>
JavaScript
Copy JavaScript
color="primary"
color="secondary"
color="success"
color="danger"
color="dark"
color="info"
color="warning"
color="alert"
color="shade"
color="disabled"
color="title"
color="help"

Label
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type=label]

<e-icon icon="cog" type="label"></e-icon>
<e-icon icon="cog" type="label"></e-icon>
JavaScript
Copy JavaScript

Table
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type=table]

<e-icon icon="cog" type="table"></e-icon>
<e-icon icon="cog" type="table"></e-icon>
JavaScript
Copy JavaScript

Inline
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type=inline]

<e-icon icon="cog" type="inline" size="small"></e-icon>
<e-icon icon="cog" type="inline" size="small"></e-icon>
JavaScript
Copy JavaScript

Helper
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type=helper]

<e-icon icon="question-circle" type="helper"></e-icon>
<e-icon icon="question-circle" type="helper"></e-icon>
JavaScript
Copy JavaScript

API Reference

Properties

NameDescriptionTypeRequiredDefault value
iconName of the iconstring
sizeSize of the icon, it can be empty (default), middle or largestring
disabledDisabled state of the iconstringfalse
colorColor of the icon, please the utility color classes for the valid valuesstring
rotationLeft or rightstring
typeValid strings: helper, label, table, dropdown, inlinestring

Application icons

align-center
align-left
align-right
ban
bar-chart-vertical
bar-chart
bars
bell
bolt
calendar-o
chain-broken
check
close
code
cog
copy-block
custom
dot-circle-o
dots
e-abort
e-ac
e-addon-add
e-addon
e-android
e-angle-double-down
e-angle-double-left
e-angle-double-right
e-angle-double-up
e-api
e-apple
e-approve
e-arrow-down
e-arrow-up
e-arrow
e-attr-first-touch
e-attr-last-touch
e-attr-linear
e-attr-time-decay
e-b2clogo-simple
e-batch
e-blocks
e-bold
e-book
e-briefcase
e-brokenimage
e-bullhorn
e-calculator
e-campaign_selector
e-caret-double-down
e-caret-double-up
e-caret-down
e-caret-left
e-caret-right
e-caret-up
e-cart
e-check-circle
e-chevron-circle-left
e-chevron-circle-right
e-clear
e-click_rate_overtime
e-click-button
e-click-rate
e-clipboard
e-clock-o
e-cloud-upload
e-combine
e-commenting
e-communication-network
e-company
e-compress
e-conditional_text
e-connect
e-device-selector
e-document-upload
e-download
e-email-block-based
e-email-custom-html
e-email-template-based
e-email
e-expand
e-external-link
e-externalevent
e-facebook-clr
e-facebook
e-fallback-text
e-file-bmp
e-file-file
e-file-folder
e-file-gif
e-file-gz
e-file-gzip
e-file-ico
e-file-jpg
e-file-png
e-file-rar
e-file-svg
e-file-tga
e-file-zip
e-filter
e-finish
e-frame_source
e-frame_style
e-frame_variables
e-general
e-gift
e-google-clr
e-google-plus
e-hashtag
e-header
e-helperlink
e-home
e-image-settings
e-inbox
e-info-circle
e-info
e-italic
e-jira
e-keyboard-return
e-keyboard-tab
e-language
e-link_overview
e-link_tracking
e-linkedin
e-list-add
e-logic-and
e-logic-or
e-logo-white
e-long-arrow-right
e-magento
e-media-rich
e-mediadb
e-mobile-settings
e-move-bottom
e-move-down
e-move-left
e-move-right
e-move-top
e-move-up
e-move-vertical
e-move
e-movetoleft
e-movetoright
e-other_contact
e-packages-add
e-packages
e-paragraph
e-pause
e-personal
e-phone
e-play
e-predict
e-productcatalog
e-profile
e-purchase
e-redo
e-refresh
e-reject
e-rename
e-reset
e-revenue-sd
e-revenue
e-review
e-rocket
e-selector-dual
e-selector-simple
e-send-document
e-sftp
e-shopify
e-sign-out
e-signout
e-skull
e-smile
e-spent
e-star
e-stop
e-strikethrough
e-style
e-tag-add
e-testing
e-text-version
e-thumbs-up
e-times-circle
e-times
e-track
e-trophy
e-twitter
e-undo
e-unlock
e-unsubscribe
e-update
e-usd
e-versions
e-wrench
envelope
exclamation-circle
exclamation
eye-slash
eye
file-text
files-o
floppy-o
folder-create
folder-open
folder
gavel
key
life-ring
line-chart
link
lock
minus
mobile-slash
mobile
monitor
pagebreak
pencil
picture-o
plus
question-circle
question
reset-block
search
star
table-sort-asc
table-sort-desc
table
template
th-large
th-list
trash-o
user-plus
user-verify
user
users
warning

DES icons
e-des-ac
e-des-check
e-des-compare
e-des-deliver
e-des-des
e-des-domains
e-des-quality
e-des-segmentation
e-des-trends

AC icons

ac-action-didntclicklink
ac-action-didntrespond
ac-action-email
ac-action-exclusionfilter
ac-action-export
ac-action-filter
ac-action-filterswitch
ac-action-finish
ac-action-schedule
ac-action-simplefilter
ac-action-sms
ac-action-splitter
ac-action-timer
ac-add_to_facebook_audience
ac-api_gnl1
ac-api_gnl2
ac-arrow_left
ac-arrow_right
ac-audience_exchange_add
ac-audience_exchange_remove
ac-birthday
ac-cart_outline
ac-condition-check
ac-condition-cross
ac-connected-program
ac-contacts_export
ac-crm-ads-add
ac-crm-ads-remove
ac-direct_mail
ac-doi
ac-ecrebo
ac-engagement_optimization
ac-entry-abandonedcart
ac-entry-connect-program
ac-entry-datachange
ac-entry-externalevent
ac-entry-form
ac-entry-massemail
ac-entry-newcontact
ac-entry-recipients
ac-entry-recurringfilter
ac-entry-recurringmassemail
ac-entry-schedule
ac-finish-connect-program
ac-google
ac-googlead_add
ac-googlead_remove
ac-icon_calendar_small_white
ac-icon_calendar_small
ac-icon_calendar
ac-icon_connect
ac-icon_copy
ac-icon_delete
ac-icon_down_arrow
ac-icon_edit
ac-icon_forward
ac-icon_help
ac-icon_info
ac-icon_participation
ac-icon_paste
ac-icon_pipe
ac-icon_revert
ac-icon_save
ac-icon_setting
ac-icon_zoomfit
ac-icon_zoomin
ac-icon_zoomout
ac-icon-info
ac-mail2print
ac-messengerpeople
ac-mobile
ac-nameday
ac-new_channel
ac-offline_mail
ac-on_data_change_alternative
ac-programmatic_retention
ac-push_notification
ac-pushwoosh
ac-response-abandonedcart
ac-salesforce
ac-sms
ac-socialad_add
ac-socialad_remove
ac-switch_node
ac-trigger_api
ac-value_control
ac-web_add
ac-web_remove
ac-web
ac-wechat

Icon guidelines

  1. When using icons, they should clearly and distinctively refer to the action or state they are symbolizing.
  2. Frequently used icons need no label, but less frequently used ones should be attached to a label as they help users to understand better what they see.
  3. When choosing icons:
    1. General icons should have consistent meaning everywhere (for example the pencil icon should mean "edit" everywhere).
    2. Context dependent actions or states can have the same icons across the app (for example the envelope icon), but they should make sense within the context they are used in.

Tooltips

All icons must have tooltips.

These clearly describe:

  • The action which will be executed when the icon is clicked - imperative verb: Delete
  • The state of the object that the icons stands for - adjective: Paused
  • The functionality, feature or product that the icon represents - noun: Reporting

Common icons

The following list shows the most common icons and their meaning, and the tooltip we always use. These icons should not be used with a different meaning, even in a different context.

Icon Tooltip Description
Send feedback Opens a dialog for the customer to send feedback on this page.
View Opens the item fully for viewing
Edit Opens the item in edit mode.
Delete Deletes the item from the current page. This is always followed by a confirmation message clarifying exactly what is deleted and where.
Help Opens a larger tooltip with detailed description and a link to the help website.
Refresh refreshes the page/list.
Combine combines two items to make a third.
Copy Creates an identical copy of the item.
View contact list displays the Search results page with a list of the contacts in the selection.
Rename Opens a pop-up containing only the name field of the item.
Report Opens the reporting page for the item.
Personalization Opens the Personalization feature.
Conditional text Opens the conditional text feature.
Send Time Optimization indicates that this email was sent using STO.
Incentive Recommendation Indicates that this email contains an incentive.
Settings Opens the settings for the item.
Delete permanently The skull and cross-bones deletes an item from the database not just from the page.