UI Kit

Code Guidelines

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.

Last update:	()
Message	doc(icons): guideline table design
Committer:	Tamás Bíró
Version history

Default

Copy Jade

Copy HTML

Show code

Hide code
.e-icon

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


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

Small
Copy Jade

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 Jade

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 Jade

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 Jade

Copy HTML

Show code

Hide code
[disabled]

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


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

Rotate left
Copy Jade

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 Jade

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 Jade

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 Jade

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"

color="white"

Helper
Copy Jade

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

Name	Description	Type	Default value
icon	Name of the icon	string
size	Size of the icon, it can be empty (default), middle or large	string
disabled	Disabled state of the icon	string	false
color	Color of the icon, please the utility color classes for the valid values	string
rotation	Left or right	string
type	Valid strings: helper, label, table, dropdown, inline	string

Application icons

align-center

align-left

align-right

angle-double-left

angle-double-right

ban

bar-chart-vertical

bar-chart

bars

bell

bolt

calendar-o

caret-double-down

caret-double-up

caret-down

caret-left

caret-right

caret-up

chain-broken

check

close

cloud-upload

code

cog

compress

copy-block

custom

dot-circle-o

dots

download

e-abort

e-ac

e-android

e-angle-double-down

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

e-check-circle

e-chevron-circle-left

e-click_rate_overtime

e-click-rate

e-clipboard

e-clock-o

e-combine

e-commenting

e-communication-network

e-company

e-conditional_text

e-connect

e-device-selector

e-email

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

e-frame_style

e-frame_variables

e-general

e-gift

e-google-clr

e-google-plus

e-hashtag

e-header

e-image-settings

e-inbox

e-info-circle

e-info

e-italic

e-jira

e-link_overview

e-link_tracking

e-linkedin

e-logo

e-long-arrow-right

e-mediadb

e-move-left

e-move-right

e-move

e-other_contact

e-paragraph

e-pause

e-personal

e-phone

e-play

e-predict

e-profile

e-purchase

e-refresh

e-reject

e-rename

e-revenue

e-review

e-rocket

e-selector-dual

e-selector-simple

e-send-document

e-sftp

e-signout

e-skull

e-smile

e-spent

e-star

e-stop

e-strikethrough

e-testing

e-text-version

e-thumbs-up

e-times-circle

e-times

e-track

e-trophy

e-twitter

e-unsubscribe

e-usd

e-versions

emarsys

envelope

exclamation-circle

exclamation

expand

external-link

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

move-left

move-right

pagebreak

pencil

picture-o

plus

question-circle

question

refresh

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

ac-crm-ads-add

ac-crm-ads-remove

ac-direct_mail

ac-doi

ac-engagement_optimization

ac-entry-abandonedcart

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

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_undo

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

Icon guidelines

When using icons, they should clearly and distinctively refer to the action or state they are symbolizing.
Except for frequently used icons, they should be attached to a label as they help users to understand better what they see.
Icons should have tooltips clearly describing the action or state the icons stands for.
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.

Icon meanings

The following list describes icons and their meaning. These general actions shouldn't be used with a different meaning, even in a different context.

Icon	Action	Description
	Send feedback
	View
	Help
	Edit
	Delete
	Tooltip
	Refresh
	Combine
	Copy
	View contact list
	Rename
	Report
	Personalisation
	Conditional text
	Send Time Optimization
	Incentive Recommendation
	Settings

UI Kit

Icons

Default

Copy Jade Copy HTML Show code Hide code .e-icon

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

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

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

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

Rotate left Copy Jade Copy HTML Show code Hide code [rotation=left]

Rotate right Copy Jade Copy HTML Show code Hide code [rotation=right]

Inherit color Copy Jade Copy HTML Show code Hide code [color="inherit"]

Colors Copy Jade Copy HTML Show code Hide code [color="*"]

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