Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

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
Show code
Hide code
.e-icon

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

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

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

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

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

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

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

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

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

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

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

Disabled
Copy Pug
Copy HTML
Show code
Hide code
[disabled]

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

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

Rotate left
Copy Pug
Copy HTML
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>

Rotate right
Copy Pug
Copy HTML
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>

Inherit color
Copy Pug
Copy HTML
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>

Colors
Copy Pug
Copy HTML
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>

<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>
color="primary"
color="secondary"
color="success"
color="danger"
color="dark"
color="info"
color="warning"
color="alert"
color="shade"
color="disabled"
color="title"

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

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

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

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
cloud-upload
code
cog
copy-block
custom
dot-circle-o
dots
e-abort
e-ac
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
e-b2clogo-simple
e-batch
e-blocks
e-bold
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-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
e-expand
e-external-link
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-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-long-arrow-right
e-mediadb
e-move-bottom
e-move-down
e-move-left
e-move-right
e-move-top
e-move-up
e-move-vertical
e-move
e-other_contact
e-paragraph
e-pause
e-personal
e-phone
e-play
e-predict
e-profile
e-purchase
e-pushwoosh
e-redo
e-refresh
e-reject
e-rename
e-reset
e-revenue
e-review
e-rocket
e-selector-dual
e-selector-simple
e-send-document
e-sftp
e-sign-out
e-signout
e-skull
e-smile
e-spent
e-star
e-stop
e-strikethrough
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
emarsys
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
sign-out
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-connected-program
ac-contacts_export
ac-crm-ads-add
ac-crm-ads-remove
ac-direct_mail
ac-doi
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-mobile
ac-nameday
ac-new_channel
ac-on_data_change_alternative
ac-programmatic_retention
ac-push_notification
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

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.