Icons
It is recommended that you always set the color for the icon so it will change when switching to dark theme in the future.
Usage:
.odyssey-icon-NAME {
.icon('NAME', SIZE, COLOR)
}
EXAMPLE:
.odyssey-icon-alert {
.icon('alert', 24px, @dark)
}
Output From The Example Above:
Icons:
access
account
accounts-1
accounts
advertiser
alert
alert_circle
alert_triangle
analysis_graph
analysis_parameters
analysis_pulse
appendix_rotated
appendix_vertical
archive
arrow_drag
arrow_right_circled
arrow_sort
attribution_settings
bank
carousel
cart
check
checkbox_checked
checkbox_multiple
checkbox_unchecked
check_filled
check_outlined
clicks
clock
close
close_filled
close_outlined
code
collage
columns
contract
cookie_length
costs
credit_card
crown
cube
dashboard
database
data_collector
data_exploration
date
days
desktop
direct
display
display_products
dollar
download
drag
dropdown_down
dropdown_left
dropdown_right
dropdown_top
earned_social
edit
euro
expand_left
expand_less
expand_less_white
expand_more
expand_more_white
expand_right
filter
folder
fold_left
fold_right
goals
help_center
hint
home
integrations
invoice
job_log
link_builder
link_connected
link_disconnected
live_chat
loading
lock
mail
members
menu
menu_3
minus
minus_circle
more_horizontal
more_vertical
notifications
office
organic_search
outbound
owned_social
paid_search
paid_social
paste
pause
payments
percentage
phone
picture
plus
plus_circle
pointer_bottom
pointer_left
pointer_right
pointer_top
power
print
publications
referrals
reset
return
rows
rulebuilder
search
sessions
settings
share
sign_out
smartphone
sort
stats_down
stats_up
status
storefront
tablet
tag
thick_down
thick_left
thick_right
thick_up
tools
tooltip
trash
upload
users_account
users_admin
users_multiple
users_share
users_single
user_add
view
widget
play
admin
fallback
bullet_list
www
transaction-journey-transaction
transaction-journey
affiliate
direct-unknown
direct
display
earned-social
email
organic-search
other
owned-social
paid-search
paid-social
partner
referringMarkup
<p>Usage:</p>
<pre>
<code>
.odyssey-icon-NAME {
.icon('NAME', SIZE, COLOR)
}
<p>EXAMPLE:</p>
.odyssey-icon-alert {
.icon('alert', 24px, @dark)
}
</code>
</pre>
<p>Output From The Example Above:</p>
<i class="odyssey-icon-alert"></i>
<h5>Icons:</h5>
<div style="display:flex; flex-direction:column;">
<div style="display: flex; flex-direction:row; flex-wrap: wrap; margin: 20px 0;">
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/access.svg" style="padding: 30px; padding-bottom:15px;"/>access</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/account.svg" style="padding: 30px; padding-bottom:15px;"/>account</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/accounts-1.svg" style="padding: 30px; padding-bottom:15px;"/>accounts-1</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/accounts.svg" style="padding: 30px; padding-bottom:15px;"/>accounts</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/advertiser.svg" style="padding: 30px; padding-bottom:15px;"/>advertiser</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/alert.svg" style="padding: 30px; padding-bottom:15px;"/>alert</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/alert_circle.svg" style="padding: 30px; padding-bottom:15px;"/>alert_circle</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/alert_triangle.svg" style="padding: 30px; padding-bottom:15px;"/>alert_triangle</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/analysis_graph.svg" style="padding: 30px; padding-bottom:15px;"/>analysis_graph</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/analysis_parameters.svg" style="padding: 30px; padding-bottom:15px;"/>analysis_parameters</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/analysis_pulse.svg" style="padding: 30px; padding-bottom:15px;"/>analysis_pulse</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/appendix_rotated.svg" style="padding: 30px; padding-bottom:15px;"/>appendix_rotated</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/appendix_vertical.svg" style="padding: 30px; padding-bottom:15px;"/>appendix_vertical</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/archive.svg" style="padding: 30px; padding-bottom:15px;"/>archive</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/arrow_drag.svg" style="padding: 30px; padding-bottom:15px;"/>arrow_drag</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/arrow_right_circled.svg" style="padding: 30px; padding-bottom:15px;"/>arrow_right_circled</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/arrow_sort.svg" style="padding: 30px; padding-bottom:15px;"/>arrow_sort</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/attribution_settings.svg" style="padding: 30px; padding-bottom:15px;"/>attribution_settings</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/bank.svg" style="padding: 30px; padding-bottom:15px;"/>bank</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/carousel.svg" style="padding: 30px; padding-bottom:15px;"/>carousel</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/cart.svg" style="padding: 30px; padding-bottom:15px;"/>cart</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/check.svg" style="padding: 30px; padding-bottom:15px;"/>check</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/checkbox_checked.svg" style="padding: 30px; padding-bottom:15px;"/>checkbox_checked</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/checkbox_multiple.svg" style="padding: 30px; padding-bottom:15px;"/>checkbox_multiple</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/checkbox_unchecked.svg" style="padding: 30px; padding-bottom:15px;"/>checkbox_unchecked</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/check_filled.svg" style="padding: 30px; padding-bottom:15px;"/>check_filled</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/check_outlined.svg" style="padding: 30px; padding-bottom:15px;"/>check_outlined</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/clicks.svg" style="padding: 30px; padding-bottom:15px;"/>clicks</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/clock.svg" style="padding: 30px; padding-bottom:15px;"/>clock</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/close.svg" style="padding: 30px; padding-bottom:15px;"/>close</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/close_filled.svg" style="padding: 30px; padding-bottom:15px;"/>close_filled</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/close_outlined.svg" style="padding: 30px; padding-bottom:15px;"/>close_outlined</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/code.svg" style="padding: 30px; padding-bottom:15px;"/>code</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/collage.svg" style="padding: 30px; padding-bottom:15px;"/>collage</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/columns.svg" style="padding: 30px; padding-bottom:15px;"/>columns</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/contract.svg" style="padding: 30px; padding-bottom:15px;"/>contract</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/cookie_length.svg" style="padding: 30px; padding-bottom:15px;"/>cookie_length</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/costs.svg" style="padding: 30px; padding-bottom:15px;"/>costs</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/credit_card.svg" style="padding: 30px; padding-bottom:15px;"/>credit_card</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/crown.svg" style="padding: 30px; padding-bottom:15px;"/>crown</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/cube.svg" style="padding: 30px; padding-bottom:15px;"/>cube</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dashboard.svg" style="padding: 30px; padding-bottom:15px;"/>dashboard</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/database.svg" style="padding: 30px; padding-bottom:15px;"/>database</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/data_collector.svg" style="padding: 30px; padding-bottom:15px;"/>data_collector</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/data_exploration.svg" style="padding: 30px; padding-bottom:15px;"/>data_exploration</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/date.svg" style="padding: 30px; padding-bottom:15px;"/>date</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/days.svg" style="padding: 30px; padding-bottom:15px;"/>days</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/desktop.svg" style="padding: 30px; padding-bottom:15px;"/>desktop</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/direct.svg" style="padding: 30px; padding-bottom:15px;"/>direct</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/display.svg" style="padding: 30px; padding-bottom:15px;"/>display</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/display_products.svg" style="padding: 30px; padding-bottom:15px;"/>display_products</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dollar.svg" style="padding: 30px; padding-bottom:15px;"/>dollar</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/download.svg" style="padding: 30px; padding-bottom:15px;"/>download</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/drag.svg" style="padding: 30px; padding-bottom:15px;"/>drag</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dropdown_down.svg" style="padding: 30px; padding-bottom:15px;"/>dropdown_down</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dropdown_left.svg" style="padding: 30px; padding-bottom:15px;"/>dropdown_left</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dropdown_right.svg" style="padding: 30px; padding-bottom:15px;"/>dropdown_right</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/dropdown_top.svg" style="padding: 30px; padding-bottom:15px;"/>dropdown_top</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/earned_social.svg" style="padding: 30px; padding-bottom:15px;"/>earned_social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/edit.svg" style="padding: 30px; padding-bottom:15px;"/>edit</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/euro.svg" style="padding: 30px; padding-bottom:15px;"/>euro</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_left.svg" style="padding: 30px; padding-bottom:15px;"/>expand_left</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_less.svg" style="padding: 30px; padding-bottom:15px;"/>expand_less</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_less_white.svg" style="padding: 30px; padding-bottom:15px;"/>expand_less_white</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_more.svg" style="padding: 30px; padding-bottom:15px;"/>expand_more</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_more_white.svg" style="padding: 30px; padding-bottom:15px;"/>expand_more_white</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/expand_right.svg" style="padding: 30px; padding-bottom:15px;"/>expand_right</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/filter.svg" style="padding: 30px; padding-bottom:15px;"/>filter</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/folder.svg" style="padding: 30px; padding-bottom:15px;"/>folder</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/fold_left.svg" style="padding: 30px; padding-bottom:15px;"/>fold_left</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/fold_right.svg" style="padding: 30px; padding-bottom:15px;"/>fold_right</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/goals.svg" style="padding: 30px; padding-bottom:15px;"/>goals</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/help_center.svg" style="padding: 30px; padding-bottom:15px;"/>help_center</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/hint.svg" style="padding: 30px; padding-bottom:15px;"/>hint</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/home.svg" style="padding: 30px; padding-bottom:15px;"/>home</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/integrations.svg" style="padding: 30px; padding-bottom:15px;"/>integrations</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/invoice.svg" style="padding: 30px; padding-bottom:15px;"/>invoice</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/job_log.svg" style="padding: 30px; padding-bottom:15px;"/>job_log</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/link_builder.svg" style="padding: 30px; padding-bottom:15px;"/>link_builder</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/link_connected.svg" style="padding: 30px; padding-bottom:15px;"/>link_connected</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/link_disconnected.svg" style="padding: 30px; padding-bottom:15px;"/>link_disconnected</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/live_chat.svg" style="padding: 30px; padding-bottom:15px;"/>live_chat</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/loading.svg" style="padding: 30px; padding-bottom:15px;"/>loading</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/lock.svg" style="padding: 30px; padding-bottom:15px;"/>lock</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/mail.svg" style="padding: 30px; padding-bottom:15px;"/>mail</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/members.svg" style="padding: 30px; padding-bottom:15px;"/>members</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/menu.svg" style="padding: 30px; padding-bottom:15px;"/>menu</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/menu_3.svg" style="padding: 30px; padding-bottom:15px;"/>menu_3</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/minus.svg" style="padding: 30px; padding-bottom:15px;"/>minus</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/minus_circle.svg" style="padding: 30px; padding-bottom:15px;"/>minus_circle</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/more_horizontal.svg" style="padding: 30px; padding-bottom:15px;"/>more_horizontal</div> <div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/more_vertical.svg" style="padding: 30px; padding-bottom:15px;"/>more_vertical</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/notifications.svg" style="padding: 30px; padding-bottom:15px;"/>notifications</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/office.svg" style="padding: 30px; padding-bottom:15px;"/>office</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/organic_search.svg" style="padding: 30px; padding-bottom:15px;"/>organic_search</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/outbound.svg" style="padding: 30px; padding-bottom:15px;"/>outbound</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/owned_social.svg" style="padding: 30px; padding-bottom:15px;"/>owned_social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/paid_search.svg" style="padding: 30px; padding-bottom:15px;"/>paid_search</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/paid_social.svg" style="padding: 30px; padding-bottom:15px;"/>paid_social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/paste.svg" style="padding: 30px; padding-bottom:15px;"/>paste</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/pause.svg" style="padding: 30px; padding-bottom:15px;"/>pause</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/payments.svg" style="padding: 30px; padding-bottom:15px;"/>payments</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/percentage.svg" style="padding: 30px; padding-bottom:15px;"/>percentage</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/phone.svg" style="padding: 30px; padding-bottom:15px;"/>phone</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/picture.svg" style="padding: 30px; padding-bottom:15px;"/>picture</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/plus.svg" style="padding: 30px; padding-bottom:15px;"/>plus</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/plus_circle.svg" style="padding: 30px; padding-bottom:15px;"/>plus_circle</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/pointer_bottom.svg" style="padding: 30px; padding-bottom:15px;"/>pointer_bottom</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/pointer_left.svg" style="padding: 30px; padding-bottom:15px;"/>pointer_left</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/pointer_right.svg" style="padding: 30px; padding-bottom:15px;"/>pointer_right</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/pointer_top.svg" style="padding: 30px; padding-bottom:15px;"/>pointer_top</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/power.svg" style="padding: 30px; padding-bottom:15px;"/>power</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/print.svg" style="padding: 30px; padding-bottom:15px;"/>print</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/publications.svg" style="padding: 30px; padding-bottom:15px;"/>publications</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/referrals.svg" style="padding: 30px; padding-bottom:15px;"/>referrals</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/reset.svg" style="padding: 30px; padding-bottom:15px;"/>reset</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/return.svg" style="padding: 30px; padding-bottom:15px;"/>return</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/rows.svg" style="padding: 30px; padding-bottom:15px;"/>rows</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/rulebuilder.svg" style="padding: 30px; padding-bottom:15px;"/>rulebuilder</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/search.svg" style="padding: 30px; padding-bottom:15px;"/>search</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/sessions.svg" style="padding: 30px; padding-bottom:15px;"/>sessions</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/settings.svg" style="padding: 30px; padding-bottom:15px;"/>settings</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/share.svg" style="padding: 30px; padding-bottom:15px;"/>share</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/sign_out.svg" style="padding: 30px; padding-bottom:15px;"/>sign_out</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/smartphone.svg" style="padding: 30px; padding-bottom:15px;"/>smartphone</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/sort.svg" style="padding: 30px; padding-bottom:15px;"/>sort</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/stats_down.svg" style="padding: 30px; padding-bottom:15px;"/>stats_down</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/stats_up.svg" style="padding: 30px; padding-bottom:15px;"/>stats_up</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/status.svg" style="padding: 30px; padding-bottom:15px;"/>status</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/storefront.svg" style="padding: 30px; padding-bottom:15px;"/>storefront</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/tablet.svg" style="padding: 30px; padding-bottom:15px;"/>tablet</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/tag.svg" style="padding: 30px; padding-bottom:15px;"/>tag</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/thick_down.svg" style="padding: 30px; padding-bottom:15px;"/>thick_down</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/thick_left.svg" style="padding: 30px; padding-bottom:15px;"/>thick_left</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/thick_right.svg" style="padding: 30px; padding-bottom:15px;"/>thick_right</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/thick_up.svg" style="padding: 30px; padding-bottom:15px;"/>thick_up</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/tools.svg" style="padding: 30px; padding-bottom:15px;"/>tools</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/tooltip.svg" style="padding: 30px; padding-bottom:15px;"/>tooltip</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/trash.svg" style="padding: 30px; padding-bottom:15px;"/>trash</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/upload.svg" style="padding: 30px; padding-bottom:15px;"/>upload</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/users_account.svg" style="padding: 30px; padding-bottom:15px;"/>users_account</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/users_admin.svg" style="padding: 30px; padding-bottom:15px;"/>users_admin</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/users_multiple.svg" style="padding: 30px; padding-bottom:15px;"/>users_multiple</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/users_share.svg" style="padding: 30px; padding-bottom:15px;"/>users_share</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/users_single.svg" style="padding: 30px; padding-bottom:15px;"/>users_single</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/user_add.svg" style="padding: 30px; padding-bottom:15px;"/>user_add</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/view.svg" style="padding: 30px; padding-bottom:15px;"/>view</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/widget.svg" style="padding: 30px; padding-bottom:15px;"/>widget</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/play.svg" style="padding: 30px; padding-bottom:15px;"/>play</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/admin.svg" style="padding: 30px; padding-bottom:15px;"/>admin</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/fallback.svg" style="padding: 30px; padding-bottom:15px;"/>fallback</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/bullet_list.svg" style="padding: 30px; padding-bottom:15px;"/>bullet_list</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/www.svg" style="padding: 30px; padding-bottom:15px;"/>www</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/transaction-journey-transaction.svg" style="padding: 30px; padding-bottom:15px;"/>transaction-journey-transaction</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/transaction-journey.svg" style="padding: 30px; padding-bottom:15px;"/>transaction-journey</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/affiliate.svg" style="padding: 30px; padding-bottom:15px;"/>affiliate</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/direct-unknown.svg" style="padding: 30px; padding-bottom:15px;"/>direct-unknown</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/direct.svg" style="padding: 30px; padding-bottom:15px;"/>direct</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/display.svg" style="padding: 30px; padding-bottom:15px;"/>display</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/earned-social.svg" style="padding: 30px; padding-bottom:15px;"/>earned-social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/email.svg" style="padding: 30px; padding-bottom:15px;"/>email</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/organic-search.svg" style="padding: 30px; padding-bottom:15px;"/>organic-search</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/other.svg" style="padding: 30px; padding-bottom:15px;"/>other</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/owned-social.svg" style="padding: 30px; padding-bottom:15px;"/>owned-social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/paid-search.svg" style="padding: 30px; padding-bottom:15px;"/>paid-search</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/paid-social.svg" style="padding: 30px; padding-bottom:15px;"/>paid-social</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/partner.svg" style="padding: 30px; padding-bottom:15px;"/>partner</div>
<div class="xsmall" style="display: flex; flex-direction:column; width: 105px; margin: 0 5px; text-align: center;"><img src="./images/transaction-explorer/channel-icons/referring.svg" style="padding: 30px; padding-bottom:15px;"/>referring</div>
</div>
</div>
Source:
src/icons.less, line 1